微信小程序开发图解案例教程第3章 用微信小程序组件构建UI界面

2．横向滚动 在使用“今日头条”或“腾讯新
闻”时，在新闻列表的上方都会有新 闻频道供我们选择，可以向左滑动和 向右滑动来查看相应类别的新闻，可 以采用SCROLL-VIEW来实现这些新闻 频道的横向滚动，如图3.3所示。
图3.3 今日头条新闻频道
3.1.3 SWIPER滑块视图容器
SWIPER滑块视图容器用来在指定区域内切换显示内容，常用来制 作海报轮播效果和页签内容切换效果，它的属性如表3.3所示。
3.1.5 COVER-VIEW覆盖原生组件的视图容器
COVER-VIEW、COVER-IMAGE这两个是覆盖原生组件的视图容器。 比如在使用地图组件时，地图组件本身的功能很有局限，但是想放 置一些特殊的内容或图片，这时就需要使用覆盖地图组件的视图容器。 COVER-VIEW是指覆盖在原生组件之上的文本视图，可覆盖的原生组 件包括MAP、VIDEO、CANVAS、CAMERA，只支持嵌套COVER-VIEW、COVERIMAGE。 COVER-IMAGE是指覆盖在原生组件之上的图片视图，可覆盖的原生 组件同COVER-VIEW一样，支持嵌套COVER-VIEW。
下面使用COVER-VIEW、COVER-IMAGE覆盖原生组件的视图容器组 件，在VIDEO视频播放组件上放置播放、暂停两个图片，同时放置一 个时间内容显示区域，如图3.8、图3.9所示。
下面使用MOVABLE-VIEW可移动视图容器组件来进行滑动，黄色区 域代表可以移动的区域，红色方块代表可以移动的组件，如图3.7所示。
图3.7 可移动视图容器
（1）在WXML文件里，使用MOVABLE-AREA和MOVABLE-VIEW视图容器组 件进行布局。 （2）在JS文件里，提供拖动函数、缩放函数，通过数据绑定的方式 渲染到页面上。
（1）在WXML文件里使用SCROLL-VIEW进行布局，设置SCROLL-Y=“TRUE” 纵向滚动，绑定BINDSCROLLTOUPPER、BINDSCROLLTOLOWER、BINDSCROLL、 SCROLL-INTO-VIEW、SCROLL-TOP事件。 （2）在JS文件里设置颜色的数组，绑定TOVIEW和SCROLLTOP数据值，提 供BINDSCROLLTOUPPER、BINDSCROLLTOLOWER、BINDSCROLL、SCROLLINTO-VIEW、SCROLL-TOP事件函数。
2．页签内容切换效果 SWIPER滑块视图容器除了可以用来
实现海报轮播效果，还可以实现页签切 换效果。
页签切换效果常用于多种方式的登 录或者多种类别的切换，如图3.6所示。
图3.6 页签切换效果
（1）进入到WXML文件里，进行账号密码登录和手机快捷登录的界面 布局设计。 （2）进入到WXSS文件里，给页面文件添加样式。 （3）进入到JS文件里，提供窗口的宽度、高度、当前面板的索引值， 提供页签切换函数。
表3.3 swiper属性
1．海报轮播效果 海报轮播效果常用来展示商品图片信息或者广告信息，是很多网
站或者APP软件都会采用的一种布局方式，如图3.4、图3.5所示。
图3.4 海报1
图3.5 海报2
（1）在WXML文件里，采用SWIPER滑块视图容器组件进行海报轮播区 域的布局。 （2）在JS文件里，提供海报轮播的图片，设置是否自动播放，提供 轮播的时长等数据，通过数据绑定的方式渲染到页面上。
3.1.1 VIEW视图容器
VIEW视图容器是WXML界面布局的基础组件， 它的使用和HTML里的DIV类似，主要用于界面 的布局。
VIEW视图容器也有自己的属性，如表3.1 所示。
表3.1 view属性
在WXML界面里使用VIEW布局， 渲染出界面内容，如图3.1所示。
图3.1 view布局
3.1.2 SCROLL-VIEW可滚动视图区域
SCROLL-VIEW可滚动视图区域允许视图区域内容横向滚动或者纵 向滚动，类似于浏览器的横向滚动条和垂直滚动条，SCROLL-VIEW拥 有自己的属性和事件，如表3.2所示。
表3.2 scroll-view属性
1．纵向滚动 允许内容纵向滚动，需要给<SCROLL
-VIEW/>一个固定高度，可以绑定滚动 到顶部/左边（BINDSCROLLTOUPPER）、 滚动到底部/右边（BINDSCROLLTOLOWER）、 滚动时（BINDSCROLL）触发的事件，也 可以滚动到指定的ID区域（SCROLLINTO-VIEW）。
下面实现纵向滚动，如图3.2所示。
图3.2 纵向滚动
微信小程序开发图解案例教程 （附精讲视频）（第2版）
刘刚 著
第3章 用微信小程序组件构建UI界面
视图容器组件 ■ 基础内容组件 ■ 丰富的表单组件 ■ 导航组件 ■ 媒体组件 ■ 地图组件 ■ 画布组件 ■ 沙场大练兵：表单登录注册微信小程序 ■ 小结 ■
3.1 视图容器组件
视图容器组件共有5种：VIEW视图容器、SCROLL-VIEW可滚动 视图区域、SWIPER滑块视图容器、MOVABLE-Vபைடு நூலகம்EW可移动视图容器、 COVER-VIEW覆盖原生组件的视图容器。
表3.4 movable-view属性
MOVABLE-VIEW提供了两个特殊事件：HTOUCHMOVE事件，指初次手 指触摸后的移动为横向移动，如果CATCH此事件，则意味着TOUCHMOVE 事件也被CATCH；VTOUCHMOVE事件，指初次手指触摸后的移动为纵向移 动，如果CATCH此事件，则意味着TOUCHMOVE事件也被CATCH。
3.1.4 MOVABLE-VIEW可移动视图容器
MOVABLE-VIEW是一个可移动视图容器，在页面中可以做拖曳滑动。 在使用这个组件的时候，需要先定义可移动区域MOVABLE-AREA，然 后定义直接子节点MOVABLE-VIEW，否则不能移动。 MOVABLE-AREA必须设置WIDTH和HEIGHT属性，不设置默认为10PX； MOVABLE-VIEW必须设置WIDTH和HEIGHT属性，不设置默认为10PX， MOVABLE-VIEW默认为绝对定位，TOP和LEFT属性为0PX。 MOVABLE-VIEW可移动视图容器的属性如表3.4所示。