【微信小程序笔记-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

<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;
}

.bc_yell

最后

以上就是愉快向日葵为你收集整理的【微信小程序笔记-3】组件-视图容器（ScrollView和Swiper）的全部内容，希望文章能够帮你解决【微信小程序笔记-3】组件-视图容器（ScrollView和Swiper）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。