横向滑动，如下
/*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水平方向滑动时必须设置为truescroll-view标签只能在wxml中设置white-space必须设置为nowrap(竖直滑动为wrap)scroll-view标签可以在wxss中设置display必须设置为inline-blockscroll-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）
先来看一下效果图
/*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中。运行效果图如下：
