快捷導(dǎo)航

微信小程序仿通訊錄功能

更新時(shí)間：2020年04月09日 11:39:44 作者：默認(rèn)S

這篇文章主要為大家詳細(xì)介紹了微信小程序仿通訊錄功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)通訊錄功能的具體代碼，供大家參考，具體內(nèi)容如下

微信小程序模仿通訊錄功能需要用到scroll-view標(biāo)簽

思路：首先需要獲取到你所需要展示的數(shù)據(jù)樣式的高度(這就需要用到微信給我們提供的一個(gè)API來完成了，因?yàn)樾〕绦蚴菦]有DOM樹結(jié)構(gòu)的，這個(gè)可以去看我的前一篇里面有詳細(xì)的記載怎么獲取想要的元素的寬高。)，然后組合成一個(gè)高度數(shù)組(便于后面根據(jù)這個(gè)數(shù)組進(jìn)行判斷)，再獲取滾動(dòng)距離，用這兩個(gè)比較判斷之后就可以得出滾動(dòng)的時(shí)候右邊選中的字母了，然后再利用scroll-view標(biāo)簽的scroll-into-view屬性來實(shí)現(xiàn)點(diǎn)擊右側(cè)導(dǎo)航字母，對(duì)應(yīng)的左側(cè)列表滾動(dòng)到相應(yīng)的位置。(每個(gè)人的想法不同，解法和理解也不太可能相同。所以，按自己的心走就好了)，話不多說，上代碼！

wxml

<view>
 <!-- 左側(cè)列表內(nèi)容部分 -->
 <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>
 <!-- 右側(cè)字母導(dǎo)航 -->
 <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;
}
 
.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({
 /** 
 * 頁面的初始數(shù)據(jù) 
 */
 data: {
 isActive: null,
 listMain: [],
 toView: 'inToView0',
 oHeight: [],
 },
 //點(diǎn)擊右側(cè)字母導(dǎo)航定位觸發(fā)
 scrollToViewFn: function (e) {
 var that = this;
 var _id = e.target.dataset.id;
 var scrollTop = that.data.scrollTop;
 console.log('點(diǎn)擊獲取Id', _id)
 console.log('點(diǎn)擊獲取滾動(dòng)距離', 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
  }
 }
 },
 // 頁面滑動(dòng)時(shí)觸發(fā)
 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;
  }
 }
 },
 // 處理數(shù)據(jù)格式，及獲取分組高度
 getBrands: function () {
 var that = this;
 var url = config.DOMAIN_API.wikiWholeList,
  data = {};
 //發(fā)起get請(qǐng)求,使用方式如下：
 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) => { //錯(cuò)誤處理，已統(tǒng)一處理，此處可以不需要
  console.log(errMsg);
 });
 
 },
 onLoad: function (options) {
 var that = this;
 wx.hideShareMenu()
 that.getBrands();
 },
})

以上就是做這個(gè)仿通訊錄功能的所有步驟，和別的大同小異。

為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: