The original link of this component is: https://blog.csdn.net/NAMECZ/article/details/80254178#comments_12281606
Optimization content:
1: The component data is loaded blank
2：组件报错：Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors.
3: Component style adjustment
4: Use this.setData({"component data":[]}) to assign a value to the component on the calling page of the component, the value of the component cannot be dynamically changed accordingly
5: When you click Back to open the component again, the last checked data cannot be reset
6: Uncheck the component related option box after clicking Back
The main optimized component code is as follows
- js: add clear(), loadAgin() methods, modify back() method
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%; }The above is the optimization of the component, the following is the logic of the call
-
In the newly created cityjson.js, traverse cities across the country. This js is too large, so it is not convenient to put it in the text. You can download it in my download. The link is as follows:
-
https://download.csdn.net/download/nienianzhi1744/12447981
json call, first call the grouping component in the .json file of the page
"usingComponents": { "check": "../components/checkGrop/checkGrop" } -
js call, then call the city data in the .js file on the page and spell out the json data format suitable for the component
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 }); }, }) - wxml call: where cityArray is all city data, checkedCityName is the selected city that is brought out by default when loading, id is an essential attribute, submitCityConfigModal is the method when clicking submit, hideCityConfigModal is the method when returning
<view class="padding-xl"> <check list="{ {cityArray}}" select="{ {checkedCityName}}" id="cityCheck" bind:formSubmit="submmitCityConfigModal" bindback="hideCityConfigModal"></check> </view>
After the above call is completed, start the specific method.
- When opening the component: If you need to bring out the value by default, you need to assign a value to the checkedCityName array in the data through this.setData, the array format is ['Beijing','Shijiazhuang'].
- After the assignment is completed, you must write this.selectComponent('#cityCheck').loadAgin() to load the default data. cityCheck is the id defined by the component just now
- When submitting, you can use e.detail.citys to get the selected cities this time
- Clean up and reset the selected but unsaved data when returning. This operation has been completed in the clear() method and back() method of the component, and there is no need to manually call it.
over