這篇文章主要講解了微信小程序仿通訊錄功能的方法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。

10年積累的成都網站設計、網站制作經驗，可以快速應對客戶對網站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網絡服務。我雖然不認識你，你也不認識我。但先網站策劃后付款的網站建設流程，更有兩當免費網站建設讓你可以放心的選擇與我們合作。

微信小程序模仿通訊錄功能需要用到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&#63;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 &#63; 'active':'' }}" bindtap="scrollToViewFn" data-id="{{item.id}}">
  {{item.name}}
  </view>
 </block>
 </view>
</view>

網頁名稱：微信小程序仿通訊錄功能的方法-創新互聯
路徑分享：http://vcdvsql.cn/article10/dgohdo.html

成都網站建設公司_創新互聯，為您提供網站建設、品牌網站設計、小程序開發、網站維護、企業網站制作、用戶體驗

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