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

Posted 2022-11-28 王梵

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(竖直滑动为wrap)	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中。

运行效果图如下：