微信小程序实现滚动标签

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

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

<!--pages/list/list.wxml-->
<navigation-bar
    title="小程序" 
    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、代码实现结果如下：