09-微信小程序商城分类和产品左右布局框架（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）

本章主要讲解产品分类功能和产品详细页面的实现。主要涉及：如何实现左右布局的框架，如何实现产品页面顶部菜单的切换，产品的详情页面、底部菜单、评论页面的实现等。左右布局框架左右布局框架效果如图13-1所示。布局分析每一个层级使用view或者循环/链接等元素来实现，结构布局分析示意如图13-2所示。根据上面的布局分析，我们会产生基础的框架，代码示例如下：<view class="container

黄菊华老师

3673人浏览 · 2020-11-16 11:03:35

黄菊华老师 · 2020-11-16 11:03:35 发布

本章主要讲解产品分类功能和产品详细页面的实现。主要涉及：如何实现左右布局的框架，如何实现产品页面顶部菜单的切换，产品的详情页面、底部菜单、评论页面的实现等。

左右布局框架

左右布局框架效果如图13-1所示。

在这里插入图片描述

布局分析

每一个层级使用view或者循环/链接等元素来实现，结构布局分析示意如图13-2所示。
在这里插入图片描述
根据上面的布局分析，我们会产生基础的框架，代码示例如下：

<view class="container">
<!-- 左侧分类 -->
	<view >
	<block wx:for="">
	<text >分类名称</text>
	</block>
</view>

<-- 右侧产品 -->
<view >  
    <view >
      <block wx:for="">
          <view >
            <navigator url=' >
              <image />
              <text>产品名称</text>
              <text>￥：价格</text>
            </navigator>
          </view> 
      </block>
    </view>
</view>

</view>

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

功能的实现

左侧分类说明：
 读取对象数组navList的值，循环显示。
 给定分类文本两个样式，普通样式type-nav和选中的样式selected；如果当前选中的分类变量curNav和分类本身的id一致，则表示当前分类选中。
 点击分类的时候触发事件bindtap，调用对应的自定义函数selectNav来处理：设定变量curNav（用于判断当前显示的分类，默认curNav=1显示第一个分类）和变量curIndex（传递给产品数组，用于定义选择了哪个分类；这里是数组的序号，默认curIndex=0，数组是从0开始的）的值。
右侧产品说明：
 dishesList 这里是定义的一个多层嵌套的数组，
 dishesList[ [{对象},{对象},{对象}…] ,…. ]，数组里面嵌套数组，数组里再嵌套对象。
 循环显示数组的内容，我们这里取的是dishesList嵌套的这层数组，也就是dishesList[序号]的数据，我们定义了变量curIndex来表示序号（默认为0，数组下标从0开始，curIndex随着左侧菜单的点击值会变换），也就是我们使用dishesList[curIndex]来作为产品的数组，里面包含多个产品。
wxml文件代码示例如下：

<view class="container">
	<!-- 左侧分类 -->
	<view class="aside"  style="height:{{winHeight}}px">
	<block wx:for="{{navList}}">
	<text class="type-nav {{curNav == item.id ? 'selected' : ''}}" 
                   bindtap="selectNav"
                   data-index="{{index}}" 
                   data-id="{{item.id}}">
{{item.name}}
            </text>
	</block>
	</view>

	<!-- 右侧产品 -->
	<view class="content">  
       <view class="cps">
         <block wx:for="{{dishesList[curIndex]}}">
            <view class="cp-item" >
                <navigator url='/pages/fenlei/yemian/01-xiangxi'>
                    <image src='{{item.img}}' class="cp-image"/>
                    <text>{{item.name}}</text>
                    <text>￥：{{item.price}}</text>
                </navigator>
            </view> 
          </block>
        </view>
	</view>

</view>

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

/*整体框架样式：flex模式，左侧菜单，右侧产品*/
.container {
  height: 100%;
  box-sizing: border-box;
  background-color: #f4f4f4;
  display: flex;
  flex-direction: row;
}
/*左侧-分类*/
.aside{
width:4rem;
border-right: 1px solid #ddd;
	font-size: .85rem; height: 100%;
   display: flex;
   flex-direction: column; /*定义菜单显示方式，从上到下排列*/
}
.type-nav{ /*分类通用样式*/
	position: relative;
	padding:.7rem .3rem;
	text-align: center; /*居中*/
	border-bottom: 1px solid #ddd; /*每个分类下面的灰色横线*/
	z-index: 10;
}
.type-nav.selected{/*选中某个分类的样式*/
	margin-right: -1px;
	padding-left:-1px;
	color: #333;
	background-color: #fff; /*白色背景，选中时候突出显示*/
}

