⼩程序仿通讯录功能
本⽂实例为⼤家分享了⼩程序实现通讯录功能的具体代码，供⼤家参考，具体内容如下
⼩程序模仿通讯录功能需要⽤到scroll-view标签
思路：⾸先需要获取到你所需要展⽰的数据样式的⾼度(这就需要⽤到给我们提供的⼀个API来完成了，因为⼩程序是没有DOM树结构的，这个可以去看我的前⼀篇⾥⾯有详细的记载怎么获取想要的元素的宽⾼。)，然后组合成⼀个⾼度数组(便于后⾯根据这个数组进⾏判断)，再获取滚动距离，⽤这两个⽐较判断之后就可以得出滚动的时候右边选中的字母了，然后再利⽤scroll-view标签的scroll-into-view属性来实现点击右侧导航字母，对应的左侧列表滚动到相应的位置。(每个⼈的想法不同，解法和理解也不太可能相同。所以，按⾃⼰的⼼⾛就好了)，话不多说，上代码！
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.name}}</view>
<view wx:for="{{group.list}}" wx:for-item="bdiet" wx:key="{{index}}">
<navigator url='./wholeDetail?id={{bdiet.id}}' hover-class='none'>
<view class="address_bottom" data-id='{{bdiet.id}}'>{{bdiet.wiki_name}}</view>
</navigator>
</view>
</view>
</scroll-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.name}}
</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;
}
.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;
htmlborderposition: 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;
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;
}
核⼼来了(JS逻辑)
Page({
/**
* 页⾯的初始数据
*/
data: {
isActive: null,
listMain: [],
toView: 'inToView0',
oHeight: [],
},
//点击右侧字母导航定位触发
scrollToViewFn: function (e) {
var that = this;
var _id = e.target.dataset.id;
var scrollTop = that.data.scrollTop;
console.log('点击获取Id', _id)
console.log('点击获取滚动距离', scrollTop)
for (var i = 0; i < that.data.oHeight.length; i++) {
if (that.data.oHeight[i].key === _id) {
that.setData({
toView: 'inToView' + that.data.oHeight[i].key
});
break
}
}
},
// 页⾯滑动时触发
onPageScroll: function (e) {
var that = this;
that.setData({
scrollTop: e.detail.scrollTop
})
var scrollTop = that.data.scrollTop;
console.log(scrollTop);
for(var i =0; i< that.data.oHeight.length; i++){
if (scrollTop >= 0 && scrollTop + 20 < that.data.oHeight[0].height){ that.setData({
isActive: that.data.oHeight[0].key
});
} else if (scrollTop + 20 <= that.data.oHeight[i].height) {
that.setData({
isActive: that.data.oHeight[i].key
});
return false;
}
}
},
// 处理数据格式，及获取分组⾼度
getBrands: function () {
var url = config.DOMAIN_API.wikiWholeList,
data = {};
//发起get请求，使⽤⽅式如下：
util.ajaxPost(url, data).then((res) => { //成功处理
that.setData({
listMain: res
});
var number = 0;
for (let i = 0; i < that.data.listMain.length; i++) {
number = rect.height + number;
var newArry = [{ 'height': number, 'key': rect.dataset.id, "name": that.data.listMain[i].name }]
that.setData({
oHeight: that.at(newArry)
})
}).exec();
};
}).catch((errMsg) => { //错误处理，已统⼀处理，此处可以不需要
console.log(errMsg);
});
},
onLoad: function (options) {
var that = this;
wx.hideShareMenu()
},
})
以上就是做这个仿通讯录功能的所有步骤，和别的⼤同⼩异。
为⼤家推荐现在关注度⽐较⾼的⼩程序教程⼀篇：⼩编为⼤家精⼼整理的，希望喜欢。以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论