当前位置：文档之家 › 微信小程序开发图解案例教程第3章 用微信小程序组件构建UI界面

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

  • 格式：pptx
  • 大小：6.91 MB
  • 文档页数：83

下载文档原格式

  / 83

合集下载

微信小程序开发项目教程(慕课版)教案 (4)[15页]

微信小程序开发项目教程(慕课版)教案 (4)[15页]

第3章莫凡商城小程序的项目结构示例代码如下。

<!--index.wxml--><view> {{ message }} </view>//index.jsPage({data: {message: '你好, 微信小程序'}})3.3.3 组件属性动态绑定数据组件属性动态绑定数据，是将*.js文件data对象里的数据绑定到小程序的组件上，示例代码如下。

<!--index.wxml--><view id="{{id}}"> </view>//index.jsPage({data: {id: 0}})3.3.4 控制属性动态绑定数据控制属性动态绑定数据是通过条件判断if语句来控制的，如果满足条件判断，则执行该语句，否则不执行，示例代码如下。

<!--index.wxml--><view wx:if="{{flag}}"> </view>//index.jsPage({data: {flag: true}})3.3.5 关键字动态绑定数据关键字动态绑定数据用于将组件的一些关键字绑定数据，如复选框组件，checked关键字如果等于true，则代表选中复选框，等于false则代表不选中复选框，示例代码如下。

<checkbox checked="{{false}}"> </checkbox>不要直接写checked="false"，否则其计算结果是一个字符串，转换成boolean类型后代表真值。

3.3.6 运算可以在{{}}内进行简单的运算，小程序支持以下几种方式的运算。

（1）三元运算，示例代码如下。

<view hidden="{{flag ? true : false}}"> Hidden </view>（2）数学运算，示例代码如下。

微信小程序培训课完整版 ppt课件

微信小程序培训课完整版 ppt课件
怎么学？？？
1、学习css之前html要熟练，没有墙面（html）的话，我们给墙面怎么刷漆（css装 饰）？对不对？ 2、看视频教程，看书籍，写代码，调试代码，多思考。 3、坚持下去，选择他就要把他学好，不忘初心。
网络在线手册地址：/css/
ppt课件
在这里要感谢微信大神：张小龙。
ppt课件
4
html基础课程
HTML：超文本标记语言 标签：<html></html>闭合标签、<br />自闭标签<img /><hr /> HTML很重要，重要，一定要学好。
HTML标签的熟练使用 如：<div><a><span><b><img><input><table><tr><td><p><ul><ol><li><dl><dt><dd> 等等。
text-indent:24px;
}
也可以这样编写，但是一定要注意结尾有英文的分号.初学者建议采用上面的方式编写
css;
css高级语法 同时定义多个元素多组声明的写法，英文状态下的逗号
p,h1,h2,div,table{
color:red;
font-size:16px;
}
4种css的加载方式 1、行内方式
犀牛课堂小程序培训课
——培训讲师：Tabniu
ppt课件
1
微信小程序开发工具
1、打开浏览器输入 https:///debug/wxadoc/dev/devtools/download.html?t=1475052055364 打开页面 2、查看系统信息 3、选择下载对应的工具 4、安装工具 5、打开工具（需要微信扫描登录） 6、尝试运行微信小程序

微信小程序PPT课件

