最近模仿微信通信錄做了個小程序組件，分享給大家，具體如下：
效果圖
因為是使用的手機錄屏，視頻格式為MP4，上傳到文章時發現只支持圖片，還好電腦自動錄屏功能，所以簡單的錄制了一下，完后又提示只能4M，只能再去壓縮圖片，所以畫質略渣，各位客官講究的看看吧。
特色功能介紹
實現基礎
本組件只使用了小程序基礎組件中的scroll-view，不用那么麻煩，簡單方便，一看就懂，哈哈哈
wxml
滾動區域
<scroll-view scroll-y scroll-into-view="{{toView}}" enable-back-to-top bindscroll="scroll" scroll-with-animation scroll-top="{{scrollTop}}">
<view class="list-group" wx:for="{{logs}}" wx:for-item="group">
<view class="title" id="{{group.title}}">{{group.title}}</view>
<block wx:for="{{group.items}}" wx:for-item="user">
<view id="" class="list-group-item">
<image class="icon" src="{{user.avatar}}" lazy-load="true"></image>
<text class="log-item">{{user.name}}</text>
</view>
</block>
</view>
</scroll-view>
簡單說一下上述代碼：根據小程序文檔，在使用**scroll-view**組件用于豎向滾動時一定要設置高度,你們可以看到我在代碼中設置了'height:100%;'這就實現了組件的滾動高度是整個頁面。 但是請注意：很多同學會發現設置了高度100%后，組件并沒有效果，這是因為你沒有將頁面高度設置為100%，所以你還需在app.wxss中設置page的高度為100%； 其他的屬性看文檔就好，我就不再多說；
2.側面字母導航
<view class="list-shortcut">
<block wx:for="{{logs}}">
<text class="{{currentIndex===index?'current':''}}" data-id="{{item.title}}" bindtap='scrollToview'>{{item.title}}</text>
</block>
</view>
3.固定在頂部的字母導航
<view class="list-fixed {{fixedTitle=='' ? 'hide':''}}" >
<view class="fixed-title">
{{fixedTitle}}
</view>
</view>
js
渲染參數
normalizeSinger(list) {
//列表渲染
let map = {
hot: {
title: this.data.HOT_NAME,
items: []
}
}
list.forEach((item, index) => {
if (index < this.data.HOT_SINGER_LEN) {
map.hot.items.push({
name: item.Fsinger_name,
avatar:this.constructor(item.Fsinger_mid)
})
}
const key = item.Findex
if (!map[key]) {
map[key] = {
title: key,
items: []
}
}
map[key].items.push({
name: item.Fsinger_name,
avatar: this.constructor(item.Fsinger_mid)
})
})
let ret = []
let hot = []
for (let key in map) {
let val = map[key]
if (val.title.match(/[a-zA-Z]/)) {
ret.push(val)
} else if (val.title === this.data.HOT_NAME) {
hot.push(val)
}
}
ret.sort((a, b) => {
return a.title.charCodeAt(0) - b.title.charCodeAt(0)
})
return hot.concat(ret)
},
計算分組高度
var lHeight = [],
that = this;
let height = 0;
lHeight.push(height);
var query = wx.createSelectorQuery();
query.selectAll('.list-group').boundingClientRect(function(rects){
var rect = rects,
len = rect.length;
for (let i = 0; i < len; i++) {
height += rect[i].height;
lHeight.push(height)
}
}).exec();
var calHeight = setInterval(function(){
if (lHeight != [0]) {
that.setData({
listHeight: lHeight
});
clearInterval(calHeight);
}
},1000)
在獲取元素屬性上，小程序提供了一個很方便的api，wx.createSelectotQuery();具體使用方法請看[節點信息API][3]
使用該方法獲取到各分組的高度，存入lHeight中用于之后滾動時判斷使用；
同學們可以看到我在將lHeight賦值給data的listHeight時使用了定時器，這是因為獲取節點信息api是異步執行的，顧你直接進行賦值是沒有效果的，所以我使用了定時器功能；
**我覺得這里使用定時器不是最好的處理方式，同學們有更好的方法請告訴我，謝謝**
對滾動事件進行處理
const listHeight = this.data.listHeight
// 當滾動到頂部，scrollY<0
if (scrollY == 0 || scrollY < 0) {
this.setData({
currentIndex:0,
fixedTitle:''
})
return
}
// 在中間部分滾動
for (let i = 0; i < listHeight.length - 1; i++) {
let height1 = listHeight[i]
let height2 = listHeight[i + 1]
if (scrollY >= height1 && scrollY < height2) {
this.setData({
currentIndex:i,
fixedTitle:this.data.logs[i].title
})
this.fixedTt(height2 - newY);
return
}
}
// 當滾動到底部，且-scrollY大于最后一個元素的上限
this.setData({
currentIndex: listHeight.length - 2,
fixedTitle: this.data.logs[listHeight.length - 2].title
})
參數格式
list:[
{
"index": "X",
"name": "薛之謙",
},
{
"index": "Z",
"name": "周杰倫",
},
{
"index": "B",
"name": "BIGBANG (빅뱅)",
},
{
"index": "B",
"name": "陳奕迅",
},
{
"index": "L",
"name": "林俊杰",
},
{
"index": "A",
"name": "Alan Walker (艾倫·沃克)",
},
]
最后
完整代碼請戳 gitHub
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
