日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間:8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
創(chuàng)新互聯(lián)小程序教程:微信小程序 擴(kuò)展組件·索引列表組件

index-list

索引列表組件,可實(shí)現(xiàn)類似通訊錄效果。組件內(nèi)節(jié)點(diǎn)將被添加到列表上方。

成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時(shí)代的青銅峽網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!

示例代碼:

const res = {
  result: [
    [{
      cidx: [0, 15],
      fullname: "北京市",
      id: "110000",
      location: {
        lat: 39.90469,
        lng: 116.40717 
      },
      name: "北京",
      pinyin: ["bei", "jing"]
    }, {
      cidx: [16, 31],
      fullname: "天津市",
      id: "120000",
      location: {lat: 39.0851, lng: 117.19937},
      name: "天津",
      pinyin: ["tian", "jin"]
    }, {
      cidx: [32, 42],
      fullname: "河北省",
      id: "130000",
      location: {lat: 38.03599, lng: 114.46979},
      name: "河北",
      pinyin: ["he", "bei"],
    }, {
      cidx: [43, 53],
      fullname: "山西省",
      id: "140000",
      location: {lat: 37.87343, lng: 112.56272},
      name: "山西",
      pinyin:  ["shan", "xi"],
    }]
  ]
}
Page({

  onLoad(options) {
    this.getCitys()
  },

  onChoose(e) {
    console.log('onChoose', e)
  },

  getCitys() {
    const _this = this
    const cities = res.result[0]
        // 按拼音排序
        cities.sort((c1, c2) => {
          let pinyin1 = c1.pinyin.join('')
          let pinyin2 = c2.pinyin.join('')
          return pinyin1.localeCompare(pinyin2)
        })
        // 添加首字母
        const map = new Map()
        for (const city of cities) {
          const alpha = city.pinyin[0].charAt(0).toUpperCase()
          if (!map.has(alpha)) map.set(alpha, [])
          map.get(alpha).push({ name: city.fullname })
        }
    
        const keys = []
        for (const key of map.keys()) {
          keys.push(key)
        }
        keys.sort()
    
        const list = []
        for (const key of keys) {
          list.push({
            alpha: key,
            subItems: map.get(key)
          })
        }

        _this.setData({list})
  }

})


    
        
            Index List
            類通訊錄列表
        
        
        
    

屬性列表

屬性類型默認(rèn)值必填說(shuō)明
listArray[]列表數(shù)據(jù)
vibratedbooleantrue索引上滑動(dòng)時(shí)是否產(chǎn)生振動(dòng),僅 iOS 生效
bindchooseeventhandle選擇列表項(xiàng), e.detail={name}

listItem 屬性列表

屬性類型說(shuō)明
alphastring首字母(大寫)
subItemsArray子元素集合

subItem 屬性列表

屬性類型說(shuō)明
namestring名稱

注意事項(xiàng)

  1. demo 中省市信息為模擬數(shù)據(jù),開發(fā)者可以使用騰訊位置服務(wù)提供的 SDK 來(lái)獲取省市信息。

網(wǎng)站名稱:創(chuàng)新互聯(lián)小程序教程:微信小程序 擴(kuò)展組件·索引列表組件
文章位置:http://www.dlmjj.cn/article/ccessgp.html