实现微信好友列表点击右侧字母列表跳转对应位置效果 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

实现微信好友列表点击右侧字母列表跳转对应位置效果

发表时间:2021-4-22

发布人:葵宇科技

浏览次数:78

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

核心技术点: 
1、小程序scroll-view组件的scroll-into-view, scroll-with-animation. scroll-y属性。 
2、小程序的touch事件的应用。 
3、Js定时器的应用。

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">