모든 도시 목록에 대한 검색 인터페이스를 구현하는 미니 프로그램 개발

php是最好的语言

풀어 주다： 2018-07-30 09:42:35

원래의

6251명이 탐색했습니다.

미니 프로그램을 사용하여 모든 도시 목록을 표시하는 인터페이스를 구현합니다. 먼저 인터페이스 디자인을 고려합니다. wx 미니 프로그램 인덱스 목록 구성 요소를 참조한 다음 검색 기능을 구현합니다. 자체 검색 기능을 갖도록 구성 요소를 변경합니다. 함수, wxml의 list- html 태그에 검색 속성을 선언하면 됩니다.

인터페이스 디자인

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 file

이 구성 요소의 태그에 있는 속성의 의미는 다음과 같습니다.

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>

로그인 후 복사

wxss 파일 #🎜 🎜#

list-html만 추가하세요. 외부뷰의 높이 속성 (설정하지 않으면 버그가 발생하며, 왼쪽의 알파벳순 탐색바가 스크롤됩니다)