微信小程序开发项目实战（微课版）课件 4-3 课件-商城首页视图设计.pptx

项目四商城首页模块开发任务三商城首页视图设计Mallhomepageviewdesign

任务描述项目四商城首页模块开发在确定好项目功能之后，接下来创建新的项目。并在新的项目下创建所需要的页面文件。首页效果图如右所示：

属性类型默认值描述pagePathstring是页面路径，必须在pages中先定义textstring是tab上按钮文字iconPathstring否图片路径，icon大小限制为40kb，建议尺寸为81px*81px，不支持网络图片。当position为top时，不显示icon。selectedIconPathstring否选中时的图片路径，icon大小限制为40kb，建议尺寸为81px*81px，不支持网络图片。当position为top时，不显示icon。表对象属性值tabBar组件的设计如果小程序是一个多tab应用（客户端窗口的底部或顶部有tab栏可以切换页面），可以通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应页面。其中list接受一个数组，只能配置最少2个、最多5个tab。

【示例4-3】使用tabBar组件，完成“梅园”小程序底部导航，实现页面切换效果。效果所下图所示。tabBar组件的设计

swiper组件的设计swiper组件为滑块视图容器。通常用于图片之间的切换播放，被形象地称为轮播图。swiper组件分成两个部分：是外部的swiper组件；嵌套在swiper内的swiper-item组件，并且也只能嵌套swiper-item组件。图轮播图效果图【示例4-4】“梅园”小程序首页的轮播图功能

表swiper组件属性属性类型默认值必填描述indicator-dotsbooleanfalse否是否显示面板指示点indicator-colorcolorrgba(0,0,0,.3)否指示点颜色indicator-active-colorcolor#000000否当前选中的指示点颜色autoplaybooleanfalse否是否自动切换currentnumber0否当前所在滑块的indexintervalnumber5000否自动切换时间间隔durationnumber500否滑动动画时长swiper组件的设计swiper组件可以设置的部分属性如下表所示。

作用：在WXML页面中跳转的导航。navigator组件的设计类型一：保留当前跳转，跳转后可以返回当前页，它与wx.navigateTo跳转效果是一样的；navigator组件类型二：关闭当前页跳转，是无法返回当前页，它与wx.redirrectTo跳转效果是一样的；类型三：跳转底部标签导航指定的页面，它与wx.switchTab跳转效果是一样的。

属性类型默认值描述targetstringself在哪个目标上发生跳转，默认当前小程序。Self：当前小程序；miniProgram：其它小程序urlstring当前小程序内的跳转链接open-typestringnavigate跳转方式。属性值包括navigate、redirect、switchTab、reLaunch、navigateBack、exittargetstringself在哪个目标上发生跳转，默认当前小程序。Self：当前小程序；miniProgram：其它小程序表对象属性值navigator组件的设计navigator组件

【示例4-5】利用Flex弹性盒模型实现“梅园”小程序图片导航功能。完成效果如下图所示。图图片导航效果弹性布局设计页面

scroll-view组件的设计view组件用来对页面的结构进行布局，如果要在页面中某一区域实现滚动效果，可以使用scroll-view组件。使用竖向滚动时，需要给scroll-view一个固定高度，通过WXSS设置height。

表页面配置选项属性类型默认值必填描述scroll-xbooleanfalse否允许横向滚动scroll-ybooleanfalse否允许纵向滚动upper-thresholdnumber/string50否距顶部/左边多远时，触发scrolltoupper事件lower-thresholdnumber/string50否距底部/右边多远时，触发scrolltolower事件scroll-topnumber/string否设置竖向滚动条位置scroll-leftnumber/string否设置横向滚动条位置scroll-into-viewstring否值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动