위 챗 애플 릿 이 item 을 누 르 면 화면 중간 위치 로 스크롤 합 니 다.

1.수요

고양이 눈 영화 같은 거 하고 싶 어 요.선착순 이 화면 중간 으로 자동 으로 굴 러 가 는 효과.
그림 과 같이 최종 효과 입 니 다. 
2.분석
이런 효 과 를 실현 하 는 방법 은 세 가지 가 있다.
1.네 이 티 브 CSS+js 직접 사용 하기;
2.swiper 를 사용 하여 한 화면 에 여러 아 이 템 을 표시 하고 아 이 템 을 누 르 면 자동 으로 가운데 로 굴 러 갑 니 다.
3.위 챗 의 scroll-view 를 JS 에 맞 춰 구현
최종 적 으로 세 번 째 방안 을 선택 한 것 을 따 져 보 았 습 니 다.위 챗 자체 가 가지 고 있 는 방법 과 비교 하면 유창 하고 swiper 는 비대 하 며 원생 이 라면 번 거 롭 고 고려 해 야 할 호환성 문제 가 많 습 니 다.
3.코드
wxml

<view class="items-box">
  <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%" bindscroll="scrollMove" scroll-left='{{scrollLeft}}' scroll-with-animation="true">
  <view class="scroll-wrapper">
   <view id="scroll-item-{{index}}" class="item-pic {{selectItemIndex==index?'on':''}}" wx:for="{{ticketDetails}}" wx:key="index" bindtap="selectItem" data-index="{{index}}" data-name="{{item.TicketTitle}}" data-ticketid='{{item.TicketId}}'>
   <image src='{{imgUrl}}{{item.TicketPostImg}}'></image>
   </view>
  </view>
  </scroll-view>
</view>
<view class="item-name" hidden="{{!selectItemName}}">{{selectItemName}}</view>

wxss

.items-box .item-pic image {
 width: 90rpx;
 height: 120rpx;
}
 
.items-box .item-pic.on image {
 width: 110rpx;
 height: 148rpx;
 border: 4rpx solid #2bb7b3;
 box-sizing: border-box;
}
 
.items-box .item-pic {
 margin: 0 20rpx;
}
.items-box .item-pic:first-child{
 padding-left: 300rpx
}
.items-box .item-pic:last-child{
 padding-right: 300rpx
}
.item-name {
 padding: 18rpx 0;
 background-color: #fff;
 font-size: 24rpx;
 font-weight: 500;
 color: #232324;
 text-align: center;
}
 
.items-box .scroll-wrapper {
 align-items: flex-end;
 padding: 32rpx 0 0 0;
}
 
.items-box .scroll-view_H {
 border: none;
 background-color: #edeff1;
}

js

data:{
 moveParams: {
  scrollLeft: 0
 }
} 
 
getRect(ele) { 
//         ,ele    id
 var that = this;
 //    
 wx.createSelectorQuery().select(ele).boundingClientRect(function (rect) {
  console.log(rect)
  let moveParams = that.data.moveParams;
  moveParams.subLeft = rect.left;
  moveParams.subHalfWidth = rect.width / 2;
  that.moveTo();
 }).exec()
 },
 moveTo: function () {
 let subLeft = this.data.moveParams.subLeft;
 let screenHalfWidth = this.data.moveParams.screenHalfWidth;
 let subHalfWidth = this.data.moveParams.subHalfWidth;
 let scrollLeft = this.data.moveParams.scrollLeft;
 
 let distance = subLeft - screenHalfWidth + subHalfWidth;
 
 scrollLeft = scrollLeft + distance;
 
 this.setData({
  scrollLeft: scrollLeft
 })
 },
 scrollMove(e) {
 let moveParams = this.data.moveParams;
 moveParams.scrollLeft = e.detail.scrollLeft;
 this.setData({
  moveParams: moveParams
 })
 },
 //    
 selectItem: function (e) {
 let ele = 'scroll-item-' + e.currentTarget.dataset.index
 this.getRect('#' + ele);
 },

먼저 화면의 너 비 를 가 져 오고 클릭 요소 의 너 비 를 가 져 옵 니 다.스크롤 할 거 리 를 계산 한 다음 scroll-left='{scrollLeft}'을 변경 하면 됩 니 다.
위 챗 에서 요소 의 너비 와 높이 를 얻 는 방법

wx.createSelectorQuery().select(ele).boundingClientRect(function (rect) {

}).exec()

https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html
총결산
위 챗 애플 릿 이 아 이 템 을 누 르 면 화면 가운데 로 굴 러 가 는 글 을 소개 합 니 다.위 챗 애플 릿 아 이 템 이 화면 가운데 로 굴 러 가 는 내용 에 대해 서 는 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!