How to switch between cities in WeChat mini-app development

This article mainly introduces how to implement the urban selector switch in small program development. it is of practical value. if you need it, you can refer to it. The city selector is indispensable in mobile development.

Blank.

Gif:

Here, only part of the js code is available:

Var city = require ('.. /.. /utils/city. js '); Page ({data: {searchLetter: [], showLetter: "", winHeight: 0, tHeight: 0, bHeight: 0, startPageY: 0, cityList: [], isShowLetter: false, scrollTop: 0, city: ""}, onLoad: function (options) {// Life cycle function -- listen to the page to load var searchLetter = city. searchLetter; var cityList = city. cityList (); // console. log (cityInfo); var sysInfo = wx. getSystemInfoSync (); console. log (sysInfo); var winHeight = sysInfo. windowHeight; // add the letter range value to be matched // 1. set the height of the child element var itemH = winHeight/searchLetter. length; var tempObj = []; for (var I = 0; I <searchLetter. length; I ++) {var temp = {}; temp. name = searchLetter [I]; temp. tHeight = I * itemH; temp. bHeight = (I + 1) * itemH; tempObj. push (temp)} this. setData ({winHeight: winHeight, itemH: itemH, searchLetter: tempObj, cityList: cityList}) console. log (this. data. cityInfo) ;}, onReady: function () {// Life cycle function -- listener page first rendering completed}, onShow: function () {// Life cycle function -- listener page display}, onHide: function () {// Life cycle function -- listener page hidden}, onUnload: function () {// Life cycle function -- listener page unload}, onPullDownRefresh: function () {// page-related event handler function -- listener user drop-down action}, onReachBottom: function () {// processing function for the bottoming event on the page}, ondeskappmessage: function () {// the user clicks share return {title: 'title' in the upper right corner, // share the title desc: 'desc', // share description path: 'path' // share path }}, searchStart: function (e) {var showLetter = e. currentTarget. dataset. letter; var pageY = e. touches [0]. pageY; this. setScrollTop (this, showLetter); this. nowLetter (pageY, this); this. setData ({showLetter: showLetter, startPageY: pageY, isShowLetter: true,})}, searchMove: function (e) {var pageY = e. touches [0]. pageY; var startPageY = this. data. startPageY; var tHeight = this. data. tHeight; var bHeight = this. data. bHeight; var showLetter = 0; console. log (pageY); if (startPageY-pageY> 0) {// move up if (pageY <tHeight) {// showLetter = this. mateLetter (pageY, this); this. nowLetter (pageY, this) ;}} else {// move down if (pageY> bHeight) {// showLetter = this. mateLetter (pageY, this); this. nowLetter (pageY, this) ;}}, searchEnd: function (e) {// console. log (e); // var showLetter = e. currentTarget. dataset. letter; var that = this; setTimeout (function () {that. setData ({isShowLetter: false})}, 1000)}, nowLetter: function (pageY, that) {// currently selected information var letterData = this. data. searchLetter; var bHeight = 0; var tHeight = 0; var showLetter = ""; for (var I = 0; I <letterData. length; I ++) {if (letterData [I]. tHeight <= pageY & pageY <= letterData [I]. bHeight) {bHeight = letterData [I]. bHeight; tHeight = letterData [I]. tHeight; showLetter = letterData [I]. name; break;} this. setScrollTop (that, showLetter); that. setData ({bHeight: bHeight, tHeight: tHeight, showLetter: showLetter, startPageY: pageY})}, bindScroll: function (e) {console. log (e. detail)}, setScrollTop: function (that, showLetter) {var scrollTop = 0; var cityList = that. data. cityList; var cityCount = 0; var initialCount = 0; for (var I = 0; I <cityList. length; I ++) {if (showLetter = cityList [I]. initial) {scrollTop = initialCount * 30 + cityCount * 41; break;} else {initialCount ++; cityCount + = cityList [I]. cityInfo. length ;}} that. setData ({scrollTop: scrollTop})}, bindCity: function (e) {var city = e. currentTarget. dataset. city; this. setData ({city: city })}})

The above is all the content of this article. I hope it will help you learn and support PHP.

For more details about the urban selector switch for small program development, please follow the PHP Chinese network!