微信小程式實戰篇 商品屬性聯動選擇(案例)

2021-08-29 16:00:23 字數 3246 閱讀 4426

效果演示:

**示例

}

}

選好了

上述**把頁面盒子分為兩部分commodity_attr_list和weui-btn-area。 

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前後端經驗很容易入手,有增加 共計 記錄功能 審核很快,一天審核結束 後來發現已經之前有公司做了,尷尬,而...