WeChat 친구 목록에서 문자를 클릭하면 해당 위치로 이동하는 방법

위챗에는 목록에 있는 문자를 클릭하면 해당 위치로 이동하는 기능이 있나요? 이번 글에서는 친구 목록 문자 목록의 위챗 애플릿 개발 관련 정보를 중심으로 해당 위치로 이동하는 기능이 있나요? 이 글이 모든 사람이 깨닫는 데 도움이 되기를 바랍니다. 이 기능이 필요한 친구들은 모두에게 도움이 되기를 바랍니다.

WeChat 애플릿 개발: 친구 목록 편지 목록이 해당 위치로 점프

서문:

애플릿에서 WeChat 친구 목록 오른쪽에 있는 편지 목록을 클릭하면 이동하는 효과를 실감해보세요. 해당 위치. 데모를 작성했습니다. 핵심 부분은 매우 간단하므로 의견이 많지 않습니다. 문제가 발생하면 그룹에 가입하여 문의하십시오.

핵심 기술 포인트:

1. 미니 프로그램 스크롤 보기 구성 요소의 스크롤 보기 및 애니메이션 포함 스크롤 속성.
2. 미니프로그램의 터치이벤트 적용.
3.JS 타이머 적용.

페이지 보기 코드:

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 = &#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);
  }
 }
})

스타일 부분

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;

관련 추천:

WeChat apple t 스크롤 뷰 컨테이너 방법

WeChat 애플릿의 URL과 토큰을 설정하는 방법

Thinkphp5 WeChat 애플릿의 사용자 정보 인터페이스를 얻는 방법

위 내용은 WeChat 친구 목록에서 문자를 클릭하면 해당 위치로 이동하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!