14-微信小程序商城产品详情页布局（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）

产品详情页布局本节主要讲解产品页面详情页面的布局实现，效果如图13-20所示。1.布局分析根据上面的布局分析，我们会产生基础的框架，代码示例如下：<view><!—第1层-开始--><image></image><!—第2层-详情图片-->……<image></image><!—第2层-详情图片-->&

黄菊华老师

3172人浏览 · 2020-11-16 11:23:18

黄菊华老师 · 2020-11-16 11:23:18 发布

产品详情页布局

本节主要讲解产品页面详情页面的布局实现，效果如图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
        });
      }
    });  
}