移動端無限滾動 TScroll.vue組件

// 先看使用TScroll.vue的幾個demo
1. https://sorrowx.github.io/TScroll/#/
2. https://sorrowx.github.io/TScroll/#/simple-tscroll
3. https://sorrowx.github.io/TScroll/#/xunlei-live
4. https://sorrowx.github.io/TScroll/#/youliao
5. https://sorrowx.github.io/TScroll/#/my-video/1

github文檔地址： https://github.com/SorrowX/TScroll

其實任意列表均可以使用該組件滾動,若是感興趣的話就往下看看吧。

TScroll

TScroll.vue 一個Vue組件(TouchScroll)

1. 用來解決移動端列表的滾動
2. 使用姿式較爲統一
3. 列表數據始終保持5屏左右的列表數據,因此當你滾動1w以上(其實隨便多少條數據)的數據,父容器中的數據始終都是小於5屏左右的數據
4. 基於alloytouch.js和transform.js編寫的一個Vue基礎組件

TScroll.vue 使用姿式

<t-scroll 
    :pullUpData="pullUpData" :pullDownData="pullDownData" :renderDataList.sync="renderDataList" v-bind="tScrollOptions" ref="tScrollComp" @pullUpLoading="loadMore" @pullDownLoading="pullDownLoading" @pullDownEnd="pullDownEnd" @change="change" > <template> <div ref="tscroll-pull-down" class="pulldown">釋放加載</div> <ul ref="tscroll-list-container"> <li :key="item.data.num" v-for="(item, index) in renderDataList" >row {{JSON.stringify(item.data.num)}}</li> </ul> <div ref="tscroll-pull-up" class="loading">loading</div> </template> </t-scroll>

TScroll.vue props詳細解釋

data() {
	return { simpleScroll: '' // 若是有該屬性(如下屬性能夠所有忽略了, 目前只支持'translateX'和'translateY'),則認爲是個簡單的滾動,不含上拉下拉加載數據功能 pullUpData: [], // 每次從服務器上拉獲取的新數據 pullDownData: [], // 每次從服務器下拉獲取的新數據 renderDataList: [], // 用於渲染列表的數據 tScrollOptions: { scrollBarOption: { // 控制滾動條相關屬性 show: true, // 是否開啓滾動條 fade: false // true 表示當滾動中止的時候滾動條是否須要漸隱 }, scrollOption: { excrMin: 45 + 48, // 多餘的高度(滾動容器若是和屏幕高度同樣,則該值爲0,若是頁面若是有頭部和底部,須要減掉頭部和底部的高度,則該值爲頭部的高度+底部的高度) maxSpeed: 2, // 滾動最大速度 sensitivity: 1, // 滾動的靈敏度 pullDownDistance: 60, // 下拉距離(超過指定距離才觸發下拉事件) preventDefault: false // 是否阻止默認事件 } } } }

TScroll.vue 事件詳細解釋

pullUpLoading 事件 暫無參數:
    用戶從下往上拉 滾動列表時,加載完當前服務器給的數據且出現加載dom時會觸發該事件

pullDownLoading 事件 暫無參數:
   用戶從上往下拉 滾動列表時,當往下拉的距離大於pullDownDistance屬性時,會觸發該事件(注意: 該事件會屢次觸發)

pullDownEnd 事件 暫無參數:
   用戶從上往下拉 釋放列表時, 會觸發該事件。列表會自動回彈到pullDownDistance高度,等下拉有新的數據時,會自動回彈到頂部

change 事件 參數(v 表示當前滾動的transformY值):
   當用戶滾動列表時, 會不斷的觸發該事件

touchStart 事件 參數(evt, property):
   當用戶觸發列表容器時, 會觸發該事件

touchMove 事件 參數(evt, property):
   當用戶在列表容器上滑動時, 會觸發該事件

touchEnd 事件 參數(evt, current):
   當用戶在列表容器手指放開時, 會觸發該事件

touchCancel 事件 參數(evt):
   當touch事件取消時, 會觸發該事件

animationEnd 事件 參數(current):
   當用戶在列表容器手指放開時且動畫滾動結束時, 會觸發該事件

TScroll.vue 實例一些有用的方法

scrollTo 方法: 滾動到指定的dom
    參數(i, ms)
        i: 若是指定Number類型的話, 會在指定ms毫秒內滾動到列表的第幾個dom元素
           若是指定String類型的話(只支持'top', 'bottom'), 會在指定ms毫秒內滾動到列表的頂部或者底部 若是指定HTMLLIElement類型的話, 會在指定ms毫秒內滾動到列表中該dom的位置 ms: Number 毫秒 返回值: undefined getAllData 方法: 獲取全部的數據,就是從服務器每次請求的數據都push到該數組, 數組中的元素爲對象,對象屬性以下{ data: 就是服務器給的數據, dom: dom元素, translateY: css屬性, removed: 該dom是否被移除了 } 無參數 返回值: Array(對象數組或者空數組) getListActualDom 方法: 獲取列表容器中實際的dom元素(由於父容器始終會保持小於5屏左右的數據) 無參數 返回值: Array(dom數組或者空數組) clearListContainerDom 方法: 清空當前列表容器全部的孩子 參數(cb) cb: Function 清空後的回掉(由於vue更新dom基本放到本次事件循環的末尾執行,因此提供個回掉) 返回值: undefined

TScroll.vue 更新日誌

    4月17日:
       1.修復 少傳excrMin參數,滑動列表時,內容會被清空的的bug (大部分參數都是可選的,因此沒傳了話,應該有默認值)
       2.修復 下拉時滾動條高度不跟着變化的bug
       3.修復 有simpleScroll屬性就是簡單滾動的狀況下,列表最後一個dom被隱藏的bug

    5月6日:
       1.excrMin屬性支持rem單位,能夠爲Number|String類型,number類型則爲px單位
         eg: excrMin: 44 和 excrMin: '44px' 效果同樣; excrMin: '1.5rem'的話會根據當前的html的fontSize 計算出px值 5月7日: 1.TScroll組件實例新增clearListContainerDom方法,用於清空當前列表容器全部的孩子,其餘狀態相應的置爲初始狀態 2. demo詳見 '視頻'中的sv.vue組件使用姿式 5月14日: 1. 新增TScrollX.vue組件(主要是TScroll.vue組件的加強版) 2. 加強simpleScroll屬性的功能,之前只支持垂直滾動,不支持水平滾動 3. 水平滾動只是簡單的滾動,不含'像右滑動'或者'像左滑動'超過多少距離觸發加載數據事件,事實上安卓和ios客戶端也不多有這樣的功能 4. 水平滾動只是簡單的左右滾動,同時scrollTo api一樣能夠用 5. 該屬性主要用於導航,等水平滾動功能使用。demo詳見 '個人視頻'中的video-header.vue組件使用姿式 6. 注: TScroll.vue 組件不含水平滾動

demo

    效果詳見 https://sorrowx.github.io/TScroll/#/ 4月10日: 新增首頁和SimpleTscroll頁面 4月16日: 新增迅雷直播首頁 4月27日: 新增有料視頻列表頁和視頻播放頁(其視頻接口已關閉,demo爲同一個視頻) 5月6日: 新增視頻單頁,和視頻播放頁(該demo主要用於本身本地視頻播放娛樂的) 5月13日: 今天下午無聊重構了視頻單頁,改成"個人視頻" 該單頁比'視頻'單頁多了左右滑動時切換到新的tag功能,容器內容數據沒有清空,而是一個tag導航對應一個tscroll容器， 分離了頭部和視頻內容組件,代碼清晰多了