微信小程序PPT课件
在小程序中应用
使用ES6语法可以让代码更简洁、易读和易于维护，同时提高 开发效率和代码质量。例如，使用箭头函数可以简化回调函 数，使用Promise可以优化异步操作等。
04
微信小程序核心组件与API详解
视图容器类组件（View、Scroll-View等）
01
02
03
View
最基础的容器组件，类似 于HTML中的div元素，用 于布局和展示内容。
响应式布局与移动端适配方法
响应式布局
一种设计和开发应对不同屏幕尺 寸的方法，通过媒体查询、流式 布局和弹性图片等技术实现。
移动端适配方法
包括视口设置、百分比布局、 rem/vw/vh单位、flex布局和 grid布局等技术和方法。
ES6新特性及其在小程序中应用
ES6新特性
包括let/const声明、箭头函数、模块化、解构赋值、扩展运 算符、Promise等。
06
实战案例：从零开始开发一个微信 小程序
需求分析和功能规划
01
02
03
04
确定目标用户群体和使用场景
梳理核心功能和附加功能
设计用户体验流程和交互逻辑
制定开发计划和时间表
界面设计和原型制作
选择适合的设计风格和色彩搭配 制作高保真原型，呈现最终效果
设计各个页面的布局和元素 与开发团队沟通和确认设计细节
03
在开发者工具中，选择 “本地设置”，配置代 理、端口号、网络等相 关参数。
04
确保电脑已安装Node.js 环境，以便后续进行小 程序的开发和调试。
使用官方开发工具进行开发
选择项目目录、填写项目 名称和AppID，点击确定
后开始创建项目。
利用开发者工具的模拟器 功能，预览和调试小程序

《微信小程序开发图解案例教程》教学教案—11仿华为商城微信小程序

《微信小程序开发图解案例教程》教学教案—11仿华为商城微信小程序

第7章综合案例：仿华为商城微信小程序教学过程7.1 需求描述仿华为商城微信小程序需要完成以下主要功能：（1）完成首页显示商品功能设计，首页内容包括搜索区域、海报轮播图片区域、精选商品列表区域、手机列表区域、笔记本电脑列表区域，如图所示。

首页手机笔记本电脑（2）完成分类页面里商品导航和导航对应商品显示设计，动态获取导航内容和导航对应的商品，如图所示。

分类（3）完成我的界面设计，包括账号相关设计和列表式导航设计，如图所示。

我的（4）完成登录设计，包括账号密码登录和手机快捷登录，如图所示。

账号密码登录手机快捷登录（5）完成账号注册功能，来获取用户账号信息，如图所示。

注册7.2 设计思路（1）设计底部标签导航，准备好底部标签导航的图标，并建立3个相应的页面；设置默认时图片和选中时图片，标签名称采用两种颜色，红色为选中颜色，灰色为默认颜色。

（2）设计我的页面，先进行我的页面布局设计，然后实现通过微信授权用户的方式来获取用户头像和昵称，来达到登录的效果，这也是很多小程序会采用的一种设计方式。

（3）除了通过微信授权的方式获取用户，也可以自行设计登录界面，本案例设计账号密码登录和手机快捷登录。

（4）完成登录设计之后，开始设计注册功能来获取用户账号。

（5）设计首页功能，首页功能包括搜索区域、海报轮播区域、宫格导航区域、精选商品区域、手机区域、笔记本电脑区域的布局，然后通过API接口动态的来获取海报轮播图片列表和商品列表。

（6）设计分类页面功能，先进行分类页面布局设计，然后通过API接口动态获取分类导航信息和导航对应商品列表。

7.3 相关知识点（1）在界面布局的时候，会用到微信小程序的组件，包括view视图容器组件、scroll-view可滚动视图区域组件、image图片组件、swiper滑块视图容器组件、icon图标组件、form表单组件、radio单项选择器组件、checkbox多项选择器组件等组件的使用。

（2）scroll-view可滚动视图区域组件用来实现首页精选商品左右滑动效果来查看所有的商品。

微信小程序开发-简易教程

微信小程序开发-简易教程

本文档将带你一步步创建完成一个微信小程序，并可以在手机上体验该小程序的实际效果。

这个小程序的首页将会显示欢迎语以及当前用户的微信头像，点击头像，可以在新开的页面中查看当前小程序的启动日志。

下载源码1. 获取微信小程序的AppID首先，我们需要拥有一个帐号，如果你能看到该文档，我们应当已经邀请并为你创建好一个帐号。

注意不可直接使用服务号或订阅号的AppID。

利用提供的帐号，登录https://，就可以在网站的“设置”-“开发者设置”中，查看到微信小程序的AppID了。

