微信小程序实现滚动标签

使用scroll-view标签可实现组件滚动标签

1、list中 list.wxml代码如下:

<!--pages/list/list.wxml-->
<navigation-bartitle="小程序" back="{{false}}"color="black" background="#FFF"></navigation-bar><scroll-view class="container1" scroll-y><view>A</view><view>B</view><view>C</view></scroll-view>

2、list中 list.less代码实现如下：

/* pages/list/list.wxss */
.container1 view{width: 100px;height: 100px;text-align: center;line-height: 100px;
}.container1 view:nth-child(1){background-color: lightcoral;
}.container1 view:nth-child(2){background-color: lightgreen;
}.container1 view:nth-child(3){background-color:lightblue;
}.container1{border: 1px solid lightblue;width: 100px;height: 100px;
}

3、别忘记将list布局文件放置在app.json的page函数的第一项o

4、代码实现结果如下：