微信小程序开发，实现商品分类（一）

微信小程序开发，实现商品分类商品列表（二）：https://blog.csdn.net/jky_yihuangxing/article/details/141716455

1. 官方文档指南

1. 数据绑定： https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html
2. 列表选渲染：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html

2. 数据绑定

WXML 中的动态数据均来自对应 Page 的 data。

语法：
数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：

内容：

<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello MINA!'
  }
})

组件属性(需要在双引号之内)

<view id="item-{{id}}"> </view>

Page({
  data: {
    id: 0
  }
})

控制属性(需要在双引号之内)

<view wx:if="{{condition}}"> </view>

Page({
  data: {
    condition: true
  }
})

关键字(需要在双引号之内)

true：boolean 类型的 true，代表真值。

false： boolean 类型的 false，代表假值。

<checkbox checked="{{false}}"> </checkbox>

特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。

3. 列表渲染

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

1. 语法：
   wx:for

2. 使用：

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      message: 'foo',
    }
    , {
      message: 'bar'
    }]
  }
})

1. 使用 wx:for-item 可以指定数组当前元素的变量名，
2. 使用 wx:for-index 可以指定数组当前下标的变量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

3. block wx:for
   类似 block wx:if，也可以将 wx:for 用在标签上，以渲染一个包含多节点的结构块。例如：

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>
wx:key

block 不会占据页面空间

4. wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

5.代码实现过程

1. cate.wxml布局页面

<view class="category-container">
	<!-- 左边的滚动视图区域 -->
	<scroll-view class="category-left-view" scroll-y type="list">
		<view class="left-view-item  {{activeIndex===index? 'active' : ''}}" active wx:for="{{categoryList}}"  wx:key="category_id" bind:tap="selectCategory" data-currentIndex="{{index}}">{{item.category_name}}</view>
	</scroll-view>


	<!-- 右边边的滚动视图区域 -->

	<scroll-view class="category-right-view" scroll-y type="list">
		<view class="right-view-item">{{categoryName}}</view>
	</scroll-view>

</view>

2. cate.wxcss样式文件

.category-container {
  display: flex;
}

.category-left-view {
  height: 100vh;
  width: 220rpx;
}

.left-view-item {
  height: 68rpx;
  color: #333333;
  line-height: 68rpx;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
  text-align: center;
  border-left: 6rpx solid #ffffff;
  font-size: 26rpx;
}
.active {
  border-left: 6rpx solid #f3514f;
  color: #f3514f;
}

.category-right-view {
  height: 100vh;
  width: 100%;
  background-color: #f5f5f5;
}

3. cate.js 文件

// pages/cate/cate.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

    categoryList: [
      { "category_id": 1001, "category_name": "爱礼精选" },
      { "category_id": 1002, "category_name": "鲜花玫瑰" },
      { "category_id": 1003, "category_name": "永生玫瑰" },
      { "category_id": 1004, "category_name": "玫瑰珠宝" },
      { "category_id": 1005, "category_name": "鲜花玫瑰" },
      { "category_id": 1006, "category_name": "永生玫瑰" },
      { "category_id": 1007, "category_name": "玫瑰珠宝" },
      { "category_id": 1008, "category_name": "鲜花玫瑰" },
      { "category_id": 1009, "category_name": "永生玫瑰" },
      { "category_id": 10010, "category_name": "玫瑰珠宝" },
    ],
    categoryName: "爱礼精选",
    activeIndex: 0,   //默认选中下标为0

  },

  /**点击左侧分类 */
  selectCategory(event) {
    const index = event.currentTarget.dataset.currentindex
     this.setData({
      activeIndex : index,
      categoryName: this.data.categoryList[index].category_name,
     
     })

  },



  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

6. 运行效果图