注意：如果我们不是用注册时绑定的管理员微信号，在手机上体验该小程序。

那么我们还需要操作“绑定开发者”。

即在“用户身份”-“开发者”模块，绑定上需要体验该小程序的微信号。

本教程默认注册帐号、体验都是使用管理员微信号。

2. 创建项目我们需要通过开发者工具，来完成小程序创建和代码编辑。

开发者工具安装完成后，打开并使用微信扫码登录。

选择创建“项目”，填入上文获取到的AppID，设置一个本地项目的名称（非小程序名称），比如“我的第一个项目”，并选择一个本地的文件夹作为代码存储的目录，点击“新建项目”就可以了。

为方便初学者了解微信小程序的基本代码结构，在创建过程中，如果选择的本地文件夹是个空文件夹，开发者工具会提示，是否需要创建一个quick start项目。

选择“是”，开发者工具会帮助我们在开发目录里生成一个简单的demo。

项目创建成功后，我们就可以点击该项目，进入并看到完整的开发者工具界面，点击左侧导航，在“编辑”里可以查看和编辑我们的代码，在“调试”里可以测试代码并模拟小程序在微信客户端效果，在“项目”里可以发送到手机里预览实际效果。

3. 编写代码创建小程序实例点击开发者工具左侧导航的“编辑”，我们可以看到这个项目，已经初始化并包含了一些简单的代码文件。

最关键也是必不可少的，是app.js、app.json、app.wxss这三个。

其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。

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

微信小程序开发图解案例教程 第3章 用微信小程序组件构建UI界面
表3.3 swiper属性
1．海报轮播效果 海报轮播效果常用来展示商品图片信息或者广告信息，是很多网 站或者APP软件都会采用的一种布局方式，如图3.4、图3.5所示。
图3.4
海报1
图3.5
ቤተ መጻሕፍቲ ባይዱ
海报2
（1）在WXML文件里，采用SWIPER滑块视图容器组件进行海报轮播区 域的布局。 （2）在JS文件里，提供海报轮播的图片，设置是否自动播放，提供 轮播的时长等数据，通过数据绑定的方式渲染到页面上。
微信小程序开发图解案例教程
第3章 用微信小程序组件构建UI界面
视图容器组件 ■ 基础内容组件 ■ 丰富的表单组件 ■ 导航组件 ■ 媒体组件 ■ 地图组件 ■ 画布组件 ■ 沙场大练兵：表单登录注册微信小程序 ■ 小结 ■
3.1
视图容器组件
视图容器组件共有5种：VIEW视图容器、SCROLL-VIEW可滚动 视图区域、SWIPER滑块视图容器、MOVABLE-VIEW可移动视图容器、 COVER-VIEW覆盖原生组件的视图容器。
（2）在JS文件里，添加CHECKBOXCHANGE事件函数，获取复选框选中 的值，将其打印出来，具体代码如下所示。 PAGE({ CHECKBOXCHANGE:FUNCTION(E){ CONSOLE.LOG(E.DETAIL.VALUE) } }) 界面效果如图3.15所示。
从图3.15中可以看出，被禁用的复选框是不能使用的，在CHECKBOXGROUP上面绑定BINDCHANGE事件，每次勾选时，会把所有勾选的复选框的 值以数组的形式存在DETAIL里。
示例代码如下： <PROGRESS PERCENT="20"SHOW-INFO/> <PROGRESS PERCENT="40"STROKE-WIDTH="12"/> <PROGRESS PERCENT="60"COLOR="PINK"/> <PROGRESS PERCENT="80"ACTIVE/> 界面效果如图3.12所示。

微信小程序开发图解案例教程

微信小程序开发图解案例教程

