效果演示：
**示例
}
}
選好了
commodity_attr_list：迴圈獲取商品的屬性名和相對應的屬性值，並布局頁面。
weui-btn-area：提交校驗並獲取選中商品屬性結果。
//資料結構：以一組一組的資料來進行設定
commodityattr: [,,
,]},,
,,]},
,,,]
},,,,
]},,,
,]}],
attrvaluelist:
}
onshow: function () );
this.distachattrvalue(this.data.commodityattr);
// 只有乙個屬性組合的時候預設選中
// console.log(this.data.attrvaluelist);
if (this.data.commodityattr.length == 1)
this.setdata();}},
/* 獲取資料 */
distachattrvalue: function (commodityattr)
*/// 把資料物件的資料（檢視使用），寫到區域性內
var attrvaluelist = this.data.attrvaluelist;
// 遍歷獲取的資料
for (var i = 0; i < commodityattr.length; i++)
} else );}}
}// console.log('result', attrvaluelist)
for (var i = 0; i < attrvaluelist.length; i++) else }}
this.setdata();
},getattrindex: function (attrname, attrvaluelist)
}return i < attrvaluelist.length ? i : -1;
},isvalueexist: function (value, valuearr)
}return i < valuearr.length;
},/* 選擇屬性值事件 */
selectattrvalue: function (e)
console.log(e.currenttarget.dataset);
*/var attrvaluelist = this.data.attrvaluelist;
var index = e.currenttarget.dataset.index;//屬性索引
var key = e.currenttarget.dataset.key;
var value = e.currenttarget.dataset.value;
if (e.currenttarget.dataset.status || index == this.data.firstindex) else }},
/* 選中 */
selectvalue: function (attrvaluelist, index, key, value, unselectstatus)
}} else
// console.log('選中', commodityattr, index, key, value);
for (var i = 0; i < commodityattr.length; i++) }}
attrvaluelist[index].selectedvalue = value;
// 判斷屬性是否可選
for (var i = 0; i < attrvaluelist.length; i++)
}for (var k = 0; k < attrvaluelist.length; k++) }}
}}}// console.log('結果', attrvaluelist);
this.setdata();
var count = 0;
for (var i = 0; i < attrvaluelist.length; i++) }}
if (count < 2) );
} else );}},
/* 取消選中 */
disselectvalue: function (attrvaluelist, index, key, value)
}this.setdata();
for (var i = 0; i < attrvaluelist.length; i++) }}
submit: function ()
value.push(this.data.attrvaluelist[i].selectedvalue);
}if (i < this.data.attrvaluelist.length) )
} else
wx.showmodal( else if (res.cancel)
}})
console.log(valuestr);}}
.title
/*全部屬性的主盒子*/
.commodity_attr_list
/*每組屬性的主盒子*/
.attr_box
/*屬性名*/
.attr_name
/*屬性值*/
.attr_value_box
/*每個屬性值*/
.attr_value
/*每個屬性選中的當前樣式*/
.attr_value_active
/*禁用屬性*/
.attr_value_disabled
/*button*/
.weui-btn-area
.weui-btn
微信小程式實現左右聯動的實戰記錄
前言 最近在學習小程式，實現了左右聯動的功能，記錄一下思緒，方便以後參考。最終的介面如下,點選左邊任意乙個專案，右邊會跳程式設計客棧到相應專案的起始位置，右邊滑動，左則會跳到相應的位置。實現思路 在這裡，右則每一項的高度都是固定的，方便定位當前滑動距離在哪乙個大項 左則 裡。右則的 scroll v...
微信小程式電商實戰 商品列表流式布局
it實戰聯盟部落格 流式布局也叫百分比布局 把元素的寬,高,margin,padding不再用固定數值,改用百分比,這樣元素的寬,高,margin,padding會根據頁面的尺寸隨時 調整已達到適應當前頁面的目的.先看效果 如上圖所示，為了能夠看的更直觀一點我給布局設定了紅色虛線邊框，整體頁面根據元...
微信小程式實戰入門
一 簡介 參考 二 工程 參考 quickstart basic file.html 工具設計介面可調整機型 顯示百分比 資料連線方式。三 發布 個人上線了乙個木材材積計算器 兩天做的，有web前後端經驗很容易入手，有增加 共計 記錄功能 審核很快，一天審核結束 後來發現已經之前有公司做了，尷尬，而...