小程序之顯示全部城市列表界面

界面設計

對wx小程序索引列表組件進行引用

github地址：https://github.com/mehaotian/wx-list-index

上圖：

js文件：

所有的城市信息可用ajax獲取，在這我從allCity.js文件中獲取

var city = [

  {

    title: "熱門城市",

    type: 'hot',

    item: [

      {

        "name": "北京",

        "key": "熱門",

        "test": "testValue"//可自己添加其他信息

      },

      {

        "name": "上海",

        "key": "熱門"

      },

      {

        "name": "廣州",

        "key": "熱門"

      }]
       
    },
    {

    title: "A",

    item: [

      {

        "name": "阿壩",

        "key": "A"

      },

      {

        "name": "阿拉善",

        "key": "A"

      },
     ]}

]

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

Page({
    data: {
       city: City
    },

    //點擊相應城市觸發的事件
    binddetail(e) {

    console.log(e.detail)

    // 返回 例 :{name: "北京", 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文件

該組件中標籤中的屬性的含義爲：

data: 列表裏的數據源

my-city: 我的位置顯示的城市

binddetail: 點擊相應的城市名稱觸發的事件

horizontal：是否顯示首行的內容（我的位置、熱門城市等）

search：是否顯示搜索框

animation：是否加載過渡動畫

 

<view class='wrapper'> 

    <list-html

      data="{{city}}" 

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

      binddetail="binddetail"

      horizontal

      search

      animation

    />

</view>

wxss文件

只需添加list-html外層的view的高度height屬性（不設置的話會出現bug,左側的字母導航欄會跟隨滾動）

.wrapper{

  height: 1080rpx;

}

 

搜索功能

改組件自帶搜索功能，只需在wxml中list-html標籤中聲明search屬性即可

PS: 個人筆記