微信小程序仿通讯录功能微信小程序仿通讯录功能
主要为大家详细介绍了微信小程序仿通讯录功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴
趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现通讯录功能的具体代码，供大家参考，具体内容如下
微信小程序模仿通讯录功能需要用到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;
align-items: center;
display: -webkit-flex;
}
