このコンポーネントの元のリンクは次のとおりです：https：//blog.csdn.net/NAMECZ/article/details/80254178#comments_12281606
最適化の内容：
1：コンポーネントデータが空白でロードされます
2：組み合わせ件报错：タグ名セレクター、IDセレクター、属性セレクターなど、一部のセレクターはコンポーネントwxssで許可されていません。
3：コンポーネントスタイルの調整
4：this.setData（{"component data"：[]}）を使用して、コンポーネントの呼び出しページでコンポーネントに値を割り当てます。それに応じて、コンポーネントの値を動的に変更することはできません。
5：[戻る]をクリックしてコンポーネントを再度開くと、最後にチェックしたデータをリセットできません
6：[戻る]をクリックした後、コンポーネント関連のオプションボックスのチェックを外します
主な最適化されたコンポーネントコードは次のとおりです
- js：clear（）、loadAgin（）メソッドを追加し、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%; }上記はコンポーネントの最適化であり、以下は呼び出しのロジックです
-
新しく作成されたcityjson.jsで、全国の都市をトラバースします。このjsは大きすぎるため、テキストに入れるのは不便です。ダウンロードでダウンロードできます。リンクは次のとおりです。
-
https://download.csdn.net/download/nienianzhi1744/12447981
json呼び出し、最初にページの.jsonファイルのグループ化コンポーネントを呼び出します
"usingComponents": { "check": "../components/checkGrop/checkGrop" } -
js呼び出し、次にページの.jsファイル内の都市データを呼び出し、コンポーネントに適したjsonデータ形式を詳しく説明します
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呼び出し：ここで、cityArrayはすべての都市データ、checkedCityNameはロード時にデフォルトで表示される選択された都市、idは必須属性、submitCityConfigModalは送信をクリックしたときのメソッド、hideCityConfigModalは戻るときのメソッドです
<view class="padding-xl"> <check list="{ {cityArray}}" select="{ {checkedCityName}}" id="cityCheck" bind:formSubmit="submmitCityConfigModal" bindback="hideCityConfigModal"></check> </view>
上記の呼び出しが完了したら、特定のメソッドを開始します。
- コンポーネントを開くとき：デフォルトで値を引き出す必要がある場合は、this.setDataを介してデータ内のcheckedCityName配列に値を割り当てる必要があります。配列の形式は['Beijing'、 'Shijiazhuang']です。
- 割り当てが完了したら、this.selectComponent（ '＃cityCheck'）。loadAgin（）を記述して、デフォルトのデータをロードする必要があります。cityCheckは、コンポーネントによって定義されたIDです。
- 送信すると、e.detail.citysから今回選択された都市を取得できます。
- 選択したが保存されていないデータを返すときにクリアしてリセットします。この操作はコンポーネントのclear（）メソッドとback（）メソッドで完了しているため、手動で呼び出す必要はありません。
以上