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

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

前言:

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

核心技术点:

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

view页面代码:

index.wxml

 scroll-y>
  id="info" scroll-with-animation scroll-y scroll-top="200" scroll-into-view="{{toView}}">
   id="{{item.id}}" wx:for="{{info_list}}" wx:key="1">
   {{item.id}} . {{item.desc}}
  
 
  bindtouchstart='start' bindtouchmove='move' bindtouchend='end'>
   bindtap='down'>☆
   wx:for="{{letter_list}}" bindtap='down' wx:for-index="index" wx:key="2">{{item}}
 
 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;

如有疑问请留言或者到本站社区交流讨论,本站关于微信小程序的文章还有很多,希望大家搜索查阅,感谢阅读,希望能帮助到大家谢谢大家对本站的支持!

    无相关信息
最新资讯
贝索斯卖出逾45万股亚马逊股票 (mm)套(gg)现逾14亿美元

贝索斯卖出逾45万股亚

8月3日,亚马逊CEO贝索斯卖出45.4338万股亚马逊股票,均价
Twitter又曝新漏洞:Android用户私人数据面临泄露风险

Twitter又曝新漏洞:And

Twitter周三披露了一个新的安全漏洞,这个漏洞可能导致
“股神”巴菲特业绩翻身记:一只苹果的“神助攻”

“股神”巴菲特业绩翻

事实上,苹果公司股价飙涨,也令伯克希尔哈撒韦的科技股持
四大行正在内测数字货币App 可凭手机号完成转账

四大行正在内测数字货

数位国有大行人士向21世纪经济报道记者表示,正在深圳等
阿里入局汽车后市场 本地生活战事再升级

阿里入局汽车后市场

在本地生活服务领域,阿里巴巴正在从汽车后市场切入,借此
消息称台积电和富士康也有意投资ARM 苹果已放弃

消息称台积电和富士康

消息称,台积电和富士康表示对收购ARM公司有兴趣。
最新文章
Vue实现图片与文字混输效果

Vue实现图片与文字混

用多了 JQuery ,习惯了使用JQuery的API操作 DOM ,几乎忘
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

Vue实现点击当前元素

这篇文章主要介绍了Vue实现点击当前元素以外的地方隐
Vue实现验证码功能

Vue实现验证码功能

这篇文章主要为大家详细介绍了Vue实现验证码功能,文中
JS实现的雪花飘落特效示例

JS实现的雪花飘落特效

这篇文章主要介绍了JS实现的雪花飘落特效,结合实例形
微信小程序实现图片压缩

微信小程序实现图片压

这篇文章主要为大家详细介绍了微信小程序实现图片压缩
JavaScript实现京东放大镜效果

JavaScript实现京东放

这篇文章主要为大家详细介绍了JavaScript实现京东放大