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})
}
})
<mp-indexList class="city__list" list="{{list}}" bindchoose="onChoose">
<view class="page">
<view class="page__hd">
<view class="page__title">Index List</view>
<view class="page__desc">类通讯录列表</view>
</view>
<view class="page__bd">
</view>
</view>
</mp-indexList>
属性列表
属性 |
类型 |
默认值 |
必填 |
说明 |
list |
Array<listItem> |
[] |
是 |
列表数据 |
vibrated |
boolean |
true |
否 |
索引上滑动时是否产生振动,仅 iOS 生效 |
bindchoose |
eventhandle |
否 |
|
选择列表项, e.detail={name} |
listItem 属性列表
属性 |
类型 |
说明 |
alpha |
string |
首字母(大写) |
subItems |
Array<subItem> |
子元素集合 |
subItem 属性列表
注意事项
- demo 中省市信息为模拟数据,开发者可以使用腾讯位置服务提供的 SDK 来获取省市信息。
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《微信小程序 扩展组件·索引列表组件》
文章链接:
https://zhuji.vsping.com/312019.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。