Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to realize the three-level linkage address selector in the development of WeChat Mini Programs. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Picker and picker-view components

Before formally introducing the implementation, we need to introduce these two components. The picker component was briefly introduced in the previous article. It is a scrolling selector that pops up from the bottom. Date selection, time selection and ordinary selector can be realized by setting the value of type. If we want to achieve the three-level linkage address selection effect in the figure above, we find it difficult to implement. It should be said that it cannot be implemented. Because the picker normal selector can only have one column, if you want to achieve the effect of three columns, you need to find another way.

Since it is a different way, you will naturally think of picker-view, this component is a scrolling selector embedded in the page, this component can place multiple picker-view-column, and can only place picker-view-column, other components will not be displayed, each picker-view-column is a column.

Picker-view has several important attributes, value is an array type, the number in the array in turn represents the number of items selected by picker-view-colume in picker-view (the subscript starts at 0), and when the number is greater than the optional length of picker-view-column, select the last item. Indicator-style and indicator-class can set the style of the selection box in the selector. It has an event bindchange, which is triggered when we scroll through item when the selected item data changes, and you can get the number of items currently selected through event.detai.vaule (the same meaning as vaule described above) (the subscript starts at 0). For picker-view-column, the height is automatically set to the same height as the check box of picker-view.

The provincial, municipal and county data files store the data needed for address selection, mainly area codes and names, and then expose the data for use through the following code

Module.exports = {citys, provinces, areas}

Wxml file implementation

Cancel text > OK text > view > {{item.name}} view > picker-view-column > {{item.name}} view > picker-view-column > {{item.name}} view > picker-view-column > picker-view > view >

The main reason is that there is a cancellation and confirmation for users to click to confirm the selection, and the picker-view contains three picker-view-column components, which correspond to the display of provinces and municipalities, provinces,citys,areas is the corresponding data, and animation is the transition animation when the selection control is visible or invisible.

Style wxss Fil

. picker-view {width: 100%; display: flex; z talk index12; 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, we add data to data.

/ * data currently displayed by the control * provinces: all provinces * citys selects all cities corresponding to provinces, * areas selects all districts corresponding to cities * areaInfo: character splicing of provinces, cities and counties selected when clicking OK * animationAddressMenu: animation * addressMenuIsShow: whether visible * / data: {animationAddressMenu: {}, addressMenuIsShow: false,value: [0,0,0], provinces: [], citys: [] Areas: [], areaInfo:''}

The most important thing is to introduce the data file at the beginning of the js file

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

Initialization data in onLoad. Beijing is displayed by default.

/ / Beijing var id = address.provinces [0] .idthis.setData ({provinces: address.provinces, citys: address.citys [id], areas: address.citys [id] [0] .id],})

Event handling logic:

/ / Click the region where the pop-up selection box selectDistrict: function (e) {var that = this// if already displayed, no longer perform display animation if (that.data.addressMenuIsShow) {return} / / execute display animation that.startAddressAnimation (true)}, / / execute animation startAddressAnimation: function (isShow) {console.log (isShow) var that = thisif (isShow) {/ / vh is the unit used to represent the size The height full screen is 100vh that.animation.translateY (0 + 'vh'). Step ()} else {that.animation.translateY (40 +' vh'). Step ()} that.setData ({animationAddressMenu: that.animation.export (), addressMenuIsShow: isShow,})}, / / Click the region selection cancel button cityCancel: function (e) {this.startAddressAnimation (false)} / / Click the region selection determination button citySure: function (e) {var that = thisvar city = that.data.cityvar value = that.data.value that.startAddressAnimation (false) / / display the selected city information in the input box var areaInfo = that.data.provinces [value [0]] .name +','+ that.data.citys [value [1]] .name +','+ that.data.areas [value [2]] .name that.setData ({areaInfo: areaInfo) })}, / / cancel the display of the component when clicking the mask: hideCitySelected: function (e) {console.log (e) this.startAddressAnimation (false)} / / deal with the provincial, municipal and county linkage logic cityChange: function (e) {console.log (e) var value = this.data.provincesvar citys = this.data.citysvar areas = this.data.areasvar provinceNum = value [0] var cityNum = value [1] var countyNum = value [2] / / if the provincial selection is not the same as before Indicates that the province is slipped, and the city defaults to the first set of data for the province. 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 (provinceNum [1]! = cityNum) {/ / slide to select the second data Immediate city The first set of data corresponding to provinces and cities var id = citys [cityNum] .id this.setData ({value: [provinceNum, cityNum, 0], areas: address.areas [citys [cityNum] .id],})} else {/ / slide to select the zone this.setData ({value: [provinceNum, cityNum, countyNum]})} console.log (this.data)} This is the end of the article on "how to implement a three-level linkage address selector in WeChat Mini Programs's development". Hope that the above content can be helpful to you, so that you can learn more knowledge, if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.