微信小程序點(diǎn)擊item使之滾動(dòng)到屏幕中間位置
更新時(shí)間：2020年03月25日 09:38:23 作者：CrazBarry
這篇文章主要介紹了微信小程序點(diǎn)擊item使之滾動(dòng)到屏幕中間位置,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
1.需求
想做類似貓眼電影選場(chǎng)次會(huì)自動(dòng)滾動(dòng)到屏幕中間的效果
如圖是最終效果
2.分析
實(shí)現(xiàn)這種效果的方法有三種：
1.直接使用原生CSS+js;
2.使用swiper,一屏顯示多個(gè)item,點(diǎn)擊item會(huì)自動(dòng)滾動(dòng)到中間
3.使用微信的scroll-view配合JS實(shí)現(xiàn)
權(quán)衡了一下最終選擇了第三個(gè)方案，比較是微信自帶的方法，使用起來會(huì)比較流暢，swiper的話會(huì)比較臃腫，原生的話就比較麻煩，需要考慮的兼容問題比較多。
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) {
//獲取點(diǎn)擊元素的信息,ele為傳入的id
var that = this;
//節(jié)點(diǎn)查詢
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
})
},
//選擇項(xiàng)目
selectItem: function (e) {
let ele = 'scroll-item-' + e.currentTarget.dataset.index
this.getRect('#' + ele);
},
首先獲取屏幕的寬度，再獲取點(diǎn)擊元素的寬度，計(jì)算一下就可以獲得應(yīng)該滾動(dò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)于微信小程序點(diǎn)擊item使之滾動(dòng)到屏幕中間的文章就介紹到這了,更多相關(guān)微信小程序item滾動(dòng)到屏幕中間內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
最近寫了一個(gè)倒計(jì)時(shí)程序，因?yàn)榻?jīng)常要在手機(jī)端訪問，所以沒有引用jquery，對(duì)于用習(xí)慣jquery的我還真不習(xí)慣。下面簡(jiǎn)單說明js日期相關(guān)函數(shù)，并說明實(shí)現(xiàn)倒計(jì)時(shí)的原理2013-10-10
JavaScript中call、apply、bind實(shí)現(xiàn)原理詳解
其實(shí)在很多文章都會(huì)寫call，apply，bind,但個(gè)人覺著如果不弄懂原理,是很難理解透的,所以這篇文章主要介紹了JavaScript中call、apply、bind實(shí)現(xiàn)原理的相關(guān)資料,需要的朋友可以參考下2021-06-06
JS遍歷Json字符串中鍵值對(duì)先轉(zhuǎn)成JSON對(duì)象再遍歷
這篇文章主要介紹了JS遍歷Json字符串中鍵值對(duì)的方法,先將Json字符串轉(zhuǎn)換成JSON對(duì)象，再進(jìn)行遍歷，需要的朋友可以參考下2014-08-08
這篇文章主要介紹了JavaScript判斷文件上傳類型的方法,可實(shí)現(xiàn)針對(duì)重復(fù)的內(nèi)容也能觸發(fā)onchange事件,需要的朋友可以參考下2014-09-09
WebSocket最大特點(diǎn)就是服務(wù)器可以主動(dòng)向客戶端推送信息,客戶端也可以主動(dòng)向服務(wù)器發(fā)送信息,是真正的雙向平等對(duì)話,屬于服務(wù)器推送技術(shù)的一種,下面這篇文章主要給大家介紹了關(guān)于如何優(yōu)雅的使用WebSocket的相關(guān)資料,需要的朋友可以參考下2022-05-05
JavaScript變量中var,let和const的區(qū)別
這篇文章主要介紹了JavaScript變量中var,let和const的區(qū)別,JavaScript中一共有3種用來聲明變量的關(guān)鍵字，分別是var、let和const,文章通過圍繞主題展開對(duì)三個(gè)關(guān)鍵詞的詳細(xì)介紹，需要的朋友可以參考一下2022-09-09
Javascript保存網(wǎng)頁為圖片借助于html2canvas庫(kù)實(shí)現(xiàn)
借助于html2canvas庫(kù)，把網(wǎng)頁保存為Canvas畫布，再把生成的canvas保存成圖片，下面的示例，大家可以看看2014-09-09
淺析BootStrap模態(tài)框的使用(經(jīng)典)
Bootstrap Modals（模態(tài)框）是使用定制的 Jquery 插件創(chuàng)建的。本文給大家介紹BootStrap模態(tài)框的使用，感興趣的朋友一起學(xué)習(xí)吧2016-04-04
js中Math之random,round,ceil,floor的用法總結(jié)
本篇文章是對(duì)js中Math之random,round,ceil,floor的用法進(jìn)行了總結(jié)介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
js檢查頁面上有無重復(fù)id的實(shí)現(xiàn)代碼
有時(shí)候我們需要檢查一個(gè)頁面上是否用重復(fù)的id，一般id都是唯一的，也方便控制，那么就可以參考下面的代碼2013-07-07