微信小程序开发手记之四：视图容器

scroll-view

---

横向滑动，如下

/*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>

/*wxss*/.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;}

运行效果如下

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>

/**wxss*/其它的设置与横向滑动时一样.demo-view-2{    margin-top: 30rpx;}

运行效果如下：

与横向滑动相比，竖直方向滑动只需要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>

/*wxss*/.swiper-item{    height: 500px;/*如果这个值设置的不合适，会导致小原点在图的下面*/}.aa{  background-color: #1AAD19;}.bb{  background-color: #2782D7;}.cc{  background-color: #F1F1F1;}

/*js文件*/Page({  data:{    backgrounds:["aa","bb","cc"]  }})

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中。

运行效果图如下：