WeChat applet development friend list alphabet list jumps to the corresponding position

This article mainly introduces the relevant information about the jump corresponding position of the friend list letter list in the development of WeChat applet. I hope this article can help everyone realize such a function. Friends who need it can refer to it

WeChat applet development friend list letter list jump corresponding position

Foreword:

Implement WeChat friend list click in the applet The letter list on the right jumps to the corresponding position effect. I wrote a demo. The core part is very simple, so there are not many comments. If you encounter any problems, please join the group and ask me.

Core technical points:

1. The scroll-into-view and scroll-with-animation. scroll-y attributes of the scroll-view component of the mini program.
2. Application of touch event of mini program.
3. Application of Js timer.

view page code:

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 code:

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 = &#39;这是一个用于测试的DEMO。1.目标是用于实现微信好友列表的点击首字母跳转到对应好友位置。2.目标是用于实现微信好友列表的点击首字母跳转到对应好友位置&#39;;
   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: &#39;A&#39;,
    curView: &#39;☆&#39;
   })
  }
  if (!this.timer) {
   this.timer = setTimeout(function () {
    that.setData({
     hide: true
    });
    that.timer = null;
   }, 1000);
  }
 }
})

Style section

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;

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

The Snake Game implemented by WeChat Mini Program [with source code]

About WeChat Mini Program Introduction to the life cycle

Bluetooth link in WeChat applet

##

The above is the detailed content of WeChat applet development friend list alphabet list jumps to the corresponding position. For more information, please follow other related articles on the PHP Chinese website!