创新互联小程序教程：微信小程序 扩展组件·索引列表组件

index-list

索引列表组件，可实现类似通讯录效果。组件内节点将被添加到列表上方。

成都创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站设计、成都网站建设、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的青铜峡网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

示例代码：

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
            类通讯录列表
        
        
        
    

属性列表

listItem 属性列表

subItem 属性列表

注意事项

1. demo 中省市信息为模拟数据，开发者可以使用腾讯位置服务提供的 SDK 来获取省市信息。

文章题目：创新互联小程序教程：微信小程序 扩展组件·索引列表组件
本文来源：http://www.shufengxianlan.com/qtweb/news11/551411.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联