logs.wxml:
<!--logs.wxml-->
<view class="container log-list">
<scroll-view scroll-y style="height:100%;white-space:nowrap;" 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>
<!-- 侧边字母导航 -->
<view class="list-shortcut">
<block wx:for="{{logs}}">
<text class="{{currentIndex===index?'current':''}}" data-id="{{item.title}}" bindtap='scrollToview'>{{item.title}}</text>
</block>
</view>
<!-- 固定在顶部的字母导航 -->
<view class="list-fixed {{fixedTitle=='' ? 'hide':''}}" style="transform:translate3d(0,{{fixedTop}}px,0);">
<view class="fixed-title">
{{fixedTitle}}
</view>
</view>
</view>
logs.js:
const app = getApp()
const TITLE_HEIGHT = 30
const ANCHOR_HEIGHT = 18
Page({
data: {
toView:'',
logs: [],
scrollTop:0,
HOT_NAME:'热',
HOT_SINGER_LEN:10,
listHeight:[],
currentIndex:0,
fixedTitle:'',
fixedTop:0,
list:[
{
"index": "X",
"name": "薛之谦",
"img":''
},
{
"index": "Z",
"name": "周杰伦",
"img":''
},
{
"index": "B",
"name": "BIGBANG (빅뱅)",
"img":''
},
{
"index": "B",
"name": "陈奕迅",
"img":''
},
{
"index": "L",
"name": "林俊杰",
"img":''
},
{
"index": "A",
"name": "Alan Walker (艾伦·沃克)",
"img":''
},
]
},
onLoad: function () {
var that = this,
list = that.data.list;
wx.hideLoading()
this.setData({
logs: this._normalizeSinger(list)
})
this._calculateHeight()
},
_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.name,
avatar:item.img
})
}
const key = item.index
if (!map[key]) {
map[key] = {
title: key,
items: []
}
}
map[key].items.push({
name: item.name,
avatar: item.img
})
})
// 为了得到有序列表，我们需要处理 map
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)
},
scroll :function(e) {
var newY = e.detail.scrollTop;
this.scrollY(newY);
},
scrollY(newY) {
const listHeight = this.data.listHeight
// 当滚动到顶部，newY>0
if (newY == 0 || newY < 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 (newY >= height1 && newY < height2) {
this.setData({
currentIndex:i,
fixedTitle:this.data.logs[i].title
})
this.fixedTt(height2 - newY);
return
}
}
// 当滚动到底部，且-newY大于最后一个元素的上限
this.setData({
currentIndex: listHeight.length - 2,
fixedTitle: this.data.logs[listHeight.length - 2].title
})
},
fixedTt(newVal) {
let fixedTop = (newVal > 0 && newVal < TITLE_HEIGHT) ? newVal - TITLE_HEIGHT : 0
if (this.data.fixedTop === fixedTop) {
return
}
this.setData({
fixedTop:fixedTop
})
},
_calculateHeight() {
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)
},
scrollToview(e){
var id = e.target.dataset.id
if (id == '热') {
this.setData({
scrollTop:0
})
} else {
this.setData({
toView: id
})
}
}
})
logs.wxss:
.log-list {
display: flex;
flex-direction: column;
/* padding-bottom:60rpx; */
}
.log-item {
margin: 10rpx;
}
.title {
height: 60rpx;
line-height: 60rpx;
padding-left: 40rpx;
font-size: 12px;
color: rgba(255, 255, 255, 1);
background: #ccc;
margin-top:60rpx;
}
.title:first-child {
margin-top:0;
}
.list-group-item {
display: flex;
-webkit-box-align: center;
align-items: center;
padding: 40rpx 0 0 60rpx;
}
.list-group-item:last-child {
padding-bottom: 60rpx;
}
.list-group-item .icon {
width:100rpx;
height:100rpx;
border-radius: 50%;
}
::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}
.list-shortcut {
position: fixed;
z-index: 30;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 20px;
padding: 20px 0;
border-radius: 10px;
text-align: center;
background: rgba(0,0,0,.3);
font-family: Helvetica;
}
.list-shortcut text {
display: block;
padding: 3px;
line-height: 1;
color: #fff;
font-size: 12px;
}
.current{
color: #ffcd32 !important;
}
.list-fixed {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.fixed-title {
height:60rpx;
line-height:60rpx;
padding-left:40rpx;
font-size:12px;
color:rgba(255, 255, 255, 1);
background:#ccc;
}
网友评论