【微信小程序笔记-3】组件-视图容器（ScrollView和Swiper）

124 阅读 0 评论 82 点赞

我是靠谱客的博主愉快向日葵，这篇文章主要介绍【微信小程序笔记-3】组件-视图容器（ScrollView和Swiper），现在分享给大家，希望可以做个参考。

以下是对与视图容器组件（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

复制代码

1
2
3
4
5
6
<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 等分别设置每个组件不同的背景颜色。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
.scroll-view-item {
  height: 200px;
}

.bc_green {
  background-color: green;
}

.bc_red {
  background-color: red;
}

.bc_yell