How to use the three-level linkage selector of WeChat applet

This article mainly introduces in detail how to use the three-level linkage selector of the WeChat applet. It has a certain reference value. Interested friends can refer to it.

The examples in this article are shared with you. The specific code of the three-level linkage selector of the WeChat applet is for your reference. The specific content is as follows

Rendering

Implementation principle

Use the picker component of the WeChat applet, among which:
1, ordinary selector: mode = selector to implement a first-level selection instance;
2, province and city selector ：mode = region realizes the third-level linkage of provinces and municipalities;
3, multi-column selector: mode = multiSelector realizes the multiplication of numbers within 10 for the second-level and third-level linkage.

WXML

 一级选择实例  {{countryList[countryIndex]}}    省市区三级联动选择  {{region[0]}} - {{region[1]}} - {{region[2]}}    自定义二级联动选择   {{multiArray[0][multiIndex[0]]}} * {{multiArray[1][multiIndex[1]]}} = {{multiArray[0][multiIndex[0]] * multiArray[1][multiIndex[1]]}}     自定义三级联动选择   {{multiArray3[0][multiIndex3[0]]}} * {{multiArray3[1][multiIndex3[1]]}} * {{multiArray3[2][multiIndex3[2]]}} = {{multiArray3[0][multiIndex3[0]] * multiArray3[1][multiIndex3[1]] * multiArray3[2][multiIndex3[2]]}}   

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: { // 普通选择器列表设置,及初始化 countryList: ['中国','美国','英国','日本','韩国','巴西','德国'], countryIndex: 6, // 省市区三级联动初始化 region: ["四川省", "广元市", "苍溪县"], // 多列选择器(二级联动)列表设置,及初始化 multiArray: [[1, 2, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 4, 5, 6, 7, 8, 9]], multiIndex: [3,5], // 多列选择器(三级联动)列表设置,及初始化 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] }, // 选择国家函数 changeCountry(e){ this.setData({ countryIndex: e.detail.value}); }, // 选择省市区函数 changeRegin(e){ this.setData({ region: e.detail.value }); }, // 选择二级联动 changeMultiPicker(e) { this.setData({multiIndex: e.detail.value}) }, // 选择三级联动 changeMultiPicker3(e) { this.setData({ multiIndex3: e.detail.value }) } })

Summary

1. Since the picker component of the WeChat applet only provides a separate time selector and date selection In actual development, we may need to select date and time at the same time. The component is not comprehensive enough, so when making a date selector, you need to pay attention;
2. Solve the method of combining date and time selectors and use multi-column selection Implementation of the selector;
3. Since the data of the multi-column selector uses a two-dimensional array, the linkage effect cannot be directly achieved and the data needs to be judged and processed.

Reasonable use of multi-column selectors can be achieved by the other four selectors provided by the picker component!

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

WeChat applet uses radio to display single option function [source code attached]

WeChat applet returns Implementation method of multi-level page

WeChat applet train ticket query code

The above is the detailed content of How to use the three-level linkage selector of WeChat applet. For more information, please follow other related articles on the PHP Chinese website!