How to use the three-level linkage selector of WeChat applets,

How to use the three-level linkage selector of the Applet,

The examples in this article share the code of the three-level linkage selector of small programs for your reference. The details are as follows:

Implementation Principle

Use the picker component of the applet, where:
1. Common selector: mode = selector implements the first-level instance selection;
2. Provincial/Municipal selector: mode = region achieves three levels of association between provinces, municipalities, and cities;
3. Multi-column selector: mode = multiSelector achieves multiplication of numbers less than 10 in the association between level 2 and level 3.

WXML

<View class = "tui-picker-content"> <view class = "tui-picker-name"> select an instance at the first level </view> <picker bindchange = "changeCountry" value = "{countryIndex}" range = "{countryList}"> <view class = "tui-picker-detail" >{{ countryList [countryIndex] }</view> </picker> </view> <view class = "tui-picker-content"> <view class = "tui-picker-name"> three levels of provincial/municipal linkage selection </view> <picker bindchange = "changeRegin" mode = "region" value = "{region}"> <view class = "tui-picker-detail" >{{ region [0] }}- {region [1] }}- {region [2] }}</view> </picker> </view> <view class = "tui- picker-content "> <view class =" tui-picker-name "> Custom Secondary association selection </view> <picker bindchange =" changeMultiPicker "mode =" multiSelector "value = "{multiIndex }}" range =" {multiArray} "> <view class =" tui-picker-detail ">{{ multiArray [0] [multiIndex [0]] }}* {multiArray [1] [multiIndex [1] }={ {multiArray [0] [multiIndex [0] * multiArray [1] [multiIndex [1] }}</view> </picker> </view> <view class = "tui-picker-content"> <view class = "tui-picker-name"> custom three-level linkage selection </view> <picker bindchange = "changeMultiPicker3" mode = "multiSelector" value = "{multiIndex3 }}" range =" {multiArray3} "> <view class = "tui-picker-detail"> {multiArray3 [0] [multiIndex3 [0]} * {multiArray3 [1] [multiIndex3 [1]}} * {multiArray3 [2] [multiIndex3 [2] }={ {multiArray3 [0] [multiIndex3 [0] * multiArray3 [1] [multiIndex3 [1] * multiArray3 [2] [multiIndex3 [2] }}</view> </picker> </view>

WXSS

page{background-color: #efeff4;}.tui-picker-content{ padding: 30rpx; text-align: center;}.tui-picker-name{ height: 80rpx; line-height: 80rpx;}.tui-picker-detail{ height: 80rpx; line-height: 80rpx; background-color: #fff; font-size: 35rpx; padding: 0 10px; overflow: hidden;}

JS

Page ({data: {// set the normal selector list, and initialize countryList: ['China', 'America ', 'uk', 'Japan ', 'korea ', 'brazilian ', 'German'], countryIndex: 6, // initialize region: ["Sichuan Province", "Guangyuan City", "cangxi county"], // set the list of Multi-column selector (Secondary association) and initialize multiArray: [[1, 2, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 4, 5, 6, 7, 8, 9], multiIndex: [3, 5], // set the list of Multi-column selector (three-level linkage), and initialize multiArray3: [[1, 2, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 4, 5, 6, 7, 8, 9], multiIndex3: [3, 5, 4]}, // select the country function changeCountry (e) {this. setData ({countryIndex: e. detail. value}) ;}, // select the provincial/municipal function changeRegin (e) {this. setData ({region: e. detail. value}) ;}, // select Level 2 linkage changeMultiPicker (e) {this. setData ({multiIndex: e. detail. value})}, // select Level 3 linkage changeMultiPicker3 (e) {this. setData ({multiIndex3: e. detail. value })}})

Summary

1. Because the picker component of the applet only provides a separate time selector and a date selector, in actual development, we may need to select both the date and time. The component is not comprehensive enough, therefore, pay attention to the date selector;
2. Solve the Problem of combining the date and time selector by using the multi-column selector;
3. Because the data of the Multi-column selector uses a two-dimensional array, the association effect cannot be achieved directly, and the data must be judged and processed.

The picker component can implement the other four selectors by using the multi-column selector reasonably!

Download DEMO

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.