微信小程序如何實現(xiàn)點擊item使其滾動到屏幕中間位置

這篇文章將為大家詳細講解有關微信小程序如何實現(xiàn)點擊item使其滾動到屏幕中間位置，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

1.需求

想做類似貓眼電影選場次會自動滾動到屏幕中間的效果

如圖是最終效果 

2.分析

實現(xiàn)這種效果的方法有三種：

1.直接使用原生CSS+js;

2.使用swiper,一屏顯示多個item,點擊item會自動滾動到中間

3.使用微信的scroll-view配合JS實現(xiàn)

權衡了一下最終選擇了第三個方案，比較是微信自帶的方法，使用起來會比較流暢，swiper的話會比較臃腫，原生的話就比較麻煩，需要考慮的兼容問題比較多。

3.代碼

wxml

<view class="items-box">
  <scroll-view class="scroll-view_H" scroll-x="true"  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;
 //節(jié)點查詢
 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()

關于“微信小程序如何實現(xiàn)點擊item使其滾動到屏幕中間位置”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。