小程序之多选择框(并且A页面跳B页面,B选中数据后带回A页面显示)

亲测挺好用的:

  借鉴博客:https://blog.csdn.net/qq_35713752/article/details/79093598

1、b.wxml页面:

 <checkbox-group bindchange="checkboxChange">
        <checkbox value='{{item.staff_name}},{{item.staff_id}}' >{{item.staff_name}}</checkbox>
                    
 </checkbox-group>

  b.js代码,多选获取选中值方法:

// 获取多选框list中选中的值和对应的id
  checkboxChange: function (e) {
    var text=[];
    var id = [];
    for (var i = 0; i < e.detail.value.length;i++){
      var aaa = e.detail.value[i].split(',');
      text = text.concat(aaa[0])
      id = id.concat(aaa[1])
    }
    console.log(text + "========" + id);
  },

==============跳转页面并带回数据====================

 A页面设置两个初始变量:

 /**
   * 页面的初始数据
   */
  data: {
    staff_dis:"",//人员选择员工ids
    staff_names:"",//人员选择员工names
  },

B页面点击返回按钮,触发函数:

saveSelectReturn:function(){//保存并返回按钮
  var that = this;

  var pages = getCurrentPages();
  var currPage = pages[pages.length - 1];   //当前页面
  var prevPage = pages[pages.length - 2];  //上一个页面
 
  // console.log("人员ids:"+ that.data.checkbox_select_ids);
  // console.log("人员names:"+ that.data.checkbox_select_names);
  //直接调用上一个页面的setData()方法,把数据存到上一个页面中去
  prevPage.setData({
    // mydata: {id:1, text:2}
    staff_ids: that.data.checkbox_select_ids.join(","),  //这里表示上个页面的staff_ids变量赋值
    staff_names: that.data.checkbox_select_names.join(","),//上个页面的staff_names变量赋值
}); 
wx.navigateBack();
//返回上一页
},

步骤效果图:

  1、B页面选中人员后,点击保存并返回,如下:

  2、A页面效果图展示:

。。。

原文地址:https://www.cnblogs.com/spll/p/13879661.html