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

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

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

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

前言：

核心技术点：

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

view页面代码：

index.wxml

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

js代码：

index.js

样式部分

index.wxss

/**index.wxss**/text { font-weight: bold}.letter { font-size: 12px; width: 24px; height: 100%; position: fixed; right: 0; top: 0; z-index: +999;}.litem { width: 24px; height: 18px; line-height: 18px; text-align: center;}.info { font-size: 12px; text-align: justify; overflow: hidden;}.active { background: rgba(0, 0, 0, 0.2);}.iitem { padding: 10rpx 10rpx; margin-bottom: 10rpx; border-radius: 8rpx; background: rgba(222,222,222,0.2); box-sizing: border-box;}.tips { width: 40px; height: 40px; background: rgba(0,0,0,0.4); font-size: 20px; text-align: center; line-height: 40px; color: #fff; position: fixed; left: 50%; top: 50%; margin: -20px; z-index: +999; border-radius: 10rpx;-

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。