Beispiel für die gemeinsame Nutzung eines dreistufigen Linkage-Adressselektors im WeChat-Miniprogramm

In diesem Artikel wird der Beispielcode des dreistufigen Linkage-Adressselektors des WeChat-Applets vorgestellt und mit allen geteilt. Wenn Sie ihn benötigen, können Sie ihn gemeinsam kennenlernen

In einigen Fällen E-Commerce-Applet, die Adresse Die Auswahl dieser Funktion erfordert im Allgemeinen eine Steuerung, mit der Provinzen, Städte und Landkreise ausgewählt werden können. Natürlich gibt es einige Leute, die eine Eingabe für die Eingabe vornehmen müssen Selbstverständlich ist die Benutzererfahrung nicht so gut. Der heutige Artikel wird die Implementierung der WeChat-Applet-Adressauswahl vorstellen. Daten zu Provinzen, Städten und Landkreisen sowie Vorwahlen finden Sie beim National Bureau of Statistics. Sie können selbst nach Details suchen. Laden Sie wie üblich zuerst den Quellcode und die Renderings hoch

Quellcode-Portal

Picker und Picker-View-Komponenten

Bevor wir die Implementierung offiziell vorstellen, müssen wir diese beiden Komponenten zunächst kurz vorstellen. Es handelt sich um einen Scroll-Selektor, der von unten angezeigt werden kann Der Typ nach Wert zur Implementierung von Datumsauswahl, Zeitauswahl und gewöhnlichen Selektoren. Wenn wir den dreistufigen Verknüpfungs-Adressauswahleffekt in der obigen Abbildung erreichen möchten, ist die Implementierung sehr schwierig Dies kann erreicht werden, da der gewöhnliche Selektor des Pickers nur eine Spalte haben kann. Wenn Sie den Effekt von drei Spalten erzielen möchten, müssen Sie einen anderen Weg finden.

Da wir einen anderen Ansatz verfolgen, denken wir natürlich an Picker-View. Diese Komponente ist ein in die Seite eingebetteter Scroll-Selektor, und nur Picker-Spalte. view-column, andere Komponenten werden nicht angezeigt, jede picker-view-column ist eine Spalte.

picker-view hat mehrere wichtige Attribute. Der Wert im Array stellt die ausgewählten Elemente der picker-view-colume dar (der Index beginnt bei 0). Ist die Zahl größer als die Länge der Picker-View-Column-Optionen, wird das letzte Element ausgewählt. Indikatorstil und Indikatorklasse können den Stil des ausgewählten Felds in der Mitte des Selektors festlegen. Es verfügt über ein Ereignis bindchange Diese Funktion wird ausgelöst, wenn sich die ausgewählten Elementdaten ändern, wenn wir durch das Element scrollen event.detai.vaule (und das oben eingeführte vaule hat dieselbe Bedeutung), um das aktuell ausgewählte Element abzurufen (der Index beginnt bei 0). Für die Spalte „picker-view-column“ wird die Höhe automatisch so eingestellt, dass sie mit der Höhe des Kontrollkästchens „picker-view“ übereinstimmt.

Die Provinz-, Stadt- und Kreisdatendateien speichern die für die Adressauswahl erforderlichen Daten, hauptsächlich Ortsvorwahlen und Namen, und stellen die Daten dann über den folgenden Code zur Verwendung bereit

module.exports = {
 citys,
 provinces,
 areas
}

wxml-Dateiimplementierung

<view class="picker-view" animation="{{animationAddressMenu}}" style="visibility:{{addressMenuIsShow ? &#39;visible&#39;:&#39;hidden&#39;}}">
 <view style="height:10% ;width:95%;margin-top:10rpx">
  <text catchtap="cityCancel">取消</text>
  <text style="float: right" catchtap="citySure">确定</text>
 </view>
 <picker-view style="width: 100%; height: 300px;" bindchange="cityChange" value="{{value}}" wx:key="">
  <picker-view-column>
   <view wx:for="{{provinces}}" class="picker-item">
    {{item.name}}</view>
  </picker-view-column>
  <picker-view-column>
   <view wx:for="{{citys}}" class="picker-item" wx:key="">
    {{item.name}}</view>
  </picker-view-column>
  <picker-view-column>
   <view wx:for="{{areas}}" class="picker-item" wx:key="">
    {{item.name}}</view>
  </picker-view-column>
 </picker-view>
</view>

Die Hauptsache ist, dass der Benutzer auf „Abbrechen“ und „OK“ klicken kann, um die Auswahl zu bestätigen, und Die Picker-Ansicht enthält Die drei Picker-View-Spaltenkomponenten entsprechen der Anzeige von Provinzen und Städten, Provinzen, Städten und Gebieten sind die entsprechenden Daten, und Animation ist die Übergangsanimation, wenn das Auswahlsteuerelement sichtbar oder unsichtbar ist.

