すべての都市リストの検索インターフェイスを実装するミニプログラムの開発

php是最好的语言

リリース： 2018-07-30 09:42:35

オリジナル

6251 人が閲覧しました

ミニプログラムを使用してすべての都市のリストを表示するインターフェイスを実装するには、まずインターフェイスの設計を検討する必要があります。次に、wx ミニプログラムのインデックスリストコンポーネントを参照して、検索機能を実装します。独自の検索機能を持つようにコンポーネントを変更します。 , wxmlのlist-htmlタグに追加するだけです。search属性を宣言するだけです。

インターフェースデザイン

wxアプレットインデックスリストコンポーネントを参照します

上の写真:

すべての都市リストの検索インターフェイスを実装するミニプログラムの開発

jsファイル:

すべての都市情報はajaxで取得できます。ここではallCity.jsファイルから取得します

var city = [

  {

    title: "热门城市",

    type: &#39;hot&#39;,

    item: [

      {

        "name": "北京",

        "key": "热门",

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

      },

      {

        "name": "上海",

        "key": "热门"

      },

      {

        "name": "广州",

        "key": "热门"

      }]
       
    },
    {

    title: "A",

    item: [

      {

        "name": "阿坝",

        "key": "A"

      },

      {

        "name": "阿拉善",

        "key": "A"

      },
     ]}

]

ログイン後にコピー

let City = require(&#39;../../../../utils/allCity.js&#39;);

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=&#39;wrapper&#39;> 

    <list-html

      data="{{city}}" 

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

      binddetail="binddetail"

      horizontal

      search

      animation

    />

</view>

ログイン後にコピー