So verwenden Sie die dreistufige Verknüpfungsauswahl im WeChat-Miniprogramm

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 ist wie folgt:

Rendering

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. Aufgrund des WeChat-Applets Die Auswahlkomponente bietet nur eine separate Zeitauswahl und eine Datumsauswahl. In der tatsächlichen Entwicklung müssen wir möglicherweise gleichzeitig Datum und Uhrzeit auswählen. Die Komponente ist nicht umfassend genug, daher müssen Sie bei der Erstellung einer Datumsauswahl darauf achten.
2. Lösen Sie das Datums- und Uhrzeitproblem. Die Methode zum Kombinieren von Zeitselektoren wird mithilfe von Mehrspaltenselektoren implementiert.
3. Da die Daten des Mehrspaltenselektors ein zweidimensionales Array verwenden, kommt es zu einem Verknüpfungseffekt kann 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!

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

PHP-Verschlüsse und anonyme Funktionen (ausführliches Tutorial)

Über benutzerdefinierte Ereignisse in Vue-Komponenten (ausführliches Tutorial)

Wie man mit JS implementiert, dass der Ball der Bewegung der Maus folgt

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