教你如何在小程序下處理分類(lèi)多選的問(wèn)題

之前給大家介紹過(guò)如何在thinkphp下解決多個(gè)類(lèi)別多選的方法，因?yàn)槭鞘褂胮hp程序方法來(lái)處理，所以功能實(shí)現(xiàn)相對(duì)比較簡(jiǎn)單，下面介紹一下如何在小程序下處理分類(lèi)多選的問(wèn)題，實(shí)現(xiàn)的過(guò)程相對(duì)復(fù)雜些，下面以品牌分類(lèi)多選來(lái)舉例說(shuō)明，希望對(duì)有需要的程序猿有所幫助：

先來(lái)看index.wxml文件,如下圖：
圖片說(shuō)明：{{item[‘brand_id’]==select_brand[i]?’active’:’’}}:指的是如果點(diǎn)擊選中，則添加一個(gè)“active”的類(lèi)名，則當(dāng)前選中的效果

預(yù)覽的效果是這樣的：
下面著重講下index.js文件的代碼，因?yàn)橹攸c(diǎn)的功能基本都是在這里實(shí)現(xiàn)。
先初始化品牌的參數(shù)：
Page({
data: {
brand_id:0,//品牌的id
brand_list:[],//品牌列表
select_brand: [],//選中的品牌id
},
再來(lái)看bindtap=”select_brand”函數(shù)：
select_brand: function (e) {
var that = this;
var brand_list = that.data.brand_list;//獲取品牌二維數(shù)組
var select_brand = that.data.select_brand;//獲取所選的品牌數(shù)組
var key = parseInt(e.currentTarget.dataset.key)
for (var index = 0; index < brand_list.length; index++) {
if (key == index) {
console.log('brand_id:' + brand_list[key]['brand_id'])
if (util.inArray(select_brand,brand_list[key]['brand_id'])) {
//如果已經(jīng)選中過(guò)了，那么再點(diǎn)擊就要反選，即不選中
delete select_brand[key]; //刪除已選中的元素
} else {
select_brand[key] = brand_list[index]['brand_id'];//如果之前未選中，則添加這個(gè)元素,即當(dāng)前品牌名稱(chēng)會(huì)出現(xiàn)選中狀態(tài)。
}
}
this.setData({
select_brand: select_brand;//這里需要重新賦值
})
}

函數(shù)說(shuō)明，其中inArray函數(shù)如下圖所示：
點(diǎn)擊“提交搜索”的函數(shù)：
search_submit: function(e) {//搜索按鈕
var that = this
var select_brand = that.data.select_brand;
util.emptyArray(select_brand);//刪除元素為空的元素
var brand_id = select_brand.join();//將數(shù)組用短號(hào)分割轉(zhuǎn)化字符串
wx.navigateTo({ url: 'index?bid=' + brand_id })
},

emptyArray函數(shù)如下圖所示：
然后再來(lái)看小程序中的Onload:
onLoad: function (options) {
var that = this
var brand_id = that.data.brand_id;//獲取改變后的值
var select_brand = that.data.select_brand;
if (options.bid != undefined) {
brand_id = options.bid
//將所選的品id字符串轉(zhuǎn)為數(shù)組
var select_brand = brand_id.split(",");//將字符串用短號(hào)分割成數(shù)組;
that.setData({
select_brand:select_brand; //重新賦值
})
},
that.setData({
brand_id: brand_id
})
that.getprolist('正在加載數(shù)據(jù)...') //調(diào)用加載商品列表的函數(shù)
},
getprolist: function (message) {
var that = this
var brand_id = that.data.brand_id;//獲取改變后的值
/**參數(shù)獲取結(jié)束 */
var parm = '&bid=' + brand_id;
var request_newpro_url = util.getApiUrl(app, "/GList/goods_list", parm)
util._get(request_newpro_url,
function (res) {
var brand_list = res.data.brand_list;
var select_brand = that.data.select_brand;
var length1 = select_brand.length;
var select_brand2=[]
//這里需要重新設(shè)置一下所選品牌的key，這個(gè)非常重要，不然會(huì)出現(xiàn)匹配錯(cuò)亂的問(wèn)題
for (var index = 0; index < brand_list.length; index++) {
for (var index2 = 0; index2 < length1;index2++){
if(brand_list[index]['brand_id']==select_brand[index2]){
select_brand2[index] = brand_list[index]['brand_id']
}
}
}
select_brand = select_brand2;
that.setData({
brand_list: res.data.brand_list,//品牌列表
select_brand: select_brand, //已選品牌的數(shù)組
})
}
)
},
就這樣，功能就講完了，這里只是提供一種思路，或許大家會(huì)有更便捷的方法來(lái)實(shí)現(xiàn)這個(gè)功能。
小程序開(kāi)發(fā)中會(huì)遇到各種各樣的問(wèn)題，有些是官方教材可以找到的，有些是需要自己轉(zhuǎn)變思考的，但無(wú)論如何，只要你多想想，總有辦法解決。