微信小程序开发案例教程-项目四 视图容器组件与基础内容组件.pptx

微信小程序

开发案例教程;全书目录;项目四

视图容器组件与

基础内容组件;项目导读;知识目标;;;任务描述;view是最基础的视图容器组件。;小贴士;怎样在WXML文件中添加一个view组件，然后在其中嵌套两个view组件？;【例4-1】在WXML文件中添加一个view组件，然后在其中嵌套两个view组件，代码如下。;小贴士;在相应的WXSS文件中为3个view组件设置样式，代码如下。;;scroll-view是可滚动的视图容器组件，用于创建可滚动的视图区域，用户可通过滑动显示隐藏的内容。;【例4-2】在WXML文件中使用scroll-view组件实现横向滚动和纵向滚动效果，代码如下。;在相应的WXSS文件中为组件设置样式，代码如下。;续;编译或保存代码后，可以在小程序页面的可滚动区域滑动。;;;【例4-3】在WXML文件中添加一个swiper组件并设置相应属性，然后在其中添加一个swiper-item组件并对其进行列表渲染，代码如下。;在相应的JS文件中对WXML文件中的变量进行初始化，代码如下。;在相应的WXSS文件中为swiper-item组件中的view组件设置样式，代码如下。;编译或保存代码后，小程序页面的swiper组件显示为黄色。由于autoplay属性的值为true，所以swiper组件会自动切换滑块内容。;;;;;;;任务描述;text是文本组件，也是最常见的基础内容组件，用于在页面显示文本内容。;其中，decode属性用于控制是否开启转义功能。例如，要想在页面显示“hello”，如果在WXML文件中输入如下代码。;;小贴士;常用的转义字符都有哪些？

受信任的HTML节点有哪些？;image是图片组件，用于在页面显示图片，支持JPG、PNG、SVG、WEBP、GIF等格式，从基础库2.3.0版本起支持云文件ID。;;【例4-4】将picture.png图片添加到index文件夹中，然后在WXML文件中使用image组件显示图片，代码如下。;;;小贴士;【例4-5】在WXML文件中使用text组件显示普通文本内容，使用rich-text组件显示具有特定样式的文本内容，代码如下。;在相应的JS文件中输入如下代码。;小贴士;;如果将nodes属性的值设为HTML字符串，代码如下。;小贴士;icon是图标组件，用于在页面显示图标。;;【例4-6】在WXML文件中添加一个progress组件，并设置相应属性，代码如下。;;;;;;;;;;;;;;;;;;;;;;;;课堂小结;谢谢！