产品详情页布局

本节主要讲解产品页面详情页面的布局实现，效果如图13-20所示。

1.布局分析

根据上面的布局分析，我们会产生基础的框架，代码示例如下：

<view>  <!—第1层-开始-->
	<image></image>  <!—第2层-详情图片-->
	……
<image></image>  <!—第2层-详情图片-->
</view>  <!—第1层-结束-->

根据效果图分析出框架的层级后，在每个层级的view加上样式，编码实现即可。

2.功能实现

效果如图13-20产品详情页。
.wxml文件代码示例如下：

<!-- 详情 -->
<scroll-view class='box2'  scroll-y='true'>
  <view  class='box2-item' style="height:{{winHeight - 31}}px">
      <image src="/cp/01.jpg" class='box2-item' mode="widthFix"></image>
      <image src="/cp/02.jpg" class='box2-item' mode="widthFix"></image>
      <image src="/cp/03.jpg" class='box2-item' mode="widthFix"></image>
      <image src="/cp/04.jpg" class='box2-item' mode="widthFix"></image>
      <image src="/cp/05.jpg" class='box2-item' mode="widthFix"></image>
  </view>
</scroll-view>

.wxss文件样式代码示例如下：

/*产品详情*/
.box2{ 
  width: 100vw; 
  box-sizing: border-box;
  white-space: nowrap; /*这个不能少*/
}
.box2-item{
   display: block;
   width: 100%; height: 100%; box-sizing:  border-box;
}

.js文件代码示例如下：

data: {
    /* 页面配置  */
    winWidth: 0,
winHeight: 0,
},
onLoad: function (options) {
    var that = this;
    /* 获取系统信息 */
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          winWidth: res.windowWidth,
          winHeight: res.windowHeight
        });
      }
    });  
}

小程序商城配备了javaweb、php、asp、net几个版本的后台、其他版本陆续制作中

【微信小程序参考资料】

（1）微信小程序学习路线 http://www.hzyaoyi.cn/

（2）Java微信小程序商城系统指导 https://ke.qq.com/course/3066521

（3）PHP微信小程序商城系统指导 https://ke.qq.com/course/3066518

（4）微信官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/