微信小程序开发好友列表信列表跳转到相应位置。

本文主要介绍微信小程序开发中好友列表字母列表跳转对应位置的相关信息。我希望这篇文章能帮助你实现这个功能。有需要的朋友可以参考一下。

微信小程序开发好友列表信列表跳转到相应位置。

前言:

在小程序中实现了点击微信好友列表右侧字母列表跳转到相应位置的效果。我写了一个demo，核心部分很简单，就不多评论了。遇到什么问题请加群问我。

技术要点:

1.scroll-into-view，scroll -带有-animation.scroll-y属性的小程序scroll-view组件。2.小程序的触摸事件的应用。3.Js定时器的应用。

查看页面代码:

index.wxml

class = & quot容器& quotscroll -y & gt；class = & quot信息& quotid = & quot信息& quotscroll -with -动画scroll -y scroll -top = & quot；200 & quotscroll -into -view = & quot；{ { toView } } & quotstyle = & quot高度:{ { height } } px"& gtclass = & quotiitem & quotid = & quot{ { item.id } } & quotwx:for = & quot；{ { info _ list } } & quotwx:key = & quot；1 & quot& gt{{item.id}}。{ { item.desc } } class = & quot字母{{active == true？'主动& # 039；: ''} } & quotbindtouchstart = & # 039开始& # 039；bindtouchmove = & # 039动& # 039；bindtouchend = & # 039end & # 039& gtclass = & quot诉讼& quotbindtap = & # 039下来& # 039；data -index = & quot；999 & quot& gt☆class = & quot；诉讼& quotwx:for = & quot；{ { letter _ list } } & quotbindtap = & # 039下来& # 039；wx:for -index = & quot；索引& quotwx:key = & quot；2 & quotdata -index = & quot；{ { index } } & quotstyle = & quot身高:{ { letter _ height } } px"& gt{ { item } } class = & quot提示& quothidden = & quot{ { hide } } & quot& gt{{curView}}

Js代码:

索引. js

//index.js//获取应用实例constapp = getapp()page({ data:{ letter _ list:[]，info _ list: []，hide: true，active: false，to view:& # 039；一& # 039；，曲线视图:& # 039；一& # 039；，letter_height: 18 }，onLoad:function(){ this . active = false；this.timer = nullvar letter _ list =[& # 039；一& # 039；, 'B& # 039；, 'C & # 039, 'D & # 039, 'E & # 039, '福& # 039；, 'G & # 039, 'H & # 039, '我& # 039；, 'J & # 039, 'K & # 039, 'L & # 039, 'M & # 039, 'N & # 039, 'O & # 039, 'P & # 039, 'Q & # 039, 'R & # 039, 'S & # 039, 'T & # 039, 'U & # 039, 'V & # 039, 'W & # 039, 'X & # 039, 'Y & # 039, 'Z & # 039];var info _ list =[]；for(var I = 0；我& lt26;i++){ var obj = { }；obj.id = letter _ listobj.desc = & # 039这是一个测试演示。1.目标是点击微信好友列表的首字母跳转到对应的好友位置。2.目标是点击微信好友列表的首字母跳转到对应的好友位置& # 039；；info _ list . push(obj)；} this . setdata({ height:app . global data . height，info_list: info_list，letter_list: letter_list，she height:100 * 2zhujipindao25 })；}，start:function(e){ this . setdata({ active:true，hide: false }) }，end:function(e){ if(this . timer){ clear time out(this . timer)；this.timer = null} var moveY = e . changed touches[& quot；0 & gt；].clientY - 18，那个=这个；var curIndex = parse int(moveY/18)；var view = this . data . letter _ list[curIndex]；this.setData({ toView: view，active:false })；如果(！this . timer){ this . timer = setTimeout(function(){ that . setdata({ hide:true })that . timer = null；}, 1000);} }，move:function(e){ var moveY = e . changed touches[& quot；0 & gt；].客户群-18；var curIndex = parse int(moveY/18)；var view = this . data . letter _ list[curIndex]；this.setData({ curView: view }) }，down:function(e){ if(this . timer){ clear time out(this . timer)；this.timer = null} var index = e . current target . dataset . index，即= this如果(索引！= 999){ var view = this . data . letter _ list[index]；this.setData({ toView: view，curView:view })} else { this . setdata({ to view:& # 039；一& # 039；，曲线视图:& # 039；☆'}) }如果(！this . timer){ this . timer = setTimeout(function(){ that . setdata({ hide:true })；that.timer = null}, 1000);} }})

样式部分

index.wxss

/* * index . wxss * */text { font -weight:bold }。letter { font -size:12px；宽度:24px身高:100%；位置:固定；右:0；top:0；Z-指数:+999；}.诉讼{宽度:24px高度:18pxline -高度:18pxtext-align:居中；}.info { font -size:12px；text -align:justify；溢出:隐藏；}.主动{后台:rgba(0，0，0，0.2)；}.iitem { padding:10 rpx 10 rpx；margin -bottom:10 rpx；边框-半径:8rpx背景:rgba(222，222，222，0.2)；box -大小调整:border -box；}.tips {宽度:40px高度:40px背景:rgba(0，0，0，0.4)；font -大小:20pxtext-align:居中；line -高度:40px颜色:# fff位置:固定；左:50%；top:50%；边距:-20px；Z-指数:+999；border -半径:10rpx