Frontend: "Optimización del componente de agrupación de selección múltiple de la ciudad del subprograma de WeChat

Others 2021-01-24 06:46:14 views: null

 

 

 

 El enlace original de este componente es: https://blog.csdn.net/NAMECZ/article/details/80254178#comments_12281606

Contenido de optimización:

1: los datos del componente se cargan en blanco

2 ： 组件 报错 ： Algunos selectores no están permitidos en el componente wxss, incluidos los selectores de nombre de etiqueta, los selectores de ID y los selectores de atributos.

3: ajuste de estilo de componente

4: Utilice this.setData ({"datos del componente": []}) para asignar un valor al componente en la página de llamada del componente, el valor del componente no se puede cambiar dinámicamente en consecuencia

5: Cuando hace clic en Atrás para abrir el componente nuevamente, los últimos datos verificados no se pueden restablecer

6: desmarque el cuadro de opciones relacionadas con el componente después de hacer clic en Atrás

El principal código de componente optimizado es el siguiente

  • js: agregar métodos clear (), loadAgin (), modificar el método back () 
    Component({
  properties: {
    list: {
      type: Array,
      value: [],
    },
    select:{
      type: Array,
      value: [],
    }
  },
  data: {
    childlist: [], 
    n: 0,
    checked: [],
    allNum: [],
  },
  ready(){
    var that=this;
    var list = that.data.list;//传递过来的数据
    var select = that.data.select;
    var checked = new Array;
    var allNum = []; 
      var aaa = [];
      // 检查默认选中状态
      for (let i = 0; i < list.length; i++) {
        for (let k = 0; k < list[i].childlist.length; k++) {
          for (let j = 0; j < select.length; j++) {
            if (list[i].childlist[k].value == select[j]) {
              aaa = [];
              // 若某条二级数组中存在多个选中的项要做判断筛选
              if (checked[i]) {
                // check中第i项如果存过值，那么将在此项中继续加入值
                checked[i].forEach(function (item) {
                  aaa.push(item);
                })
                aaa.push(list[i].childlist[k]);
                checked[i] = aaa;
              } else {
                // check中第i项没有存过值，那么将值存入第i项
                if (list[i].childlist[k].istitle == "全部") {
                  for (let s = 0; s < list[i].childlist.length; s++) {
                    list[i].childlist[s].checked = true
                    allNum[i] = list[i].childlist.length - 1;
                    checked[i] = [list[i]];
                  }
                } else {
                  checked[i] = [list[i].childlist[k]];
                }
 
              }
              list[i].childlist[k].checked = true;
            }
          }
        }
      }
    that.setData({
      'childlist[0]': list[0].childlist,
      list: list,
      checked: checked,
      allNum: allNum,
    })
  },
  methods: {
    ontap(e) {
      console.log(e)
      var that = this;
      var n = e.currentTarget.dataset.index;
      var childlist = "childlist[" + n + "]";
      that.setData({
        [childlist]: that.data.list[n].childlist,
        n: n
      })
    },
    // 清空已经选择的选项
    clear(){
      var afterClearList = this.data.list;
      for (var i = 0; i < afterClearList.length; i++) {
        var citylist=afterClearList[i].childlist;
        for(var j=0;j<citylist.length;j++){
          delete citylist[j].checked;
        }
      }
      this.setData({
        'childlist[0]':[],
        checked: [],
        allNum: [],
        list:afterClearList,
      })
    },
    // 在被调用的页面的select属性重新赋值后调用这个方法刷新所选项
    loadAgin(){
      var a={currentTarget:{dataset:{index:0}}};
      this.ontap(a);
      var that=this;
      var list = that.data.list;//传递过来的数据
      var select = that.data.select;
      var checked = new Array;
      var allNum = []; 
        var aaa = [];
        // 检查默认选中状态
        for (let i = 0; i < list.length; i++) {
          for (let k = 0; k < list[i].childlist.length; k++) {
            for (let j = 0; j < select.length; j++) {
              if (list[i].childlist[k].value == select[j]) {
                aaa = [];
                // 若某条二级数组中存在多个选中的项要做判断筛选
                if (checked[i]) {
                  // check中第i项如果存过值，那么将在此项中继续加入值
                  checked[i].forEach(function (item) {
                    aaa.push(item);
                  })
                  aaa.push(list[i].childlist[k]);
                  checked[i] = aaa;
                } else {
                  // check中第i项没有存过值，那么将值存入第i项
                  if (list[i].childlist[k].istitle == "全部") {
                    for (let s = 0; s < list[i].childlist.length; s++) {
                      list[i].childlist[s].checked = true
                      allNum[i] = list[i].childlist.length - 1;
                      checked[i] = [list[i]];
                    }
                  } else {
                    checked[i] = [list[i].childlist[k]];
                  }
                }
                list[i].childlist[k].checked = true;
              }
            }
          }
        }
      
      that.setData({
        'childlist[0]': list[0].childlist,
        list: list,
        checked: checked,
        allNum: allNum,
      })
    },
    all() {
      var that = this;
      var n = that.data.n;
      var childlist = "childlist[" + n + "]";
      var checked = "checked[" + n + "]";
      var allNum = "allNum[" + n + "]";
      var all = "";
      var checkArr = [];
      var checkboxItems = that.data.childlist[n];
      if (checkboxItems[0].checked) {
        checkboxItems[0].checked = true;
        checkArr = [];
      } else {
        checkboxItems[0].checked = false;
        // checkArr.push(checkboxItems[0])
        checkArr.push(that.data.list[n])
        all = checkboxItems.length - 1;
      }
      checkboxItems[0].checked = !checkboxItems[0].checked
      for (let k = 1; k < checkboxItems.length; k++) {
        checkboxItems[k].checked = checkboxItems[0].checked;
      }
 
      that.setData({
        [childlist]: checkboxItems,
        [checked]: checkArr,
        [allNum]: all ? all : 0,
      }, function () {
        console.log(that.data.checked);
      })
    },
    checkboxChange(e) {
      var that = this;
      var n = that.data.n;
      var checkboxItems = that.data.childlist[n];
      var values = e.detail.value;
      console.log("checkboxChange");
      console.log(values);
      var flag = "";
      var childlist = "childlist[" + n + "]";
      var checked = "checked[" + n + "]";
      var allNum = "allNum[" + n + "]";
      var checkedArr = [];
      var all = "";
 
      for (var i = 0, lenI = checkboxItems.length; i < lenI; ++i) {
        checkboxItems[i].checked = false;
        for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
          if (checkboxItems[i].value == values[j]) {
            checkboxItems[i].checked = true;
            checkedArr.push(checkboxItems[i]);
            break;
          }
        }
      }
      if (values.length == checkboxItems.length - 1) {
        checkboxItems[0].checked = true;
        // checkedArr = [checkboxItems[0]];
        checkedArr = [that.data.list[n]];
        all = checkboxItems.length - 1;
      }
      this.setData({
        [childlist]: checkboxItems,
        [checked]: checkedArr,
        [allNum]: all
      });
    },
    formSubmit: function (e) {
      var that = this;
      var values = that.data.checked;
      var arr = [];
      var arr1 = [];
      for (let i = 0; i < values.length; i++) {
        if (values[i] != undefined) {
          arr.push(values[i]);
        }
      }
 
      for (let i = 0; i < arr.length; i++) {
        for (let j = 0; j < arr[i].length; j++) {
          arr1.push(arr[i][j])
        }
      }
      var detail = arr1;//选中的值
      this.clear();
      this.triggerEvent("formSubmit", {citys:detail});
    },
    back() {
      this.clear();
      this.triggerEvent("back");
    }
  }
})

  • wxml:

    <cu-custom bgColor="bg-gradual-blue">
	<view slot="content">订单管理</view>
