uni-app 滾動(dòng)到指定位置的操作方法

方法1:使用標(biāo)簽,可以將頁(yè)面橫向(或縱向)滾動(dòng)到指定位置
無(wú)法滾動(dòng) 將代碼放在setTimeout,nextTick里執(zhí)行
<!-- 左邊 -->
<scroll-view show-scrollbar="false" scroll-y="true" class="left-box"
:scroll-top="scrollLeftTop" scroll-with-animation="true">
<view class="scroll-view-item" v-for="(item,index) in servicesLeftList" :key="item.id"
:id="'scroll' + activeLeftTab" :class="{'active':activeLeftTab==item.id}">
{{item.name}}
</view>
</scroll-view>data(){
return {
servicesLeftList:[],
scrollLeftTop:0,,//滾動(dòng)位置
activeLeftTab:"" //選中的樣式
}
}
getData() {
//接口
getServicesTree().then(res => {
this.servicesLeftList= res.data
res.data.forEach((item, ind) => {
setTimeout(()=>{
uni.createSelectorQuery().in(this).select('#scroll' + item.id)
.boundingClientRect(res => {
scrollLeftTop.value = 65 * ind; // 設(shè)置滾動(dòng)條距離左側(cè)的距離
}).exec()
},100)
})
})
}方法二 使用uni.pageScrollTo 使頁(yè)面縱向滾到到指定位置
建議設(shè)置height為auto :height:auto
<view class="left-box" >
<view class="scroll-view-item" v-for="(item,index) in servicesLeftList" :key="item.id"
:class="{'active':activeLeftTab==item.id}">
{{item.name}}
</view>
</view>
//方法
uni.pageScrollTo({
scrollTop: 0,
duration: 500
});方法三 用scroll-view描點(diǎn)
//左邊 :scroll-top="scrollLeftTop"
<scroll-view scroll-y="true" class="left-box" scroll-with-animation="true"
:scroll-into-view="tracingLeftPoint">
<view class="scroll-view-item" v-for="(item,index) in servicesLeftList" :key="item.id"
:id="'scroll' + item.id" :class="{'active':activeLeftTab==item.id}">
{{item.name}}
</view>
</scroll-view>
//方法
data(){
retrun {
tracingLeftPoint:"",//描點(diǎn)id
}
}
getData() {
//接口
getServicesTree().then(res => {
this.servicesLeftList= res.data
res.data.forEach((item, ind) => {
setTimeout(()=>{
this.tracingLeftPoint= 'scroll' + item.id
},200)
})
})
}到此這篇關(guān)于uni-app 滾動(dòng)到指定位置的文章就介紹到這了,更多相關(guān)uni-app 滾動(dòng)到指定位置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript Array數(shù)組對(duì)象的擴(kuò)展函數(shù)代碼
我們經(jīng)常給 String,Function,Array 的原型加上自定義的擴(kuò)展函數(shù),比如去除字符串空格,數(shù)組排序等2010-05-05
PHP+jQuery+Ajax+Mysql如何實(shí)現(xiàn)發(fā)表心情功能
這篇文章通過(guò)php+jquery+ajax+mysql相結(jié)合,實(shí)現(xiàn)當(dāng)用戶瀏覽網(wǎng)站文章或者是論壇帖子后,想表達(dá)自己瀏覽后的心情,發(fā)表自己的感受,很多網(wǎng)站都提供了用戶發(fā)表心情的功能,通過(guò)此功能可以很直觀的分析文章或者是論壇對(duì)瀏覽者的用戶體驗(yàn)度2015-08-08
JS獲取當(dāng)前時(shí)間的年月日時(shí)分秒及時(shí)間的格式化的方法
這篇文章主要介紹了js獲取當(dāng)前時(shí)間的年月日時(shí)分秒及時(shí)間的格式化,本文通過(guò)實(shí)例代碼講解的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12
JS響應(yīng)鼠標(biāo)點(diǎn)擊實(shí)現(xiàn)兩個(gè)滑塊區(qū)間拖動(dòng)效果
這篇文章主要介紹了JS實(shí)現(xiàn)的兩個(gè)滑塊區(qū)間拖動(dòng)效果代碼,涉及JavaScript響應(yīng)鼠標(biāo)事件針對(duì)頁(yè)面元素的動(dòng)態(tài)操作技巧,需要的朋友可以參考下2015-10-10
js使用棧來(lái)實(shí)現(xiàn)10進(jìn)制轉(zhuǎn)8進(jìn)制與取除數(shù)及余數(shù)
這篇文章主要介紹了js使用棧來(lái)實(shí)現(xiàn)10進(jìn)制轉(zhuǎn)8進(jìn)制、js取除數(shù)、余數(shù),需要的朋友可以參考下2014-06-06
JS+flash實(shí)現(xiàn)chrome和ie瀏覽器下同時(shí)可以復(fù)制粘貼
chrome和ie同時(shí)可以復(fù)制粘貼,想必大家一直思索的問(wèn)題在本文將有一個(gè)不錯(cuò)的實(shí)現(xiàn),下面為大家介紹下JS+flash是如何實(shí)現(xiàn)的,感興趣的朋友可以參考下2013-09-09
JS實(shí)現(xiàn)仿QQ聊天窗口抖動(dòng)特效
本文給大家分享的是類(lèi)似QQ窗口的抖動(dòng)效果,只是覺(jué)得好玩,沒(méi)什么技術(shù)含量,推薦給大家,有需要的小伙伴可以參考下。2015-05-05

