承接微信小程序开发,扫码加微信:
先看实现效果,如下图:
js代码:
// pages/myTeam/index.js
Page({
/**
* 页面的初始数据
*/
data: {
isActive: null,
listMain: [{
id: "1", region: "A",
items: [
{ id: "", name: "amour" },
{ id: "", name: "amour" },
{ id: "", name: "amour" },
{ id: "", name: "amour" }
]
},
{
id: "2", region: "B",
items: [
{ id: "", name: "bandon" },
{ id: "", name: "bandon" }
]
},
{
id: "3", region: "C",
items: [
{ id: "", name: "client" },
{ id: "", name: "client" },
{ id: "", name: "client" },
{ id: "", name: "client" }
]
},
{
id: "4", region: "D",
items: [
{ id: "", name: "digital" },
{ id: "", name: "digital" }
]
},
{
id: "5", region: "E",
items: [
{ id: "", name: "echo" },
{ id: "", name: "echo" },
{ id: "", name: "echo" },
{ id: "", name: "echo" }
]
},
{
id: "6", region: "F",
items: [
{ id: "", name: "funk" },
{ id: "", name: "funk" }
]
},
],
listTitles: [],
fixedTitle: 'A',
toView: 'inToView0',
viewPosition: [],
scroolHeight: 0
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this ;
var num = 0;
for (let i = 0; i < that.data.listMain.length;i++){
wx.createSelectorQuery().select('#inToView' + that.data.listMain[i].id).boundingClientRect(function(rect){
num = num + rect.height; //元素高度+该元素先前元素高度 , 可理解为元素底部至可滚动视图区域顶部高度
console.log(num)
var _array = [{ 'height': num, 'key': rect.dataset.id , 'name':that.data.listMain[i].region}];
that.setData ({
viewPosition: that.data.viewPosition.concat(_array) //合并数组
});
}).exec()
};
},
// 可滚动视图区域滑动函数触发
onPageScroll: function (e) {
console.log(e)
this.setData({
scroolHeight: e.detail.scrollTop //获取滚动条滚动位置
});
for (let i in this.data.viewPosition) {
if (e.detail.scrollTop < this.data.viewPosition[i].height) { //判断滚动条位置是否在元素内
this.setData({
isActive: this.data.viewPosition[i].key,
fixedTitle: this.data.viewPosition[i].name
});
return false;
}
}
},
//点击右侧字母导航定位触发
scrollToViewFn: function (e) {
console.log(e)
var that = this;
var _id = e.target.dataset.id;
for (var i = 0; i < that.data.listMain.length; ++i) {
if (that.data.listMain[i].id === _id) {
that.setData({
isActive: _id,
toView: 'inToView' + _id //滚动条to指定view
})
break
}
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
wxml代码:
<view >
<!-- 左侧列表内容部分 -->
<scroll-view class="content" enable-back-to-top scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true" bindscroll="onPageScroll">
<view wx:for="{{listMain}}" wx:for-item="group" wx:key="{{group.id}}" id="{{ 'inToView'+group.id}}" data-id='{{group.id}}'>
<view class="address_top" >{{group.region}}</view>
<view wx:for="{{group.items}}" wx:for-item="item" wx:key="{{item.brandId}}">
<view class="address_bottom" data-id='{{item.brandId}}'>{{item.name}}</view>
</view>
</view>
</scroll-view>
<!-- 顶部固定分类 -->
<view class="list-fixed {{fixedTitle=='' ? 'hide':''}}" style="transform:translate3d(0,{{fixedTop}}px,0);">
<view class="fixed-title">
{{fixedTitle}}
</view>
</view>
<!-- 右侧字母导航 -->
<view class="orientation_region">
<view class="orientation">自动定位</view>
<block wx:for="{{listMain}}" wx:key="{{item.id}}">
<view class="orientation_city {{isActive==item.id ? 'active':'' }}" bindtap="scrollToViewFn" data-id="{{item.id}}" >
{{item.region}}
</view>
</block>
</view>
</view>
wxss代码:
page{
height: 100%;
}
.content{
padding-bottom: 20rpx;
box-sizing: border-box;
height: 100%;
position: fixed
}
.location{
width: 100%;
}
.location_top{
height: 76rpx;
line-height: 76rpx;
background: #f4f4f4;
color: #606660;
font-size: 28rpx;
padding: 0 20rpx;
}
.location_bottom{
height: 140rpx;
line-height: 140rpx;
color: #d91f16;
font-size: 28rpx;
border-top: 2rpx #ebebeb solid;
border-bottom: 2rpx #ebebeb solid;
padding: 0 20rpx;
align-items: center;
display: -webkit-flex;
}
.address_top{
height: 56rpx;
line-height: 56rpx;
background: #EBEBEB;
color: #999999;
font-size: 28rpx;
padding: 0 20rpx;
}
.address_bottom{
height: 88rpx;
line-height: 88rpx;
background: #fff;
color: #000000;
font-size: 32rpx;
padding: 0 20rpx;
border-bottom: 2rpx #ebebeb solid;
margin-left: 20rpx;
margin-right: 50rpx;
}
.location_img{
width: 48rpx;
height: 48rpx;
position: absolute;
right: 20rpx;
top: 125rpx;
}
.add_city{
width: 228rpx;
height: 60rpx;
line-height: 60rpx;
text-align: center;
border: 2rpx solid #ebebeb;
color: #000000;
margin-right: 20rpx;
}
.add_citying{
width: 228rpx;
height: 60rpx;
line-height: 60rpx;
text-align: center;
border: 2rpx solid #09bb07;
color: #09bb07;
margin-right: 20rpx;
}
.orientation{
white-space:normal;
display: inline-block;
width: 55rpx;height:58rpx;
color: #999;
text-align: center;
}
.orientation_region{
width: 55rpx;
font-size: 20rpx;
position: fixed;
top: 100rpx;
right: 0rpx;
}
.orientation_city{
height: 40rpx;
line-height: 40rpx;
color: #000;
text-align: center;
}
.active{
color: #2cc1d1;
}
.list-fixed{
position: fixed;
width: 100%;
z-index: 999;
height: 56rpx;
line-height: 56rpx;
background: #EBEBEB;
color: #999999;
font-size: 28rpx;
padding: 0 20rpx;
z-index: 9999;
}