（8）2017年4月17日，小程序代码包大小限制扩大到2MB。 （9）2017年4月20日，腾讯公司发布公众号关注小程序新规则。 （10）2017年5月12日，腾讯公司发布“小程序数据助手”。 （11）2017年12月28日，微信更新的6.6.1版本开放了小游戏。
（12）2018年1月18日，微信提供了电子化的侵权投诉渠道，用户或者 企业可以在微信公众平台以及微信客户端入口进行投诉。 （13）2018年1月25日，微信团队在“微信公众平台”发布公告称“从 移动应用分享至微信的小程序页面，用户访问时支持打开来源应用”。
图1.17 Network功能
（4）STORAGE窗口用于显示当前项目，使用WX.SETSTORAGE或者 WX.SETSTORAGESYNC后的数据存储情况，如图1.18所示。
图1.18 Storage功能
（5）APPDATA窗口用于显示当前项目当前时刻的具体数据，实时地反 馈项目数据情况。用户可以在此处编辑数据，并及时地反馈到界面上， 如图1.19所示。
图1.3（b） 帮助文档
在帮助文档里有介绍、设计、小程序开发、运营、数据、社区6 个菜单，针对不同角色的用户提供了不同内容的帮助文档。
开发人员经常会用到这里的简易教程、框架的使用、组件的介绍、 API、工具以及腾讯云支持等内容。 STEP2：在文档工具里，根据自己的操作系统，下载微信小程序的开 发工具，如图1.4所示。
小程序的界面和使用方法和APP类似，图1.2所示是几个已发布的 常用小程序界面。
图1.2 常用微信小程序界面
用户需要下载、安装才可以使用APP，安装时还会考虑APP占用多 大存储空间，哪些程序应该卸载掉以释放空间。
微信小程序则无需安装，直接使用，不占用存储空间。用户在使 用微信小程序后，可以用完即走。

微信小程序基础ppt课件

微信小程序基础ppt课件
缓存策略
合理利用微信小程序的缓存机制， 对常用图片进行缓存，减少重复加 载。
数据缓存机制应用实践分享
数据结构优化
采用合适的数据结构，减少数据 存储和读取的时间。
缓存策略选择
根据数据特点选择合适的缓存策 略，如本地缓存、网络缓存等。
缓存清理
定期清理过期或不再使用的缓存 数据，保证缓存空间的有效利用
。
点击“立即注册”按钮 选择“小程序”注册
下载并安装微信开发者工具
访问微信开发者工具 官网
安装并运行微信开发 者工具
下载适合自己操作系 统的版本
创建并运行第一个小程序
填写项目名称和目录
在微信开发者工具中点击“ 新建项目”
01
02
03
选择小程序的模板
点击“确定”按钮创建项目
04
05
在微信开发者工具中预览和 调试小程序
03
微信小程序基本框架 与组件
小程序基本框架结构
01
02
03
04
小程序由页面、路由、配置文 件等组成
页面由多个组件组成，用于展 示数据和交互
件用于配置小程序的基 本信息和页面路径等
小程序页面结构及组件介绍
视图容器包括view、scroll-view 、swiper等，用于布局和滚动内 容
一致性
设计风格和元素应保持一 致，避免给用户带来混乱 和困惑。
用户体验
设计应注重用户体验，提 供良好的交互和反馈，使 用户能够轻松完成任务。
界面布局与排版技巧分享
布局合理
界面布局应合理，使用户 能够快速找到所需信息。
排版清晰
文字、图片等元素应排版 清晰，避免拥挤和重叠。
图标与文字
图标与文字应清晰易懂， 避免使用过于复杂或难以 理解的图标。

微信小程序开发项目教程ppt第3章(89)

