微信小程序模仿通讯录功能需要用到scroll-view标签
思路：首先需要获取到你所需要展示的数据样式的高度(这就需要用到微信给我们提供的一个API来完成了，因为小程序是没有DOM树结构的，这个可以去看我的前一篇里面有详细的记载怎么获取想要的元素的宽高。)，然后组合成一个高度数组(便于后面根据这个数组进行判断)，再获取滚动距离，用这两个比较判断之后就可以得出滚动的时候右边选中的字母了，然后再利用scroll-view标签的scroll-into-view属性来实现点击右侧导航字母，对应的左侧列表滚动到相应的位置。(每个人的想法不同，解法和理解也不太可能相同。所以，按自己的心走就好了)，话不多说，上代码！
wxml
<view> <!-- 左侧列表内容部分 --> <scroll-view 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}}" data-id='{{group.id}}'> <view>{{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 data-id='{{bdiet.id}}'>{{bdiet.wiki_name}}</view> </navigator> </view> </view> </scroll-view> <!-- 右侧字母导航 --> <view> <view>#</view> <block wx:for="{{listMain}}" wx:key="{{item.id}}"> <view 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; } .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; }
核心来了(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 that = this; 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++) { wx.createSelectorQuery().select('#inToView' + that.data.listMain[i].id).boundingClientRect(function (rect) { number = rect.height + number; var newArry = [{ 'height': number, 'key': rect.dataset.id, "name": that.data.listMain[i].name }] that.setData({ oHeight: that.data.oHeight.concat(newArry) }) }).exec(); }; }).catch((errMsg) => { //错误处理，已统一处理，此处可以不需要 console.log(errMsg); }); }, onLoad: function (options) { var that = this; wx.hideShareMenu() that.getBrands(); }, })
以上就是做这个仿通讯录功能的所有步骤，和别的大同小异。