uni-app 滾動(dòng)到指定位置的操作方法
方法1:使用標(biāo)簽,可以將頁面橫向(或縱向)滾動(dòng)到指定位置
無法滾動(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 使頁面縱向滾到到指定位置
建議設(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-05PHP+jQuery+Ajax+Mysql如何實(shí)現(xiàn)發(fā)表心情功能
這篇文章通過php+jquery+ajax+mysql相結(jié)合,實(shí)現(xiàn)當(dāng)用戶瀏覽網(wǎng)站文章或者是論壇帖子后,想表達(dá)自己瀏覽后的心情,發(fā)表自己的感受,很多網(wǎng)站都提供了用戶發(fā)表心情的功能,通過此功能可以很直觀的分析文章或者是論壇對(duì)瀏覽者的用戶體驗(yàn)度2015-08-08JS獲取當(dāng)前時(shí)間的年月日時(shí)分秒及時(shí)間的格式化的方法
這篇文章主要介紹了js獲取當(dāng)前時(shí)間的年月日時(shí)分秒及時(shí)間的格式化,本文通過實(shí)例代碼講解的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12JS響應(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ì)頁面元素的動(dòng)態(tài)操作技巧,需要的朋友可以參考下2015-10-10js使用棧來實(shí)現(xiàn)10進(jìn)制轉(zhuǎn)8進(jìn)制與取除數(shù)及余數(shù)
這篇文章主要介紹了js使用棧來實(shí)現(xiàn)10進(jìn)制轉(zhuǎn)8進(jìn)制、js取除數(shù)、余數(shù),需要的朋友可以參考下2014-06-06JS+flash實(shí)現(xiàn)chrome和ie瀏覽器下同時(shí)可以復(fù)制粘貼
chrome和ie同時(shí)可以復(fù)制粘貼,想必大家一直思索的問題在本文將有一個(gè)不錯(cuò)的實(shí)現(xiàn),下面為大家介紹下JS+flash是如何實(shí)現(xiàn)的,感興趣的朋友可以參考下2013-09-09JS實(shí)現(xiàn)仿QQ聊天窗口抖動(dòng)特效
本文給大家分享的是類似QQ窗口的抖動(dòng)效果,只是覺得好玩,沒什么技術(shù)含量,推薦給大家,有需要的小伙伴可以參考下。2015-05-05