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

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

前言:

在小程序里实现微信好友列表点击右侧字母列表跳转对应位置效果。写了个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;

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

    无相关信息
最新资讯
MCN选择综合症:短视频内容放谁家有钱赚?

MCN选择综合症:短视频

大量推陈出新的泛娱乐平台,让用户开始产生了“选择困难
阿里腾讯投资布局梳理:一级市场的钱会去哪里?

阿里腾讯投资布局梳理

国内风险投资市场经过20年的发展,已经从陪伴长跑型企业
我是华帝,法国队夺冠我依然不慌

我是华帝,法国队夺冠我

世界杯已然落幕,但“华帝退款”的故事正在上演,下次,他们
知乎、马蜂窝,你们要不和华帝学学营销?

知乎、马蜂窝,你们要不

无论从哪个维度来看,华帝在这一波世界杯营销中都赢了。
扎克伯格的AI芯片野心:高调挖角谷歌 疯狂招人

扎克伯格的AI芯片野心

对于任何一个业务体量巨大的科技公司而言,专为自己业务
当一名被网红“包养”的调音师,是什么样的感觉?

当一名被网红“包养”

网红经济归根到底是注意力经济。然而,当网红们都在拼颜
最新文章
Angular2进阶之如何避免Dom误区

Angular2进阶之如何避

这篇文章主要介绍了Angular2进阶之如何避免Dom误区,小
使用FileReader API创建Vue文件阅读器组件

使用FileReader API创

这篇文章主要介绍了使用FileReader API创建一个Vue的
react 实现页面代码分割、按需加载的方法

react 实现页面代码分

本篇文章主要介绍了react 实现页面代码分割、按需加载
Vue项目分环境打包的实现步骤

Vue项目分环境打包的

这篇文章主要介绍了Vue项目如何分环境打包,实现方法大
vue 组件中slot插口的具体用法

vue 组件中slot插口的

这篇文章主要介绍了vue 中slot 的具体用法,包括子组件
JS遍历DOM文档树的方法实例详解

JS遍历DOM文档树的方

这篇文章主要介绍了JS遍历DOM文档树的方法,结合实例形