WeChat mini-app implements nationwide airport index list and mini-app Index

Mini-programs implement the national airport index list and mini-app Index

This article shares with you the code for implementing the MUI index list by using applets for your reference. The specific content is as follows:

Effect chart

Implementation Principle

• 'Select airport now 'and the navigation bar on the right use fixed positioning;
• The scroll-view component is used for scrolling the display window on the left;
• The letter in the selection prompt is self-made WXSS style.
  

WXML

<View class = "right-nav"> <view bindtap = "getCurrentCode" class = "{chooseIndex = index? '. City-list-activity': ''}" wx: for = "{cityList}" style = "height: {codeHeight} px "data-code =" {item. code }}" >{{ item. code }}</view> <view class = "city-layer {isShowLayer? '': 'Layer-hide '}}" >{[ code] }</view> <view class =" current-choose-city "> currently selected airport: {chooseCity }}</view> <scroll-view class = "city-scroll" scroll-y = "true" style = "height: {cityHeight} px "bindscroll =" scroll "scroll-top =" {scrollTop} "> <view class =" city-box "wx: for = "{cityList}" wx: key = "{item. code }}"> <view class = "city-code" >{{ item. code }}</view> <view class = "city-list" wx: for = "{item. cityList} "wx: for-item = "city" bindtap = "getChooseCity" data-city = "{city }}" >{{ city }}</view> </scroll -view>

WXSS

. Current-choose-city {position: fixed; width: 100%; height: 50px; line-height: 50px; padding: 0 10px; top: 0; left: 0; background-color: # fff; z-index: 10 ;}. right-nav {width: 30px; color: #888; text-align: center; position: fixed; bottom: 0; right: 0; background-color: rgb (200,200,200 ); z-index: 9 ;}. city-scroll {padding-top: 50px ;}. city-code {background-color: # f7f7f7 ;}. city-list ,. city-code {height: 39px; line-height: 40px; padding: 0 30px 0 10px; overflow: hidden; border-bottom: 1px solid # c8c7cc ;}. city-list-active {color: # 007aff;}/* letter prompted to be clicked */. city-layer {width: 70px; height: 70px; line-height: 70px; text-align: center; border-radius: 50%; color: # fff; background-color: rgba (0, 0, 0 ,. 7); position: fixed; top: calc (50%-35px); left: calc (50%-35px); z-index: 11 ;}. layer-hide {display: none ;}

JS

Var city_list = require ('./city. js'); Page ({data: {cityList: city_list.city, chooseCity:' You have not selected an airport! ', IsShowLayer: false, chooseIndex: 0, len: [], code: null, codeHeight: null, cityHeight: null, scrollTop: 0}, onLoad (options) {var transport wheight = wx. getSystemInfoSync (). optional wheight; var arr = []; this. data. cityList. forEach (current => arr. push (current. cityList. length + 1); this. setData ({codeHeight: (optional wheight-50)/this. data. cityList. length, cityHeight: Running wheight-50, len: arr}) ;}, getCurrentCode (e) {var index = 0, sum = 0, self = this; for (var I = 0; I <this. data. cityList. length; I ++) {if (this. data. cityList [I]. code = e.tar get. dataset. code) {index = I break; }}for (var j = 0; j <index; j ++) {sum + = this. data. len [j];} this. setData ({code: e.tar get. dataset. code, scrollTop: sum * 40, chooseIndex: index, isShowLayer: true}); setTimeout () => {self. setData ({isShowLayer: false})}, 500) ;}, getChooseCity (e) {this. setData ({chooseCity: e.tar get. dataset. city });}})

Summary:

In the onLoad function, set the display height on the left and the height of each letter in the right navigation box;
The getCurrentCode function is used to obtain the index of the clicked letter, and then prompts and closes the prompt after ms;
The getChooseCity function is used to obtain the selected airport and assign values to chooseCity.

Code simplification:

var index = 0;for (var i = 0; i < this.data.cityList.length;i++){ if (this.data.cityList[i].code === e.target.dataset.code){ index = i break; }}

Simplified:

Add data-index = "{index}" to reduce cycle consumption:
<View bindtap = "getCurrentCode" class = "{chooseIndex = index? '. City-list-activity': ''}" wx: for = "{cityList}" style = "height: {codeHeight} px "data-code =" {item. code }}" data-index = "{index}">
Var index = e.tar get. dataset. index;

Download DEMO

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.