微信小程序點擊item使之滾動到屏幕中間位置
更新時間：2020年03月25日 09:38:23 作者：CrazBarry
這篇文章主要介紹了微信小程序點擊item使之滾動到屏幕中間位置,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
1.需求
想做類似貓眼電影選場次會自動滾動到屏幕中間的效果
如圖是最終效果
2.分析
實現(xiàn)這種效果的方法有三種：
1.直接使用原生CSS+js;
2.使用swiper,一屏顯示多個item,點擊item會自動滾動到中間
3.使用微信的scroll-view配合JS實現(xiàn)
權(quán)衡了一下最終選擇了第三個方案，比較是微信自帶的方法，使用起來會比較流暢，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;
//節(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);
},
首先獲取屏幕的寬度，再獲取點擊元素的寬度，計算一下就可以獲得應(yīng)該滾動的距離，再更改scroll-left='{{scrollLeft}}'即可
微信獲取元素寬高的方法
wx.createSelectorQuery().select(ele).boundingClientRect(function (rect) {
}).exec()
https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html
總結(jié)
到此這篇關(guān)于微信小程序點擊item使之滾動到屏幕中間的文章就介紹到這了,更多相關(guān)微信小程序item滾動到屏幕中間內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了用js閉包的方法實現(xiàn)多點標注冒泡,需要的朋友可以參考下2014-05-05
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)淘寶商品圖切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
可以批量獲取文本框名稱的代碼2008-12-12
本文主要分享了js實現(xiàn)清除輸入框內(nèi)的空格的代碼，代碼簡單易懂，需要的朋友一起來看下吧2016-12-12
這篇文章主要介紹了js中數(shù)組的常用方法,結(jié)合實例形式分析了js中的常用數(shù)組方法,如push、concat、pop、splice、reverse、join等功能與用法,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了iframe高度自適應(yīng)及隱藏滾動條的實例詳解的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
JavaScript導(dǎo)出CSV文件不完整的問題解決方法
在JavaScript中處理CSV文件時,需要特別注意一些特殊字符,例如逗號、雙引號、換行符等,這些字符可能會影響CSV文件的解析,導(dǎo)致數(shù)據(jù)錯亂,所以本文給大家介紹了如何解決JavaScript導(dǎo)出CSV文件不完整的問題,需要的朋友可以參考下2024-06-06
Bootstrap網(wǎng)頁布局網(wǎng)格的實現(xiàn)
柵格就是網(wǎng)格，本文詳細的介紹了Bootstrap網(wǎng)頁布局網(wǎng)格的原理和實現(xiàn)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
JavaScript實現(xiàn)異步任務(wù)循環(huán)順序執(zhí)行詳解
這篇文章主要為大家詳細介紹了JavaScript中實現(xiàn)異步任務(wù)循環(huán)順序執(zhí)行的方法，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下2023-03-03
利用hasOwnProperty給數(shù)組去重的面試題分享
obj.hasOwnProperty(attr) 判斷是否是原型中的屬性，false就是原型中的屬性，下面這篇文章主要給大家介紹了一道利用hasOwnProperty給數(shù)組去重的面試題，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下2018-11-11