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

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

左右布局框架

左右布局框架效果如图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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

根据效果图分析出框架的层级后，在每个层级的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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

.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%;
} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

.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/* 手机的高度*/
          });
      }
    });
}

})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158

小程序商城配备了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/