4.2制作“菜单”页面主讲人：谭丽君微信小程序开发

4.2.1“菜单”页面wxml文件

“菜单”页面包括轮播图、商品信息列表

4.2.1“菜单”页面wxml文件

轮播图对应的wxml代码如下序号名称使用组件数据绑定说明①轮播列表swiper-itemwx:for={{movies}}列表渲染，movies为数组名。②图片imagesrc={{item.url}}src属性值绑定了movies数组中当前元素的url值轮播图中数据绑定

4.2.1“菜单”页面wxml文件

每个商品信息对应的wxml代码每个商品信息中数据绑定序号名称使用组件组件部分属性、内容说明①商品列表viewwx:for={{goods}}列表渲染，goods为数组名②商品图片imagesrc={{item.cover}}src属性值绑定了goods数组中当前元素的cover值③商品名称viewviewclass=list-title{{item.title}}/viewview内容绑定了goods数组中当前元素的title值。④商品价格texttextclass=list-price￥{{item.price}}/texttext内容绑定了goods数组中当前元素的price值。⑤加入购物车textbindtap=addCartdata-id={{item.id}}绑定了事件函数addCart自定义了一个属性data-id，其值为goods数组中当前元素的id值。

4.2.2“菜单”页面wxss文件

轮播图效果和框架序号选择器样式内容①.head宽度、高度、顶上内边距、背景图片（创建一个线性渐变的图像(从上到下)）②.swiper宽度、高度、水平位置居中、顶上外边距③.swiperimage宽度、高度、设置圆角边框轮播图样式代码轮播图样式设置

4.2.2“菜单”页面wxss文件

每个商品信息效果和框架结构1.一行宽度100%，一行要放2个商品，每个商品各占父亲的一半50%，但每个商品外面有外边距，因此每个商品宽度设置45%,高度为460rpx..shop-list{width:45%;height:460rpx;}2.图片宽度超出手机屏幕的45%，所以要设置图片宽度(和父亲shop-list一样宽)100%,图片高度460-2行文字的高度-行间距=300rpximage{width:100%;height:300rpx;}在index.wxml文件中，再复制一个商品信息

4.2.2“菜单”页面wxss文件

2.每个商品信息效果和框架结构3.设置一行放2个商品.shop-list{float:left;}4.设置每个商品的外边距,(100%-45%*2)/4=2.5%,因为还有边框线的位置，所以外边距为2%.shop-list{margin:2%}

4.2.2“菜单”页面wxss文件

每个商品信息效果和框架结构5.需要给每个商品信息加外边框和圆角.shop-list{border:2rpxsolid#eee;border-radius:16rpx;}在index.wxml文件中，再复制一个商品信息6.图片离2行文字太近，需要设置图片下外边距.list-img{margin-bottom:30rpx}

4.2.2“菜单”页面wxss文件

每个商品信息效果和框架结构在index.wxml文件中，再复制一个商品信息7.分别设置标题文字和第2行文字大小和行高.list-title{?font-size:?30rpx;??line-height:?40rpx;}.list-text{?font-size:?26rpx;?line-height:?40rpx;}8..list-text设置弹性布局，“价格”和“加入购物车”两端对齐.list-text{display:flex;justify-content:?space-between;}

4.2.3“菜单”页面js文件

util.js文件1.封装网络请求wx.request，创建下面2个函数_get（url,data,success,error）_post(url,data,success,error)2.小程序页面调用这2个函数的方法在需要调用_get和_post的文件中，引入util.js文件。constutils=require(../../utils/util.js);

4.2.3“菜单”页面js文件

（1）单击“编译”时，会运行index.js文件中onLoad函数，并发送网络请求给后台goodsList接口，前后端数据交互如下图。

4.2.3“菜单”页面j