微信小程序开发项目教程ppt第3章(89)
第3章
莫凡商城小程序的项目结构
微信小程序开发项目教程（慕课版）
工业和信息化人才培养规划教材 人民邮电出版社
本章导读
The chapter’s introduction
在1.4 节中，我们创建了莫凡商城小程序项目ቤተ መጻሕፍቲ ባይዱ默认生成了项目结构和文件，这些 文件分为框架页面文件、工具类文件、框架全局文件3 类，如图3.1 所示。本章我们介 绍微信小程序的项目结构。
转、需要跳转的小程 序列表、全局自定义 组件、小程序接口权 限、sitemap.json 文
plugins preloadRule resizable
navigateToMiniProgramAppIdList
usingComponents
件的位置等。
permission
sitemapLocation
1．app.js 小程序逻辑文件
app.js 文件用来定义全局数据和函数，它可 以指定微信小程序的生命周期函数。生命周 期函数可以理解为微信小程序自己定义的函 数，如onLaunch（监听小程序初始化）、 onShow（监听小程序显示）、onHide（监 听小程序隐藏）等，在不同阶段、不同场景 可以使用不同的生命周期函数。
3.1.1 框架全局文件
文件
app.js app.json app.wxss app.config.json sitemap.json
是否必填
是 是 否 是 是
作用
编写小程序逻辑 进行小程序公共配置 提供小程序公共样式表 进行小程序项目个性化配置 配置小程序及其页面是否允许被微信索引
3.1.1 框架全局文件
pages window
包结构，设置Worker tabBar

微信小程序入门ppt课件

微信小程序入门ppt课件
25
WXSS
26
1
尺寸单位
设备
rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度) 屏幕宽度
iPhone5
1rpx = 0.42px
1px = 2.34rpx
320
iPhone6
1rpx = 0.5px
1px = 2rpx
375
iPhone6 Plus 1rpx = 0.552px
27
2
样式导入
使用@import语句可以导入外联样式表，@import后跟需要导入的外联 样式表的相对路径，用;表示语句结束。
28
3
内联样式
框架组件上支持使用 style、class 属性来控制组件的样式。
style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解 析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。 <view style="color:{{color}};" />
0
1
2
3
16
7
View
实现点击效果
hover-class指定按下去的样式类。 当 hover-class="none" 时，没有点击态效果
WXML <view hover-class='hover'>按钮</view>
WXSS
.hover{ background-color: #aaa;
}
178239text\t 空格（ 多个只会显示一个空格） \n 换行
<text>你好！\t七月流火啊！\n我 在下一行</text>

2024版(完整版)微信小程序详细介绍ppt模板

2024版(完整版)微信小程序详细介绍ppt模板
鼓励用户将小程序分享至微信好友或朋友圈，扩大品牌曝光度。
微信公众号关联推广
通过微信公众号与小程序关联，实现内容互通、粉丝共享，提高小 程序曝光率。
微信广告投放
利用微信广告平台进行小程序广告投放，精准触达目标用户群体。
17
数据分析与优化调整方法
2024/1/29
数据监控与统计
建立数据监控机制，定期统计小程序访问量、用户留存率、转化 率等关键指标。
创建小程序项目
使用开发者工具创建新的 小程序项目，填写相关信 息如小程序名称、AppID 等。
8
编程语言及框架介绍
编程语言
微信小程序主要使用JavaScript 作为编程语言，用于实现小程序
的逻辑和交互功能。
框架介绍
微信小程序采用MINA框架，包 括视图层（WXML和WXSS）和 逻辑层（JavaScript），通过数 据绑定和事件处理实现界面与逻
20
创新应用场景探讨
智能家居控制
通过微信小程序，实现 远程控制智能家居设备，
提高生活便利性。
2024/1/29
健康管理
结合智能穿戴设备，通 过小程序实时监测用户 健康状况，提供个性化
健康建议。
社交互动
基于微信小程序的社交 功能，开发具有特色的 社交应用，满足用户社
交需求。
21
企业内部管理
针对企业内部管理需求， 开发相应的小程序，提 高管理效率和员工协作
跨界合作与创新
未来，微信小程序将积极寻求与其他领域的跨界合作，探索更多创新 应用场景，为用户带来更多便利和惊喜。
22
06
微信小程序开发技巧与注意事项
2024/1/29
23
提高用户体验的设计原则

第3章 用微信小程序组件构建UI界面PPT课件

