Interface Design

Reference to wx applet index list component

gitbub address: https://github.com/mehaotian/wx-list-index

Above:

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');

Page({
    data: {
       city: City
    },

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

    console.log(e.detail)

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

    let cityinfo = e.detail.name

    wx.setStorageSync("wxb_cityinfo", cityinfo)

    var pages = getCurrentPages()

    var prevPages = pages.length-2

    wx.navigateBack({

      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'> 

    <list-html

      data="{{city}}" 

      my-city="{{cityInfo.city}}" 

      binddetail="binddetail"

      horizontal

      search

      animation

    />

</view>

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)

.wrapper{

  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