[抚顺seo公司询问久澳]微信小程序开发之好友列表字母列表跳转对应位置

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

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

　　前言：

　　在小程序里实现微信好友列表点击右侧字母列表跳转对应位置效果。写了个demo，核心部分很简单，所以没多少注释，如果遇到问题就加群问我吧★▷◇。[抚顺seo公司询问久澳]

　　核心技术点▼★•◁：
 

　　1-=、[南京seo网络优化公司]微信小程序功能实现：上滑加载下拉刷新。小程序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}}" style="★•◆;height:{{height}}px;">
 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}}" style="height: {{letter_height}}px☆•▲□;">{{item}}
 class="tips" hidden="▷▲▽☆;{{hide}}"◇▼△;>{{curView}}

　　js代码•▽-▷：
 

　　index…◇.js

//index.js
//获取应用实例
const app = getApp()
Page({
 data: {
 letter_list: [],
 info_list: [],
 hide: true,
 active: false△▪,
 toView□•: 'A'△▷◇-;▲☆☆,
 curView: 'A'…★;,
 letter_height••: 18
 }☆★▪☆,
 onLoad◆▽: function () {
 this.active = false◁▼◇▷;
 this.timer = null▲-…;
 var letter_list = ['A'★•△;▼■▷, 'B'=◁, 'C'▲…, 'D', 'E'▼▼▼, 'F', '-☆;G', '●=•;H'△■▽;, 'I'●•▷;●…☆, 'J'■=▽◇, 'K', 'L'☆▲▼;●◁=▪, 'M', '•…●;N'★▲;△△▽, 'O'•▲▷, 'P'▪=◁…;, 'Q'◇▷=;△-, 'R'-◁◇-;, 'S'△•, '★◁;T'★◇◁;, 'U'△•;•★△, 'V'=-▪;■○☆, '◇=•…;W', 'X', 'Y', '▪=☆●;Z'=▲;];
 var info_list = [];
 for (var i = 0; i < 26; i++) {
 var obj = {};
 obj.id = letter_list☆▪▼▷;
 obj.desc = '这是一个用于测试的DEMO。1.目标是用于实现微信好友列表的点击首字母跳转到对应好友位置。2○▷◁•.目标是用于实现微信好友列表的点击首字母跳转到对应好友位置';
 info_list.push(obj);
 }
 this.setData({
 height: app◇▽.globalData□◁.height,
 info_list: info_list,
 letter_list…•: letter_list,
 sHeight: 100 * 26 + 25
 })○△▼◁;
 },
 start◆○◁◁: function (e) {
 this.setData({
 active: true,
 hide: false
 })
 },
 end◆…◆: function (e) {
 if (this.timer) {
 clearTimeout(this…○●▼.timer);
 this◁○★☆.timer = null;
 }
 var moveY = e.changedTouches["0"●◆■;].clientY - 18, that = this;
 var curIndex = parseInt(moveY / 18);
 var view = this.data.letter_list[curIndex]●☆◇◆;
 this.setData({
 toView: view,
 active: false
 });
 if (-•★!this.timer) {
 this△◇☆.timer = setTimeout(function () {
 that.setData({
 hide: true
 })
 that.timer = null;
 }, 1000);
 }
 },
 move: function (e) {
 var moveY = e.changedTouches["0"].clientY - 18☆▷■▷;
 var curIndex = parseInt(moveY / 18)◇◁;
 var view = this◆□…▪.data.letter_list[curIndex];
 this.setData({
 curView: view
 })
 },
 down○□: function (e) {
 if (this.timer) {
 clearTimeout(this.timer)○▼;
 this.timer = null;
 }
 var index = e.currentTarget.dataset.index,
 that = this■□■;
 if (index ▽■○!= 999) {
 var view = this.data.letter_list[index];
 this.setData({
 toView△◁•▲: view,
 curView■□○: view
 })
 } else {
 this.setData({
 toView: '•▪;A'□◆○,
 curView: '☆'●▷;
 })
 }
 if (!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○◆;
 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中文网！桦甸市小程序开发哪家好

　　相关推荐：

　　微信小程序实现的贪吃蛇游戏【附源码】
 

　　关于微信小程序
生命周期的介绍
 

　　微信小程序中蓝牙的链接
 

　　以上就是微信小程序开发之好友列表字母列表跳转对应位置的详细内容▽▼•◁，更多请关注久澳传媒编程栏目其它相关文章▼▷◆…！