第3章 用微信小程序组件构建UI界面PPT课件
微信小程序简明开发教程
第3章 用微信小程序组件构建UI界面
3.2 基础内容组件
➢ text组件：文本,支持转义符“\“；
微信小程序简明开发教程
第3章 用微信小程序组件构建UI界面
3.2 基础内容组件
➢progress组件：进度条；
微信小程序简明开发教程
第3章 用微信小程序组件构建UI界面
3.2 基础内容组件
第3章 用微信小程序组件构建UI界面
3.7 画布UI组件
➢ canvas组件：画布；
微信小程序简明开发教程
第3章 用微信小程序组件构建UI界面
3.8 实战：表单登录注册微信小程序
微信小程序简明开发教程
第3章用微信小程序组件构建UI界面
总结
➢ 视图容器组件 ➢ 基础内容组件 ➢ 丰富的表单组件 ➢ 导航组件 ➢ 媒体组件 ➢ 地图组件 ➢ 画布组件
第3章 用微信小程序组件构建UI界面
3.3 丰富的表单组件
➢picker组件：滚动选择器；
微信小程序简明开发教程
第3章 用微信小程序组件构建UI界面
3.3 丰富的表单组件
➢ slider组件：滑动选择器；
微信小程序简明开发教程
第3章 用微信小程序组件构建UI界面
3.3 丰富的表单组件
➢ switch组件：开关选择器；
➢rich-text组件：富文本；
rich-text富文本组件，通过这个组件可以在WXML页面文件显示一些富文本内容，比如 HTML一些元素内容显示
微信小程序简明开发教程
第3章 用微信小程序组件构建UI界面
3.3 丰富的表单组件
➢ button组件：按钮；
➢ checkbox组件：多选选择器，checkbox-group由多个checkbox组成；

2024版微信小程序基础ppt课件

2024版微信小程序基础ppt课件

应用场景及案例分析
拼多多小程序
拼多多通过小程序实现了电商购物的全流程体验，包括商品浏览、购买、支付等。借助小程序的便捷 性和用户群体优势，拼多多成功吸引了大量用户并实现快速增长。
美团外卖小程序
美团外卖通过小程序为用户提供餐饮外卖服务。用户可以在小程序中浏览餐厅和菜品、下单支付并享 受送餐服务。美团外卖小程序的便捷性和实用性赢得了用户的青睐。
提交审核、发布上线等后续操作指南
提交审核流程详解
详细阐述小程序提交审核的流程，包括准备审核材料、填 写审核信息、提交审核申请等。
审核常见问题及解决方案
列举在提交审核过程中可能遇到的问题，如审核失败、审 核时间过长等，并提供相应的解决方案和技巧。
发布上线操作指南
指导如何将通过审核的小程序发布上线，包括设置小程序 版本、选择发布范围、发布操作等。同时介绍如何管理已 发布的小程序，如更新版本、暂停服务等。
定期更新与优化
根据用户反馈和数据分析，定期更新小程序 并优化界面设计和用户体验。
06
网络请求与数据处理方案探讨
网络请求方式选择及实现过程演示
HTTP请求
01
使用`wx.request`发起HTTP请求，支持GET和POST方法。演示
如何设置请求参数、请求头以及处理响应数据。
WebSocket通信
微信小程序优势与特点
用户群体庞大
微信拥有超过十亿的用户群体， 为小程序提供了巨大的潜在用户 基础。
跨平台支持
小程序可在iOS和Android等主流 移动操作系统上运行，无需针对 不同平台开发多个应用。
微信小程序优势与特点
开发成本低
相对于原生应用，小程序的开发成本更低，维护更容易。
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
下面使用MOVABLE-VIEW可移动视图容器组件来进行滑动，黄色区 域代表可以移动的区域，红色方块代表可以移动的组件，如图3.7所示。
图3.7 可移动视图容器
（1）在WXML文件里，使用MOVABLE-AREA和MOVABLE-VIEW视图容器组 件进行布局。 （2）在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.4 movable-view属性
MOVABLE-VIEW提供了两个特殊事件：HTOUCHMOVE事件，指初次手 指触摸后的移动为横向移动，如果CATCH此事件，则意味着TOUCHMOVE 事件也被CATCH；VTOUCHMOVE事件，指初次手指触摸后的移动为纵向移 动，如果CATCH此事件，则意味着TOUCHMOVE事件也被CATCH。

