横向滑动,如下

/*wxml*/
<view>
    <scroll-view class="demo-view-1" scroll-x="true">
        <view class="bc_green bc_size inline"></view>
        <view class="bc_red bc_size inline"></view>
        <view class="bc_blue bc_size inline"></view>
        <view class="bc_pink bc_size inline"></view>
        <view class="bc_yellow bc_size inline"></view>
        <view class="bc_gray bc_size inline"></view>
        <view class="bc_tan bc_size inline"></view>
    </scroll-view>
</view>

.demo-view-1{
    white-space: nowrap;
    height: 300rpx;
}

.bc_green{
    background-color: #00ff00;
}
.bc_red{
    background-color: #ff0000;
}
.bc_blue{
    background-color: #0000ff;
}
.bc_pink{
    background-color: pink;
}
.bc_yellow{
    background-color: yellow;
}
.bc_gray{
    background-color: gray;
}
.bc_tan{
    background-color: tan;
}
.inline{
    display: inline-block;
}
.bc_size{
    width: 300rpx;
    height: 300rpx;
}

x

运行效果如下
这里写图片描述

scroll-view标签上需要注意的属性,如下

属性名 说明 位置 备注
scroll-x 水平方向滑动时必须设置为true scroll-view标签 只能在wxml中设置
white-space 必须设置为nowrap scroll-view标签 可以在wxss中设置
display 必须设置为inline-block scroll-view的子组件上 可以在wxss中设置

display:inline-block,这对键值只需要在scroll-view的子组件上设置就可以了,scroll-view上不需要设置display属性,默认值即可。


竖直方向滑动,如下

/*wxml*/
<view>
    <scroll-view class="demo-view-2" scroll-y="true">
        <view class="bc_green bc_size"></view>
        <view class="bc_red bc_size"></view>
        <view class="bc_blue bc_size"></view>
        <view class="bc_pink bc_size"></view>
        <view class="bc_yellow bc_size"></view>
        <view class="bc_gray bc_size"></view>
        <view class="bc_tan bc_size"></view>
    </scroll-view>
</view>

运行效果如下:
这里写图片描述

与横向滑动相比,竖直方向滑动只需要scroll-y=“true”即可。


水平滑动有了,竖直滑动也有了,那就来个混合式的。
效果如下:
这里写图片描述

<view>
    <scroll-view class="demo-view-2" scroll-y="true">
        <view class="bc_green bc_size-2"></view>

        <scroll-view class="demo-view-1" scroll-x="true">
            <view class="bc_aqua bc_size inline"></view>
            <view class="bc_red bc_size inline"></view>
            <view class="bc_cadetblue bc_size inline"></view>
            <view class="bc_pink bc_size inline"></view>
            <view class="bc_yellow bc_size inline"></view>
            <view class="bc_gray bc_size inline"></view>
            <view class="bc_tan bc_size inline"></view>
        </scroll-view>

        <view class="bc_blue bc_size-2"></view>
        <view class="bc_pink bc_size-2"></view>
        <view class="bc_yellow bc_size-2"></view>
        <view class="bc_gray bc_size-2"></view>
        <view class="bc_tan bc_size-2"></view>
        <view class="bc_red bc_size-2"></view>
    </scroll-view>
</view>
.demo-view-1{
    white-space: nowrap;
    height: 300rpx;
}
.demo-view-2{
    margin-top: 30rpx;
}

.bc_green{
    background-color: #00ff00;
}
.bc_red{
    background-color: #ff0000;
}
.bc_blue{
    background-color: #0000ff;
}
.bc_pink{
    background-color: pink;
}
.bc_yellow{
    background-color: yellow;
}
.bc_gray{
    background-color: gray;
}
.bc_tan{
    background-color: tan;
}
.bc_aqua{
    background-color: aqua;
}
.bc_cadetblue{
    background-color: cadetblue;
}

.inline{
    display: inline-block;
}
.bc_size{
    width: 300rpx;
    height: 300rpx;
}
.bc_size-2{
    width: 750rpx;
    height: 300rpx;
}

ok,下面看一下轮播图组件(swiper)

swiper(轮播图)


先来看一下效果图
这里写图片描述

/*wxml*/
<view>
    <swiper autoplay="true" indicator-dots="true" duration="1000" interval="2000" circular="true">
        <block wx:for="{{backgrounds}}" wx:key="*this">
            <swiper-item>
                <view class="swiper-item {{item}}"></view>
            </swiper-item>
        </block>
    </swiper>
</view>
  • 6

Note:swiper-item中设置高度,如果值过低,就会出现小原点显示在图片下面的情况。而这个值一旦超过某个值之后,即便再设置的很大,图片也不会再跟着放大,内部应该是有宽高比限制。

来看一下swiper的各个属性

  • autoplay,是否自动滑动
  • indicator-dots,是否显示小原点
  • duration,动画持续时间
  • interval,动画之间的间隔
  • circular,是否循环显示,如果为false,轮播图在显示完最后一张图之后,会反方向滑动到第1张图,之后再继续轮播。

上面的例子是展示的带有背景色的view,我们来显示几张网络图片

Page({
  data:{
    urls:[
      'http://img5.imgtn.bdimg.com/it/u=1911381118,3238075709&fm=23&gp=0.jpg',
    'http://img1.imgtn.bdimg.com/it/u=1886033258,3902949189&fm=23&gp=0.jpg',
    'http://img3.imgtn.bdimg.com/it/u=2887528263,619574268&fm=23&gp=0.jpg'
    ],
    autoplay:true,
    indicatordots:true,
    duration:1000,
    interval:2000,
    circular:true
  }
})
<view>
    <swiper autoplay="{{autoplay}}" indicator-dots="{{indicatordots}}" duration="{{duration}}" interval="{{interval}}" circular="{{circular}}">
        <block wx:for="{{urls}}" wx:key="*this">
            <swiper-item>
<image src="{{item}}" class="swiper-item"/>
            </swiper-item>
        </block>
    </swiper>
</view>

与上一个例子的不同之处

  • swiper的最内层标签换为了image
  • 将swiper的一些属性值变成了变量,放在了js文件的data中。

运行效果图如下:
这里写图片描述