This article shares the specific code for implementing address book functions of WeChat applets for your reference. The specific content is as follows
WeChat applets need to use scroll-view tags to imitate the address book function
Idea: First, you need to get the height of the data style you need to display (this requires an API provided by WeChat to complete it. Because the mini program does not have a DOM tree structure, you can see the detailed records in my previous article how to get the width and height of the element you want.), and then combine it into a height array (for easy judgment based on this array later), and then get the scroll distance. After using these two comparisons to judge, you can get the letters selected on the right when scrolling, and then use the scroll-into-view attribute of the scroll-view tag to click on the navigation letter on the right, and scroll to the corresponding left list to the corresponding position. (Everyone has different ideas, and the solution and understanding are unlikely to be the same. So, just follow your own mind) Without further ado, please add the code!
wxml
<view>
<!-- The content part of the list on the left -->
<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="{{}}" data-id='{{}}'>
<view class="address_top">{{}}</view>
<view wx:for="{{}}" wx:for-item="bdiet" wx:key="{{index}}">
<navigator url='./wholeDetail?id={{}}' hover-class='none'>
<view class="address_bottom" data-id='{{}}'>{{bdiet.wiki_name}}</view>
</navigator>
</view>
</view>
</scroll-view>
<!-- Right letter navigation -->
<view class="orientation_region">
<view class="orientation">#</view>
<block wx:for="{{listMain}}" wx:key="{{}}">
<view class="orientation_city {{isActive== ? 'active':'' }}" bindtap="scrollToViewFn" data->
{{}}
</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: 1rpx #e5e5e5 solid;
border-bottom: 1rpx #e5e5e5 solid;
padding: 0 20rpx;
align-items: center;
display: -webkit-flex;
}
.address_top {
height: 56rpx;
line-height: 56rpx;
background: #ebebeb;
color: #384857;
font-size: 28rpx;
padding: 0 20rpx;
}
.address_bottom {
height: 88rpx;
line-height: 88rpx;
background: #fff;
color: #000;
font-size: 28rpx;
border-bottom: 1rpx #e5e5e5 solid;
margin: 0 32rpx;
}
.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: 1rpx solid #e5e5e5;
color: #000;
margin-right: 20rpx;
}
.add_citying {
width: 228rpx;
height: 60rpx;
line-height: 60rpx;
text-align: center;
border: 1rpx solid #09bb07;
color: #09bb07;
margin-right: 20rpx;
}
.orientation {
white-space: normal;
display: inline-block;
width: 45rpx;
height: 50rpx;
font-size: 28rpx;
font-weight: bold;
color: rgb(88, 87, 87);
text-align: center;
}
.orientation_region {
padding: 5px 0px;
width: 45rpx;
font-size: 20rpx;
position: fixed;
top: 50%;
right: 6rpx;
transform: translate(0, -50%);
background: rgb(199, 198, 198);
border-radius: 10px;
}
.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: #999;
font-size: 28rpx;
padding: 0 20rpx;
z-index: 9999;
}
.fixed-title {
color: #2cc1d1;
}
The core is here (JS logic)
Page({
/**
* Initial data of the page
*/
data: {
isActive: null,
listMain: [],
toView: 'inToView0',
oHeight: [],
},
//Click the letter navigation positioning trigger scrollToViewFn: function (e) {
var that = this;
var _id = ;
var scrollTop = ;
('Click to get Id', _id)
('Click to get the scroll distance', scrollTop)
for (var i = 0; i < ; i++) {
if ([i].key === _id) {
({
toView: 'inToView' + [i].key
});
break
}
}
},
// Triggered when the page slides onPageScroll: function (e) {
var that = this;
({
scrollTop:
})
var scrollTop = ;
(scrollTop);
for(var i =0; i< ; i++){
if (scrollTop >= 0 && scrollTop + 20 < [0].height){
({
isActive: [0].key
});
} else if (scrollTop + 20 <= [i].height) {
({
isActive: [i].key
});
return false;
}
}
},
// Process data format and obtain group height getBrands: function () {
var that = this;
var url = config.DOMAIN_API.wikiWholeList,
data = {};
//Start a get request, use it as follows: (url, data).then((res) => { //Successfully processed ({
listMain: res
});
var number = 0;
for (let i = 0; i < ; i++) {
().select('#inToView' + [i].id).boundingClientRect(function (rect) {
number = + number;
var newArry = [{ 'height': number, 'key': , "name": [i].name }]
({
oHeight: (newArry)
})
}).exec();
};
}).catch((errMsg) => { //Error processing has been handled uniformly, it is not necessary here (errMsg);
});
},
onLoad: function (options) {
var that = this;
()
();
},
})
The above are all the steps to do this imitation address book function, which are similar to other ones.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.