国产精品一区二区三区……-大杳蕉伊人欧美一本遒在饯-日本不卡一区免费在线观看-国产亚洲欧美中文字幕

400-800-9385
網(wǎng)站建設(shè)資訊詳細(xì)

教你如何在小程序下處理分類多選的問題

發(fā)表日期:2018-10-13 16:42:10   作者來源:方維網(wǎng)絡(luò)   瀏覽:5848   標(biāo)簽:小程序開發(fā)    
之前給大家介紹過如何在thinkphp下解決多個類別多選的方法,因為是使用php程序方法來處理,所以功能實(shí)現(xiàn)相對比較簡單,下面介紹一下如何在小程序下處理分類多選的問題,實(shí)現(xiàn)的過程相對復(fù)雜些,下面以品牌分類多選來舉例說明,希望對有需要的程序猿有所幫助:
先來看index.wxml文件,如下圖:

代碼

圖片說明:{{item[‘brand_id’]==select_brand[i]?’active’:’’}}:指的是如果點(diǎn)擊選中,則添加一個“active”的類名,則當(dāng)前選中的效果
預(yù)覽的效果是這樣的:

品牌列表
下面著重講下index.js文件的代碼,因為重點(diǎn)的功能基本都是在這里實(shí)現(xiàn)。
先初始化品牌的參數(shù):
Page({
  data: {  
brand_id:0,//品牌的id
    brand_list:[],//品牌列表
    select_brand: [],//選中的品牌id
  },
再來看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)選中過了,那么再點(diǎn)擊就要反選,即不選中
          delete select_brand[key]; //刪除已選中的元素
        } else {
          select_brand[key] = brand_list[index]['brand_id'];//如果之前未選中,則添加這個元素,即當(dāng)前品牌名稱會出現(xiàn)選中狀態(tài)。
        }
      }
this.setData({
select_brand: select_brand;//這里需要重新賦值
    })
     }
函數(shù)說明,其中inArray函數(shù)如下圖所示:

JS代碼

點(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ù)組用短號分割轉(zhuǎn)化字符串
    wx.navigateTo({ url: 'index?bid=' + brand_id })
},
emptyArray函數(shù)如下圖所示:

JS代碼2
然后再來看小程序中的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(",");//將字符串用短號分割成數(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,這個非常重要,不然會出現(xià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ù)組
        })
      }
    )
 
  },
 
就這樣,功能就講完了,這里只是提供一種思路,或許大家會有更便捷的方法來實(shí)現(xiàn)這個功能。

小程序開發(fā)中會遇到各種各樣的問題,有些是官方教材可以找到的,有些是需要自己轉(zhuǎn)變思考的,但無論如何,只要你多想想,總有辦法解決。

作者:陳應(yīng)信

如沒特殊注明,文章均為方維網(wǎng)絡(luò)原創(chuàng),轉(zhuǎn)載請注明來自http://pdcharm.com/news/4660.html
宣化县| 晋中市| 宜丰县| 馆陶县| 巧家县| 柏乡县| 嘉祥县| 大竹县| 无极县| 江城| 柳河县| 乌拉特前旗| 城固县| 威信县| 全州县| 嵊泗县| 陵川县| 小金县| 西林县| 湘阴县| 扶余县| 米林县| 甘孜县| 盱眙县| 阳朔县| 永仁县| 会昌县| 秀山| 巩义市| 宁夏| 博野县| 竹溪县| 德江县| 当雄县| 宜宾市| 白水县| 措勤县| 泸溪县| 梅州市| 阳信县| 宁安市|