Stil der WXSS-Datei

.picker-view {
 width: 100%;
 display: flex;
 z-index:12;
 background-color: #fff;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 position: fixed;
 bottom: 0rpx;
 left: 0rpx;
 height: 40vh;
}

.picker-item {
 line-height: 70rpx;
 margin-left: 5rpx;
 margin-right: 5rpx;
 text-align: center;
}

In js fügen wir Daten zu Daten hinzu

/**
  * 控件当前显示的数据
  * provinces:所有省份
  * citys 选择省对应的所有市,
  * areas选择市对应的所有区
  * areaInfo：点击确定时选择的省市县字符拼接
  * animationAddressMenu：动画
  * addressMenuIsShow：是否可见
  */
 data: {
  animationAddressMenu: {},
  addressMenuIsShow: false,
  value: [0, 0, 0],
  provinces: [],
  citys: [],
  areas: [],
  areaInfo:''
 },

Das Wichtigste ist, die Datendatei am Anfang der js-Datei einzuführen

var address = require('../../utils/city.js')

Initialisieren Sie die Daten in onLoad, und Peking wird standardmäßig angezeigt

// 默认联动显示北京
  var id = address.provinces[0].id
  this.setData({
   provinces: address.provinces,
   citys: address.citys[id],
   areas: address.areas[address.citys[id][0].id],
  })

Ereignisverarbeitungslogik:

// 点击所在地区弹出选择框
 selectDistrict: function (e) {
  var that = this
  // 如果已经显示，不在执行显示动画
  if (that.data.addressMenuIsShow) {
   return
  }
  // 执行显示动画
  that.startAddressAnimation(true)
 },
 // 执行动画
 startAddressAnimation: function (isShow) {
  console.log(isShow)
  var that = this
  if (isShow) {
   // vh是用来表示尺寸的单位，高度全屏是100vh
   that.animation.translateY(0 + 'vh').step()
  } else {
   that.animation.translateY(40 + 'vh').step()
  }
  that.setData({
   animationAddressMenu: that.animation.export(),
   addressMenuIsShow: isShow,
  })
 },
 // 点击地区选择取消按钮
 cityCancel: function (e) {
  this.startAddressAnimation(false)
 },
 // 点击地区选择确定按钮
 citySure: function (e) {
  var that = this
  var city = that.data.city
  var value = that.data.value
  that.startAddressAnimation(false)
  // 将选择的城市信息显示到输入框
  var areaInfo = that.data.provinces[value[0]].name + ',' + that.data.citys[value[1]].name + ',' + that.data.areas[value[2]].name
  that.setData({
   areaInfo: areaInfo,
  })
 },
 // 点击蒙版时取消组件的显示
 hideCitySelected: function (e) {
  console.log(e)
  this.startAddressAnimation(false)
 },
 // 处理省市县联动逻辑
 cityChange: function (e) {
  console.log(e)
  var value = e.detail.value
  var provinces = this.data.provinces
  var citys = this.data.citys
  var areas = this.data.areas
  var provinceNum = value[0]
  var cityNum = value[1]
  var countyNum = value[2]
  // 如果省份选择项和之前不一样，表示滑动了省份，此时市默认是省的第一组数据，
  if (this.data.value[0] != provinceNum) {
   var id = provinces[provinceNum].id
   this.setData({
    value: [provinceNum, 0, 0],
    citys: address.citys[id],
    areas: address.areas[address.citys[id][0].id],
   })
  } else if (this.data.value[1] != cityNum) {
   // 滑动选择了第二项数据，即市，此时区显示省市对应的第一组数据
   var id = citys[cityNum].id
   this.setData({
    value: [provinceNum, cityNum, 0],
    areas: address.areas[citys[cityNum].id],
   })
  } else {
   // 滑动选择了区
   this.setData({
    value: [provinceNum, cityNum, countyNum]
   })
  }
  console.log(this.data)
 },

Für Ereignisverarbeitung und Verknüpfungsverarbeitungslogik Ich habe erklärt, was erklärt werden muss. Es wurde in der Code-Implementierung erklärt, und es ist nichts schwer zu verstehen, daher werde ich es an dieser Stelle nicht zu ausführlich vorstellen, den dreistufigen Verknüpfungseffekt von Provinzen und Städten und Landkreise im WeChat-Miniprogramm wurde erreicht.

Das obige ist der detaillierte Inhalt vonBeispiel für die gemeinsame Nutzung eines dreistufigen Linkage-Adressselektors im WeChat-Miniprogramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!