本文主要介绍小程序好友(小程序好友在哪里用 怎么用)，下面一起看看小程序好友(小程序好友在哪里用 怎么用)相关资讯。
小程序开发的好友列表字母列表的对应位置。
前言:
在小程序中实现了点击好友列表右侧字母列表跳转到相应位置的效果。我写了一个demo，核心部分很简单，评论不多。有问题请加群问我。
关键技术点:
1.滚动到视图，滚动动画。子视图滚动组件的滚动属性。2、小程序的触摸事件的应用。3.js定时器的应用。
查看页面代码:
index.wxml
class = 集装箱与运输滚动y类= 信息与广告id = 信息与广告带动画的滚动200 滚动进入视图= { { toview } } style = height cho 1-@ . com { { height } } px； class = iitem id = { { item.id } } wx: for = { { info _ list } } wx: key = 1 {{item.id}}。{ item.desc } } class = 字母{{active == true？;activ: ; } } bindtouchstart = 开始 bindtouchmove = 移动 bindtouchend = 结束 class = 诉讼律师和律师bindtap = 羽绒 数据索引= 999 class = 诉讼律师和律师wx: for = { { letter _ list } } bindtap = 羽绒 wx: for-index = 指数和指数wx: k: { { letter _ height } } px； { item } } class = 提示与建议隐藏= { { hide } } {{curview}} js代码:
索引. js
//index.js//获取应用程序实例const app = g: { l:[]，info_list:[]，hid: true，activ: fals: ;a 、curvi: ;a 、l: 18 }、onload:函数{ this.active = falsethis.timer = nullvar letter _ list =[ ;a ， b ;， c ， d ， 测试的演示。1.目标是通过点击好友列表的第一个字母，跳转到相应的好友位置。2.目标是通过点击好友列表的第一个字母跳转到相应的好友位置 ；info _ list . push(obj)；} this . s: app . global data . h: info _ list，l: l: 100 * 26 25 })；}、start:函数(e){ this . setdata({ activ:真，hid:假}) }、:函数(e) { if (this.timer) { clear超时(this . timer)；this.timer = null} var movey = e . changed touches[ 0 ].clienty - 18，那个=这个；var curindex = parse int(movey/18)；var view = this . data . letter _ list[curind:观，activ:假})；如果(！this . timer){ this . timer = settimeout(function{ that . s: tru:函数(e){ var movey = e . changed touches[ 0 ].客户- 18人；var curindex = parse int(movey/18)；var view = this . data . letter _ list[curindex]；this . setdata({ curvi:视图}) }，down:函数(e){ if(this . timer){ clear time out(this . timer)；this.timer = null} var index = e . curr:视图，curvi:视图})} : ;a 、curvi: ; }) }如果(！this . timer){ this . timer = settimeout(function{ that . s: tru: bold }。字母{ font-siz: 12px；width: 24px；h: 100%；position:固定；right: 0；top: 0；z-ind: 999；}.审案法官{ width: 24px；h: 18px；lin: 18px；t:中心；}.信息{ font-siz: 12px；t:辩解道；ov:隐藏；}.活性{ background: rgba(0，0，0，0.2)；}.iit: 10 rpx 10 rpx；margin-bottom: 10 rpx；bord: 8rpx；background: rgba(222，222，222，0.2)；box-sizing:边框；}.温馨提示{ width: 40px；h: 40px；background: rgba(0，0，0，0.4)；font-siz: 20px；t:中心；line-height cho 1-@ .com 40px；color: # fff；position:固定；l: 50%；top: 50%；margin:-20px；z-ind: 999；bord: 10 rpx；如果您有任何问题，请在本网站的社区中留言或讨论。这个网站还有很多关于小程序的文章。我希望你能找到他们。感谢阅读。希望能帮到你，感谢你的支持！
标签:
列出程序位置对应字母
了解更多小程序好友(小程序好友在哪里用 怎么用)相关内容请关注本站点。