/*右侧-1行3列图片*/
.content{/*右侧框架总样式*/
	background-color: #fff;
  flex: 1; /*定义产品列表占满所有空间，这里背景都是白色*/
}
.cps {/*右侧产品的总样式*/
  display: flex; 
  flex-wrap:  wrap; /*自动换行*/
}
.cp-item {
  width: 30%;/*考虑右侧留点空白，按1行排列3个产品的比例来设计*/
  display: flex;
  padding: 2px;
}
.cp-item navigator
{
  display: flex;
  flex-direction: column; /*定义产品图片、名称、价格从上到下按行排列*/
}
.cp-image {
  width: 180rpx;height: 180rpx;  
margin: 1px;  padding: 1px;
}
.cp-item text {
  padding-top: 10rpx;
  font-size: 25rpx; 
  text-align:  center; /*文字居中显示，默认靠左*/
  width: 100%;
}

.js文件代码示例如下：

const app = getApp();
Page({
  /* 页面的初始数据 */
  data: {
    winWidth: 0,  /* 手机的宽度，初始化设定为0 */
    winHeight: 0, /* 手机的高度，初始化设定为0 */
    hidden: false,
    curNav: 1,
curIndex: 0,
/* 定义分类的数组信息navList */

    navList: [
      {
        id: 1,
        name: '分类1'
      },
      {
        id: 2,
        name: '分类2'
      },
      {
        id: 3,
        name: '分类3'
      }                
],
/* 定义产品信息dishesList，多层嵌套数组 */
    dishesList: [
      [
        {
          name: "分类1的产品01",
          price: 38,
          num: 1,
          id: 1,
          img:"/img/cp01.jpg"
        },
        {
          name: "分类1的产品02",
          price: 58,
          num: 1,
          id: 2,
          img: "/img/cp02.jpg"
        },
        {
          name: "分类1的产品03",
          price: 88,
          num: 1,
          id: 3,
          img: "/img/cp03.jpg"
        },
        {
          name: "分类1的产品04",
          price: 58,
          num: 1,
          id: 4,
          img: "/img/cp04.jpg"
        },
        {
          name: "分类1的产品05",
          price: 88,
          num: 1,
          id: 5,
          img: "/img/cp05.jpg"
        },
        {
          name: "分类1的产品06",
          price: 88,
          num: 1,
          id: 6,
          img: "/img/cp06.jpg"
        },
        {
          name: "分类1的产品07",
          price: 58,
          num: 1,
          id: 7,
          img: "/img/cp07.jpg"
        },
        {
          name: "分类1的产品08",
          price: 88,
          num: 1,
          id: 8,
          img: "/img/cp05.jpg"
        }
      ],
      [
        {
          name: "分类2的产品01",
          price: 18,
          num: 1,
          id: 3,
          img: "/img/cp06.jpg"
        },
        {
          name: "分类2的产品02",
          price: 58,
          num: 1,
          id: 4,
          img: "/img/cp07.jpg"
        },
        {
          name: "分类2的产品03",
          price: 58,
          num: 1,
          id: 4,
          img: "/img/cp08.jpg"
        },
        {
          name: "分类2的产品04",
          price: 58,
          num: 1,
          id: 4,
          img: "/img/cp09.jpg"
        }
      ],
      [
        {
          name: "分类3的产品01",
          price: 18,
          num: 1,
          id: 5,
          img: "/img/cp08.jpg"
        },
        {
          name: "分类3的产品02",
          price: 8,
          num: 1,
          id: 6,
          img: "/img/cp09.jpg"
        }
      ],
      []
    ],
dishes: []  
},
/* 点击左侧菜单，自定义处理函数 */
selectNav(event) {
    let id = event.target.dataset.id,
    index = parseInt(event.target.dataset.index);
    this.setData({
      curNav: id, /* 当前选中的分类变量curNav和分类本身的id一致，则表示当前分类选中 */
      curIndex: index /* 传递给右侧产品列表的数组下标 */
    })
},
onLoad() {
    var that = this;
    /* 获取系统信息 */
    wx.getSystemInfo({
      success: function (res) {
          that.setData({
            winWidth: res.windowWidth, /* 手机的宽度*/
            winHeight: res.windowHeight/* 手机的高度*/
          });
      }
    });
}

})