如何实现微信好友列表点击字母跳转对应位置

发布日期： 2018-05-17 阅读量： 作者： 网络

微信上有一种功能吗，就是点击列表字母就能跳转到相应位置，本文主要介绍微信小程序开发之好友列表字母列表跳转对应位置的相关资料,希望通过本文能帮助到大家让大家实现这样的功能，需要的朋友可以参考下，希望能帮助到大家。

微信小程序开发之好友列表字母列表跳转对应位置

前言：

在小程序里实现微信好友列表点击右侧字母列表跳转对应位置效果。写了个demo，核心部分很简单，所以没多少注释，如果遇到问题就加群问我吧。

核心技术点：

1、小程序scroll-view组件的scroll-into-view， scroll-with-animation. scroll-y属性。
2、小程序的touch事件的应用。
3、Js定时器的应用。

view页面代码：

index.wxml

 class="container" scroll-y&gt;
  class="info" id="info" scroll-with-animation scroll-y scroll-top="200" scroll-into-view="{{toView}}" style="height:{{height}}px;"&gt;
   class="iitem" id="{{item.id}}" wx:for="{{info_list}}" wx:key="1"&gt;
   {{item.id}} . {{item.desc}}
  
 
  class="letter {{active == true ? 'active': ''}}" bindtouchstart='start' bindtouchmove='move' bindtouchend='end'&gt;
   class="litem" bindtap='down' data-index="999"&gt;☆
   class="litem" wx:for="{{letter_list}}" bindtap='down' wx:for-index="index" wx:key="2" data-index="{{index}}" style="height: {{letter_height}}px;"&gt;{{item}}
 
 class="tips" hidden="{{hide}}"&gt;{{curView}}

# 点击 # 列表 # 好友

下一篇: php替换数组的元素替换

如何实现微信好友列表点击字母跳转对应位置

随便看看