文档介绍：第4章
莫凡商城首页静态布局设计
微信小程序开发项目教程（慕课版）
工业和信息化人才培养规划教材
人民邮电出版社
莫凡商城首页包含3 个部分的功能：第1 部分是用来搜索莫凡商城商品的搜索区域；第2 部分是通过海报轮播效果显示的轮播广告；第3 部分用来展示图书商品，每个区域展示3 本图书，可以通过单击“查看更多”按钮找到更多的图书商品。
本章导读
The chapter’s introduction
目录导航
　首页需求分析与知识点
视图容器组件在首页中的应用
　基础内容组件
　 image 图片组件及图片API 的应用
　小结
　导航组件和导航API
　项目实战：任务12—实现图书更多列表显示功能静态布局
首页需求分析与知识点
莫凡商城首页包含搜索、海报轮播、展示图书商品、查看更多图书商品功能，它的布局设计需要用到视图容器组件，如view 视图容器组件、swiper 滑块视图容器组件、text 文本组件、image 图片组件等。我们会详细介绍这些组件及其相关组件的使用方法，海报轮播效果使用swiper 滑块视图容器组件来实现；单击搜索区域和查看更多图书商品时会进行页面跳转，会用到导航组件和导航API；界面的样式需要用WXSS 样式来渲染，进行页面美化布局，最终才能完成莫凡商城首页的静态布局设计。
view 视图容器组件
view视图容器组件是WXML界面布局的基础组件，也是最常用的界面布局组件，它的使用和HTML里的DIV 功能类似。view 视图容器组件有自己的属性。
属性
类型
默认值
说明
hover-class
string
none
指定按下去的样式类。当 hover-class="none" 时，表示没有单击态效果
hover-stop-propagation
boolean
false
指定是否阻止本节点的祖先节点出现单击态
hover-start-time
number
50
指定按住后多久出现单击态，单位为ms
hover-stay-time
number
400
指定手指松开后单击态的保留时间，单位为ms
view 视图容器组件
案例：文件页面里，输出“Hello World”文字、头像、昵称可以使用view布局，渲染出界面内容。
01
OPTION
view 视图容器组件
具体代码如下。
<view class="container">
<view class="userinfo">
<image bindtap="bindViewTap" class="userinfo-avatar" src="/ Q0j4TwGT
fTI249Dbdib9mqaKWK29vWLp2KlPHrMO0bwmOgLUE9T86XOG9kRx9PtBMRic4HFwqeHbUlK5IDWzvwPA/132"
mode="cover"></image>
<text class="userinfo-nickname">kevin</text>
</view>
<view class="usermotto">
<text class="user-motto">Hello World</text>
</view>
</view>
scroll-view 可滚动视图容器组件
scroll-view 是可滚动视图容器组件，允许视图容器中的内容进行横向滚动或者纵向滚动，类似于浏览器的水平滚动条和垂直滚动条，可以在有限的显示窗口中，通过滚动的方式显示更多的内容。
属性
类型
默认值
说明
scroll-x
Boolean
false
允许横向滚动
scroll-y
Boolean
false
允许纵向滚动
upper-threshold
Number
50
指定距顶部/左边多远时，触发scrolltoupper 事件，单位为像素
lower-threshold
Number
50
指定距