</cu-custom>

<form bindsubmit="formSubmit">
  <view class='content'>
  <!-- 一级菜单 -->
    <scroll-view class='scrollLeft' scroll-y>
      <block wx:for="{
     
     {list}}" wx:key="item">
        <view class="leftBox" catchtap='ontap' data-index='{
     
     {index}}' style='{
     
     {n==index?"border-left:8rpx solid #1aad16;color:#1aad16":""}}'>
          {
     
     {item.istitle}}
          <view class='num' hidden="{
     
     {checked[index].length>0?false:true}}">
            <text>{
     
     {allNum[index]?allNum[index]:(checked[index].length>0?checked[index].length:0)}}</text>
          </view>
        </view>
      </block>
    </scroll-view>
    <!-- 二级菜单 -->
    <scroll-view class='scrollRight' scroll-y>
      <view class="weui-cells weui-cells_after-title">
      <!-- 二级菜单中的全部选项 -->
        <label class="weui-cell weui-check__label" catchtap='all'>
          <checkbox class="weui-check" value="{
     
     {childlist[n][0].value}}" checked="{
     
     {childlist[n][0].checked}}" />
          <view class="weui-cell__hd weui-check__hd_in-checkbox">
            <icon class="weui-icon-checkbox_circle" type="circle" size="23" wx:if="{
     
     {!childlist[n][0].checked}}"></icon>
            <icon class="weui-icon-checkbox_success" type="success" size="23" wx:if="{
     
     {childlist[n][0].checked}}"></icon>
          </view>
          <view class="weui-cell__bd">{
     
     {childlist[n][0].istitle}}</view>
        </label>
        <checkbox-group bindchange="checkboxChange">
        <!-- 二级菜单中的剩余选项 -->
          <block wx:for="{
     
     {childlist[n]}}" wx:key="value">
            <label class="weui-cell weui-check__label" wx:if='{
     
     {item.istitle!="全部"}}'>
              <checkbox class="weui-check" value="{
     
     {item.value}}" checked="{
     
     {item.checked}}" />
 
              <view class="weui-cell__hd weui-check__hd_in-checkbox">
                <icon class="weui-icon-checkbox_circle" type="circle" size="23" wx:if="{
     
     {!item.checked}}"></icon>
                <icon class="weui-icon-checkbox_success" type="success" size="23" wx:if="{
     
     {item.checked}}"></icon>
              </view>
              <view class="weui-cell__bd">{
     
     {item.istitle}}</view>
            </label>
          </block>
        </checkbox-group>
      </view>
    </scroll-view>
  </view>
  <view class="btn-area">
    <button catchtap='back' class="back">返回</button>
    <button formType="submit" class="submit">确定</button>
  </view>
