介面設計

對wx小程式索引列表元件進行引用

上圖：

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: 個人筆記