Applet Display All Cities List Interface

Posted by velanzia on Mon, 27 Jan 2020 17:05:14 +0100

Interface Design

Reference to wx applet index list component

gitbub address:


js file:

All city information is available in ajax, which I get from the allCity.js file

var city = [


    title: "Popular Cities",

    type: 'hot',

    item: [


        "name": "Beijing",

        "key": "Popular",

        "test": "testValue"//You can add other information yourself



        "name": "Shanghai",

        "key": "Popular"



        "name": "Guangzhou",

        "key": "Popular"


    title: "A",

    item: [


        "name": "Aba",

        "key": "A"



        "name": "Alaska",

        "key": "A"


let City = require('../../../../utils/allCity.js');

    data: {
       city: City

    //Click on the event triggered by the corresponding city
    binddetail(e) {


    // Return example: {name:'Beijing', key:'B', test:'testValue'}

    let cityinfo =

    wx.setStorageSync("wxb_cityinfo", cityinfo)

    var pages = getCurrentPages()

    var prevPages = pages.length-2


      delta: prevPages



wxml file

The meaning of the attributes in the label in this component is:

Data:The data source in the list

my-city: The city my location shows

binddetail: Click on the event triggered by the corresponding city name

horizontal: whether to show the first line (my location, popular cities, etc.)

Search: Whether to show the search box

animation: whether to load transition animations


<view class='wrapper'> 










wxss file

Simply add the height heights property of the list-html outer view (if not set, a bug will appear and the left alphabetic navigation bar will scroll)


  height: 1080rpx;



Search function

Change the component's own search function by declaring the search attribute in the list-html tag in wxml

PS: Personal Notes

Topics: github Attribute