</form>

  •  

    wxss:

    /* page{
  background: #f8f8f8;
} */
.content{
  position: absolute;
  top:0;
  bottom:100rpx; 
  width: 100%;
}
.scrollLeft{
  box-sizing: border-box;
  float: left;
  width: 25%;
  height: 100%;
  border-right: 1rpx solid #ddd;
  font-size: 35rpx;
}
.scrollRight{
  float: left;
  width: 75%;
  height: 100%;
}
.leftBox{
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items:center;
  border-bottom: 1rpx solid #ddd;
}
.num{
  position: absolute;
  top:10rpx;
  right: 10rpx;
  width: 30rpx;
  height: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f10215;
  border-radius: 50%;
  color: white;
  font-size: 22rpx;
}
.rightBox{
  box-sizing: border-box;
  width: 100%;
}
.weui-cells {
  position: relative;
  margin-top: 1.17647059em;
  background-color: #FFFFFF;
  line-height: 1.41176471;
  font-size: 17px;
}
.weui-cells_after-title {
  margin-top: 0;
}
.weui-cell {
  padding: 10px 15px;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.weui-check__label:active {
  background-color: #ECECEC;
}
.weui-check {
  position: absolute;
  left: -9999px;
}
.weui-check__hd_in-checkbox {
  padding-right: 0.35em;
}
.weui-icon-checkbox_circle,
.weui-icon-checkbox_success {
  margin-left: 4.6px;
  margin-right: 4.6px;
}
.weui-cell__bd {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
}
.btn-area{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
}
.btn-area .back{
  width: 30%;
  height: 80%;
  color: white;
  background-color: orange;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn-area .submit{
  width: 50%;
  height: 80%;
  color: white;
  background-color: #1aad16;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10%;

}

    Lo anterior es la optimización del componente, la siguiente es la lógica de la llamada

  •  

    En el recién creado cityjson.js, recorre las ciudades de todo el país. Este js es demasiado grande, por lo que no es conveniente ponerlo en el texto. Puedes descargarlo en mi descarga. El enlace es el siguiente:

  • https://download.csdn.net/download/nienianzhi1744/12447981

    json, primero llame al componente de agrupación en el archivo .json de la página

    "usingComponents": {
    "check": "../components/checkGrop/checkGrop"
  }

  • js, luego llame a los datos de la ciudad en el archivo .js de la página y deletree el formato de datos json adecuado para el componente

    const cityJson = require('../../assets/json/city.js').cityjson;
Page({
  data: {
    StatusBar: app.globalData.StatusBar,
    CustomBar: app.globalData.CustomBar,
    gridCol: 3,
    skin: false,
    cityArray: [],
    allCitys: [],
    checkedCityName: [],
    cityListStr: null
  },

// 加载城市数据
  loadCityGroup: function () {
    var provinceList = [];
    var allCityList = [];
    for (var i = 0; i < cityJson.length; i++) {
      var province = cityJson[i];
      var citys = province.city;
      var cityList = [{ istitle: "全部", value: "全部" }];
      for (var j = 0; j < citys.length; j++) {
        var cityMap = {
          istitle: citys[j].city_name,
          value: citys[j].city_name
        }
        allCityList.push(citys[j].city_name);
        cityList.push(cityMap)
      };
      var firstMap = {
        id: i,
        istitle: province.province,
        childlist: cityList
      }
      provinceList.push(firstMap);
    }
    this.setData({
      cityArray: provinceList,
      allCitys: allCityList
    });
  },
})

     

  • llamada wxml: donde cityArray son todos los datos de la ciudad, checkCityName es la ciudad seleccionada que se muestra de forma predeterminada al cargar, id es un atributo esencial, submitCityConfigModal es el método al hacer clic en enviar, hideCityConfigModal es el método al regresar 
    <view class="padding-xl">
			<check list="{
     
     {cityArray}}" select="{
     
     {checkedCityName}}" id="cityCheck" 
          bind:formSubmit="submmitCityConfigModal" bindback="hideCityConfigModal"></check>
</view>

     

 Una vez completada la llamada anterior, inicie el método específico.

  1. Al abrir el componente: Si necesita mostrar el valor por defecto, debe asignar un valor a la matriz CheckCityName en los datos a través de this.setData. El formato de la matriz es ['Beijing', 'Shijiazhuang'].
  2. Una vez completada la asignación, debe escribir this.selectComponent ('# cityCheck'). LoadAgin () para cargar los datos predeterminados. cityCheck es la identificación definida por el componente en este momento
  3. Al enviar, puede obtener qué ciudades se han seleccionado esta vez a través de e.detail.citys
  4. Borre y restablezca los datos seleccionados pero no guardados al regresar. Esta operación se completó en el método clear () y back () del componente, y no es necesario llamarlo manualmente.

encima 

Supongo que te gusta

Origin blog.csdn.net/nienianzhi1744/article/details/106290367
Recomendado
Clasificación
Diario
Más
2024-05-11(31)
2024-05-10(32)
2024-05-09(31)
2024-05-08(18)
2024-05-07(35)
2024-05-06(4)
2024-05-05(0)
2024-05-04(17)
2024-05-03(8)
2024-05-02(0)

Code World

© 2018 codetd.com