博客水木

横向滑动，如下

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

运行效果图如下：