新聞中心
這里有您想知道的互聯(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
類通訊錄列表
Index List
類通訊錄列表
屬性列表
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說(shuō)明 |
|---|---|---|---|---|
| list | Array | [] | 是 | 列表數(shù)據(jù) |
| vibrated | boolean | true | 否 | 索引上滑動(dòng)時(shí)是否產(chǎn)生振動(dòng),僅 iOS 生效 |
| bindchoose | eventhandle | 否 | 選擇列表項(xiàng), e.detail={name} |
listItem 屬性列表
| 屬性 | 類型 | 說(shuō)明 |
|---|---|---|
| alpha | string | 首字母(大寫) |
| subItems | Array | 子元素集合 |
subItem 屬性列表
| 屬性 | 類型 | 說(shuō)明 |
|---|---|---|
| name | string | 名稱 |
注意事項(xiàng)
- demo 中省市信息為模擬數(shù)據(jù),開發(fā)者可以使用騰訊位置服務(wù)提供的 SDK 來(lái)獲取省市信息。
網(wǎng)站名稱:創(chuàng)新互聯(lián)小程序教程:微信小程序 擴(kuò)展組件·索引列表組件
文章位置:http://www.dlmjj.cn/article/ccessgp.html


咨詢
建站咨詢
