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

发布日期： 2018-06-22 阅读量： 作者： 网络

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

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

前言：

在小程序里实现微信好友列表点击右侧字母列表跳转对应位置效果。写了个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}}

# 小程序开发之好友列表字母列表跳转对应位置 # 小程序好友字母列表的实现

下一篇: python抢演唱会门票脚本

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

随便看看