微信小程序开发项目实战（微课版）课件 6-1 课件-商品分类视图层设计

项目六产品项目模块开发任务一商品分类视图层设计Productclassificationviewlayerdesign在小程序开发中，商品模块一般包括商品分类列表、商品列表、商品详情、商品评价等，小程序提供了各类API和组件为实现商品模块提供了便利。掌握了这些API和组件的使用，即可完成商品模块功能的开发。本项目将通过“梅园-商品页面”，讲解商品分类的布局、组件的创建与使用、picker组件等各类商品页面所需要的功能。项目六产品项目模块开发任务描述定义基础数据

cateList:[{

id:'goods1',

banner:'/images/ban1.jpg',

catename:"腊梅鲜花",

goods_list:[{

item_img:'/images/goods1.jpg',

item_title:'澳洲腊梅'

}]

}]

打开pages/goodsCate/goodsCate.js文件的data对象中定义基础数据cateList，主要用于展示产品分类和产品信息。商品分类区域<scroll-viewclass="left"scroll-with-animation="true"scroll-y

style="height:{{windowHeight}}px;">

<viewwx:for="{{cateList}}"wx:key="id"bindtap="handleCategory"

data-index="{{index}}">

<textclass="cate-name{{leftIndex==index?'active':''}}">{{item.catename}}</text></view></scroll-view>

打开pages/goodsCate/goodsCate.wxml文件，编辑左边分类栏。商品分类区域商品分类页面滑动切换分类点击分类跳转列表滑动效果

在实现商城小程序的商品分类页面，可以是普通分类列表，也可以使用滚动列表效果，包括三种功能：列表滑动效果、滑动切换分类以及点击分类跳转到相应的分类位置。商品分类区域图wx.getWindowInfo()参数属性类别说明pixelRationumber设备像素比screenWidthnumber屏幕宽度，单位pxscreenHeightnumber屏幕高度，单位pxwindowWidthnumber可使用窗口宽度，单位pxwindowHeightnumber可使用窗口高度，单位pxstatusBarHeightnumber状态栏的高度，单位pxsafeAreaObject在竖屏正方向下的安全区域。left、right、top、bottom、width、heightscreenTopnumber窗口上边缘的y值

小程序提供了wx.getWindowInfo()和wx.getSystemInfo(Objectobject)接口可以获取系统信息。windowHeight属性可以获取可使用窗口高度，单位px。在本例中，使用windowHeight属性获取scroll-view可以滚动的窗口高度。商品分类区域 Page({

onLoad:function(options){

varthat=this

constwindowInfo=wx.getWindowInfo()

that.setData({

windowHeight:windowInfo.windowHeight

})

}

})

在本例中，使用windowHeight属性获取scroll-view可以滚动的窗口高度。商品分类展示区域<scroll-viewclass="right"bindscroll="rightScroll"scroll-with-animation="true"scroll-into-view="{{rightView}}"scroll-ystyle="height:{{windowHeight}}px;"><viewclass="content"wx:for="{{cateList}}"wx:key="id"id="{{item.id}}"><viewclass="content-image"><imagesrc="{{item.banner}}"></image></view><viewclass="cate-list"><viewclass="cate-title">{{item.catename}}</view><viewclass="goods-list"><viewclass="goods-list-item"wx:for="{{item.cate_list}}"wx:key="id"><imagesrc="{{item.item_img}}"></image><text>{{item.item_title}}</text></view></view></view></view></scroll-view>

打开pages/goodsCate/goodsCate.wxml文件，编辑右边商品区域。商品分类列表滚动constquery=wx.createSelectorQuery()query.select('#the-id').boundingClientRect()query.selectViewport().scrollOffset()query.exec(function(res){res[0].top//#the-id节点的上边界坐标res[1].scrollTop//显示区域的竖直滚动位置})

在右侧商品区域，当滚动条滚动到其它分类的商品时