以下是对与视图容器组件(ScrollView和Swiper)的简要使用说明
一、scroll-view
1、基本设置
首先是参考的开发文档网址
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/
新建一个wxml文件,添加scroll-view组件,组件中添加“绿、红、黄、蓝”四种颜色的view组件(view组件较为简单,与html中div类似,此处省略,可参考官方开发文档中对view组件的说明)
需要注意的是在这里只是添加了每个view组件的id和class,还需要再wxss文件中添加其样式
这里设置scroll-view组件为竖向滚动,使用竖向滚动时,需要给<scroll-view/>
一个固定高度,通过 WXSS 设置 height为250px
<scroll-view style="height:250px" scroll-y="true">
<view id="green" class="scroll-view-item bc_green"></view>
<view id="red" class="scroll-view-item bc_red"></view>
<view id="yellow" class="scroll-view-item bc_yellow"></view>
<view id="blue" class="scroll-view-item bc_blue"></view>
</scroll-view>
以下是wxss中对样式的设置,.scroll-view-item
对4个view组件同时设置高度为200px,.bc_green
等分别设置每个组件不同的背景颜色。
.scroll-view-item {
height: 200px;
}
.bc_green {
background-color: green;
}
.bc_red {
background-color: red;
}