（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事件函数。
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所示。
2．页签内容切换效果 SWIPER滑块视图容器除了可以用来
实现海报轮播效果，还可以实现页签切 换效果。
页签切换效果常用于多种方式的登 录或者多种类别的切换，如图3.6所示。
图3.6 页签切换效果
（1）进入到WXML文件里，进行账号密码登录和手机快捷登录的界面 布局设计。 （2）进入到WXSS文件里，给页面文件添加样式。 （3）进入到JS文件里，提供窗口的宽度、高度、当前面板的索引值， 提供页签切换函数。
-VIEW/>一个固定高度，可以绑定滚动 到顶部/左边（BINDSCROLLTOUPPER）、 滚动到底部/右边（BINDSCROLLTOLOWER）、 滚动时（BINDSCROLL）触发的事件，也 可以滚动到指定的ID区域（SCROLLINTO-VIEW）。
下面实现纵向滚动，如图3.2所示。
图3.2 纵向滚动
3.1.5 COVER-VIEW覆盖原生组件的视图容器
COVER-VIEW、COVER-IMAGE这两个是覆盖原生组件的视图容器。 比如在使用地图组件时，地图组件本身的功能很有局限，但是想放 置一些特殊的内容或图片，这时就需要使用覆盖地图组件的视图容器。 COVER-VIEW是指覆盖在原生组件之上的文本视图，可覆盖的原生组 件包括MAP、VIDEO、CANVAS、CAMERA，只支持嵌套COVER-VIEW、COVERIMAGE。 COVER-IMAGE是指覆盖在原生组件之上的图片视图，可覆盖的原生 组件同COVER-VIEW一样，支持嵌套COVER-VIEW。
3.1.2 SCROLL-VIEW可滚动视图区域
SCROLL-VIEW可滚动视图区域允许视图区域内容横向滚动或者纵 向滚动，类似于浏览器的横向滚动条和垂直滚动条，SCROLL-VIEW拥 有自己的属性和事件，如表3.2所示。
表3.2 scroll-view属性
1．纵向滚动 允许内容纵向滚动，需要给<SCROLL
下面使用COVER-VIEW、COVER-IMAGE覆盖原生组件的视图容器组 件，在VIDEO视频播放组件上放置播放、暂停两个图片，同时放置一 个时间内容显示区域，如图3.8、图3.9所示。
2．横向滚动 在使用“今日头条”或“腾讯新
闻”时，在新闻列表的上方都会有新 闻频道供我们选择，可以向左滑动和 向右滑动来查看相应类别的新闻，可 以采用SCROLL-VIEW来实现这些新闻 频道的横向滚动，如图3.3所示。
图3.3 今日头条新闻频道
3.1.3 SWIPER滑块视图容器
SWIPER滑块视图容器用来在指定区域内切换显示内容，常用来制 作海报轮播效果和页签内容切换效果，它的属性如表3.3所示。
微信小程序开发图解案例教程 （附精讲视频）（第2版）
刘刚 著
第3章 用微信小程序组件构建UI界面
视图容器组件 ■ 基础内容组件 ■ 丰富的表单组件 ■ 导航组件 ■ 媒体组件 ■ 地图组件 ■ 画布组件 ■ 沙场大练兵：表单登录注册微信小程序 ■ 小结 ■
3.1 视图容器组件
视图容器组件共有5种：VIEW视图容器、SCROLL-VIEW可滚动 视图区域、SWIPER滑块视图容器、MOVABLE-VIEW可移动视图容器、 COVER-VIEW覆盖原生组件的视图容器。