實現微信好友列表點擊右側字母列表跳轉對應位置效果 - 新聞資訊 - 雲南小程序開發|雲南軟件開發|雲南網站建設-昆明融晨信息技術有限公司

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不(bù)管是(shì)網站,軟件還是(shì)小程序,都要(yào / yāo)直接或間接能爲(wéi / wèi)您産生價值,我們在(zài)追求其視覺表現的(de)同時(shí),更側重于(yú)功能的(de)便捷,營銷的(de)便利,運營的(de)高效,讓網站成爲(wéi / wèi)營銷工具,讓軟件能切實提升企業内部管理水平和(hé / huò)效率。優秀的(de)程序爲(wéi / wèi)後期升級提供便捷的(de)支持!

您當前位置>首頁 » 新聞資訊 » 小程序相關 >

實現微信好友列表點擊右側字母列表跳轉對應位置效果

發表時(shí)間:2021-4-22

發布人(rén):融晨科技

浏覽次數:110

這(zhè)個(gè)月,比較忙,遇到(dào)某位同學問我一個(gè)問題:在(zài)小程序裏實現微信好友列表點擊右側字母列表跳轉對應位置效果。寫了(le/liǎo)個(gè)demo,核心部分很簡單,所以(yǐ)沒多少注釋,如果遇到(dào)問題就(jiù)加群問我吧。

核心技術點: 
1、小程序scroll-view組件的(de)scroll-into-view, scroll-with-animation. scroll-y屬性。 
2、小程序的(de)touch事件的(de)應用。 
3、Js定時(shí)器的(de)應用。

view頁面代碼:

index.wxml

  1. <!--index.wxml-->
  2. <view class="container" scroll-y>
  3. <scroll-view class="info" id="info" scroll-with-animation scroll-y scroll-top="200" scroll-into-view="{{toView}}" style="height:{{height}}px;">
  4. <view class="iitem" id="{{item.id}}" wx:for="{{info_list}}" wx:key="1">

相關案例查看更多