微信小程序开发，实现商品分类商品列表（二）：https://blog.csdn.net/jky_yihuangxing/article/details/141716455
1. 官方文档指南
- 数据绑定： https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html
- 列表选渲染：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
-
语法：
wx:for -
使用：
<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>
- block wx:for
类似 block wx:if，也可以将 wx:for 用在标签上，以渲染一个包含多节点的结构块。例如：
<block wx:for="{
{[1, 2, 3]}}">
<view> {
{
index}}: </view>
<view> {
{
item}} </view>
</block>
wx:key
block 不会占据页面空间
- wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。
wx:key 的值以两种形式提供
字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。
5.代码实现过程
- 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>
- 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;
}
- 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. 运行效果图
