So verwenden Sie die dreistufige Verknüpfungsauswahl des WeChat-Applets

In diesem Artikel wird hauptsächlich die Verwendung des dreistufigen Verknüpfungsselektors des WeChat-Applets ausführlich beschrieben. Er hat einen gewissen Referenzwert.

Die Beispiele in diesem Artikel werden mit Ihnen geteilt . Der spezifische Code des dreistufigen Verknüpfungsselektors des WeChat-Applets dient als Referenz. Der spezifische Inhalt lautet wie folgt:

Implementierungsprinzip

Verwenden Sie die Auswahlkomponente des WeChat-Applets, darunter: 1, gewöhnlicher Selektor: Modus = Selektor, um eine Auswahlinstanz der ersten Ebene zu implementieren;

2, Provinz- und Stadtselektor: Modus = Region realisiert die Verknüpfung von Provinzen und Gemeinden auf der dritten Ebene.

3 Mehrspaltiger Selektor: Modus = MultiSelektor realisiert die Multiplikation von Zahlen innerhalb von 10 in der zweiten und dritten Ebene Verknüpfung auf -Ebene.


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 })
 }
})

Zusammenfassung

1. Da die Auswahlkomponente des WeChat-Applets nur eine separate Zeitauswahl und ein Datum bereitstellt Auswahl In der tatsächlichen Entwicklung müssen wir möglicherweise Datum und Uhrzeit gleichzeitig auswählen. Die Komponente ist nicht umfassend genug. Daher müssen Sie beim Erstellen einer Datumsauswahl auf achten. Lösen Sie die Methode zum Kombinieren von Datum und Uhrzeit Zeitselektoren mit mehrspaltiger Auswahl

3 Da die Daten des mehrspaltigen Selektors ein zweidimensionales Array verwenden, kann der Verknüpfungseffekt nicht direkt erreicht werden und die Daten müssen beurteilt und verarbeitet werden.

Verwenden Sie mehrspaltige Selektoren sinnvoll, und die anderen vier von der Auswahlkomponente bereitgestellten Selektoren können implementiert werden!

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

WeChat-Applet verwendet Radio, um Einzeloptionsfunktion anzuzeigen [Quellcode beigefügt]

WeChat-Applet kehrt zurück Implementierungsmethode einer mehrstufigen Seite

Code für Zugticketabfrage des WeChat-Applets

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die dreistufige Verknüpfungsauswahl des WeChat-Applets. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!