Comment utiliser le sélecteur de liaison à trois niveaux de l'applet WeChat

Cet article présente principalement en détail comment utiliser le sélecteur de liaison à trois niveaux de l'applet WeChat. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Les exemples de cet article sont partagés avec vous. . Le code spécifique du sélecteur de liaison à trois niveaux de l'applet WeChat est pour votre référence. Le contenu spécifique est le suivant

Rendu

Principe d'implémentation

Utilisez le composant sélecteur de l'applet WeChat, parmi lesquels :

1, sélecteur ordinaire : mode = sélecteur pour implémenter une instance de sélection de premier niveau ;
2, sélecteur de province et de ville : mode = région réalise la liaison de troisième niveau des provinces et des municipalités
3. Sélecteur multi-colonnes : mode = multiSelector réalise la multiplication des nombres entre 10 dans le deuxième et le troisième ; liaison au niveau.

WXML

<view class="tui-picker-content">
 <view class="tui-picker-name">一级选择实例</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">省市区三级联动选择</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">自定义二级联动选择</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">自定义三级联动选择</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: {
 // 普通选择器列表设置,及初始化
 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 })
 }
})

Résumé

1 Puisque le composant sélecteur de l'applet WeChat est uniquement. disponibles séparément Sélecteur d'heure et sélecteur de date. Dans le développement réel, nous devrons peut-être sélectionner la date et l'heure en même temps. Les composants ne sont pas assez complets, donc lors de la création d'un sélecteur de date, vous devez faire attention

2. Résoudre le problème de la combinaison du sélecteur de date et d'heure La méthode est implémentée à l'aide d'un sélecteur multi-colonnes
3 Étant donné que les données du sélecteur multi-colonnes utilisent un tableau bidimensionnel, l'effet de liaison ne peut pas être directement obtenu et le les données doivent être jugées et traitées.

Utilisez raisonnablement les sélecteurs multi-colonnes, et les quatre autres sélecteurs fournis par le composant sélecteur peuvent être implémentés !

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

L'applet WeChat utilise la radio pour afficher la fonction d'option unique [code source joint]

L'applet WeChat revient Méthode de mise en œuvre d'une page à plusieurs niveaux

Code pour la demande de billet de train de l'applet WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!