WeChat applet development friend list alphabet list jumps to the corresponding position-Mini Program Development-php.cn

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

不言

Release： 2018-06-22 16:56:36

Original

3298 people have browsed it

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 ? &#39;active&#39;: &#39;&#39;}}" bindtouchstart=&#39;start&#39; bindtouchmove=&#39;move&#39; bindtouchend=&#39;end&#39;>
   class="litem" bindtap=&#39;down&#39; data-index="999">☆
   class="litem" wx:for="{{letter_list}}" bindtap=&#39;down&#39; wx:for-index="index" wx:key="2" data-index="{{index}}" style="height: {{letter_height}}px;">{{item}}
 
 class="tips" hidden="{{hide}}">{{curView}}

Copy after login

js code:

index.js

//index.js
//获取应用实例
const app = getApp()
Page({
 data: {
  letter_list: [],
  info_list: [],
  hide: true,
  active: false,
  toView: &#39;A&#39;,
  curView: &#39;A&#39;,
  letter_height: 18
 },
 onLoad: function () {
  this.active = false;
  this.timer = null;
  var letter_list = [&#39;A&#39;, &#39;B&#39;, &#39;C&#39;, &#39;D&#39;, &#39;E&#39;, &#39;F&#39;, &#39;G&#39;, &#39;H&#39;, &#39;I&#39;, &#39;J&#39;, &#39;K&#39;, &#39;L&#39;, &#39;M&#39;, &#39;N&#39;, &#39;O&#39;, &#39;P&#39;, &#39;Q&#39;, &#39;R&#39;, &#39;S&#39;, &#39;T&#39;, &#39;U&#39;, &#39;V&#39;, &#39;W&#39;, &#39;X&#39;, &#39;Y&#39;, &#39;Z&#39;];
  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);
  }
 }
})

Copy after login

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;

Copy after login

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!