vue scroller 滑動元件使用指南

2022-08-05 19:00:17 字數 1048 閱讀 6975

在頁面中經常會用到滾動,下拉重新整理,下拉載入等功能,vux的scroller可以使用,但是它不再維護,而且要配合load-more元件一起使用。所以一般在專案中我都是用vue-scroller.

vue-scroller文件

1.在專案中安裝:

npm i vue-scroller -s
2.在main.js中引用

import vuescroller from 'vue-scroller'vue.use(vuescroller)

3.在需要用到滾動的地方直接使用

裡面是滾動元素

4.使用技巧

(1)一般來說,我們都是在乙個列表中使用這個滾動,經過實踐,在使用scroller時,最好的布局方法是以下這種,乙個外部的容器元素,將滾動標籤和滾動內容包裹起來,然後這個外層元素進行定位,要是有頭部標籤需要留出header的高度,並且滾動容器的高度要減小,不然會出現滾動條,在手機上導致滾動到底部看不到頭部的情況,在scroller裡面再加一層容器的原因是一般scroller裡面只有乙個元素效能會比較好,滾動也比較流暢,不然可能會有滾動卡頓,上拉回彈等問題。

for="item in list">}

.scrollerwrap

}

(2)scroller提供的屬性(常用):

onrefresh:下拉重新整理

refresh(done),

oninfinite:上拉載入

infinite(done),1000);

}else)

},1500)

}},

refreshtext: 下拉重新整理的提示文字

nodatatext: 上拉載入沒有資料的提示文字

(3)scroller提供的方法(常用):

getposition(): 得到滾動區域當前的位置

scrollto(): 滾動到頁面的某乙個位置

scrollby();滾動到內容的相對位置

vue 滑動元件

vue slider,乙個簡單的滑動元件,配置簡單,支援自適應 全屏 按鈕 分頁,同時相容移動端和pc端 支援vue2.0 slider效果 完整文件 通過以下demo來實現 sliderinit sliderinit slider template import slider from slide...

可橫向滑動的vue tab元件

前端使用技術 框架 vue 元件 ly tab乙個用於移動端的可觸控滑動具有回彈效果的可復用vue元件 ly tab 介紹位址 ly tab npm位址 1,引入包,定義成公共元件 2,頁面呼叫,定義資料源,寫事件 呼叫 資料來源 data backgroundstyle rgba 255,255,...

uni app 專案封裝乙個滑動元件

記錄使用者按下螢幕的時間 date.now 注意 返回的時時間戳,1970 1 1 到現在的毫秒數 記錄使用者按下螢幕的座標 x 和 y 記錄使用者離開螢幕的時間 date.now 記錄使用者離開螢幕的座標 x 和 y 根據兩個時間 運算 判斷 使用者按下螢幕時長是否合法 根據兩對座標 判斷距離是否...