前言

上班摸魚,下班摸魚,一直摸一直爽。在一次調試的過程中,我按下了F12剛好是掘金的頁面，然后把代碼輸入到控制臺之后，順手滾動了幾下右側的滾動條，發現個問題如下圖所示:

??????????掘金官網的滾動條當你拖動到底部的時候會自動回彈到一定的位置。順著這個問題，我想著使用 vue-cli3.0 和 TS 實現以下這個功能。

技術棧

• vue-cli3.0
• ts
• axios

搭建環境

npm install -g @vue/cli
vue create

之后根據提示選擇需要的配置項即可

(*) Babel
(*) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
(*) CSS Pre-processors
(*) Linter / Formatter

支持 TS

搭建好環境之后項目會生成shims-vue.d.ts和shims-tsx.d.ts兩個文件

• shims-vue.d.ts 默認 ts 不認識 vue

declare module '*.vue' {
import Vue from 'vue'
export default Vue //讓ts識別.vue文件
}

• shims-tsx.d.ts這個聲明文件是允許在 vue 項目中寫jsx代碼，可以使用.tsx結尾的文件,如果在項目中不使用可以直接忽略。

import Vue, { VNode } from 'vue'

declare global {
namespace JSX {
// tslint:disable no-empty-interface
interface Element extends VNode {}
// tslint:disable no-empty-interface
interface ElementClass extends Vue {}
interface IntrinsicElements {
[elem: string]: any
}
}
}

Element-ui 的無限滾動(tsx 版本)

ts 版本和之前的 js 版本差距不適合很大,寫法類似于 react，采用了 class 類聲明變量和聲明方法的時候直接用即可。使用count模擬初始數據，滾動到底部的時候觸發 load 方法通過 push 方法模擬滾動請求回來的數據。

<div id="app"><img alt="Vue logo" src="./assets/logo.png"><div class="infinite-list" v-infinite-scroll="load" style="overflow:auto;height:200px"><ElementScroll :count="count"/>div>div>template><script lang="ts">import { Component, Vue } from 'vue-property-decorator';import ElementScroll from './components/ElementScroll';
@Component({components: {
ElementScroll
},
})export default class App extends Vue {
public count = [1, 2, 3, 4, 4, 5];
public num = 0;/**
* load
*/
public load() {this.count.push(this.num++)
}
}script>

tsx中通過@Component 來注冊組件，@Prop 來屬性傳遞和屬性的校驗,render 方法來渲染組件,因為不支持之前的 v-for 屬性，采用了 map 方法代替

import { Component, Prop, Vue } from 'vue-property-decorator'
@Component
export default class ElementScroll extends Vue {
@Prop(Array) public count!: Array<Number>;
protected render() {
return (
<ul>
{
this.count.map(item => {
return <li class="infinite-list-item">{item}li>
})
}ul>
)
}
}

話不多說,看下效果圖：

自己實現無滾動

首先看一下效果

后臺接口數據格式

{
"code": 0,
"data": [
{
"href": "https://mmbiz.qpic.cn/mmbiz_gif/ciclmTicgVuW6iaPXwMnCJVwu4oXnlxV0sNiayhYLsejBUXWaETtG81XHTkTsmBvHDZAoJd4icgNWmonk0g24QCE5Ag/0?wx_fmt=gif",
"name": "完美解決JavaScript的深淺拷貝"
},
{
"href": "https://mmbiz.qpic.cn/mmbiz_gif/ciclmTicgVuW6iaPXwMnCJVwu4oXnlxV0sNiayhYLsejBUXWaETtG81XHTkTsmBvHDZAoJd4icgNWmonk0g24QCE5Ag/0?wx_fmt=gif",
"name": "理解裝飾器是怎么使用的"
},
{
"href": "https://mmbiz.qpic.cn/mmbiz_gif/ciclmTicgVuW6iaPXwMnCJVwu4oXnlxV0sNiayhYLsejBUXWaETtG81XHTkTsmBvHDZAoJd4icgNWmonk0g24QCE5Ag/0?wx_fmt=gif",
"name": "浪漫七夕一舉俘獲美人心"
},
{
"href": "https://mmbiz.qpic.cn/mmbiz_gif/ciclmTicgVuW6iaPXwMnCJVwu4oXnlxV0sNiayhYLsejBUXWaETtG81XHTkTsmBvHDZAoJd4icgNWmonk0g24QCE5Ag/0?wx_fmt=gif",
"name": "深入分析Vue-Router原理,徹底看穿前端路由"
}
]
}

思路

設定頁面可以展示 n 條數據,我們首屏分頁向后臺請求 n 條，當滾動條滾動到某個位置的時候再次發送接口向后臺再請求 n 條數據以此類推。

首先需要獲取滾動條的位置,即可視區的高度和內容區域底部距離可視區頁面頂部的距離,如果他們相等此時瀏覽器的滾動條當好滾動到頁面底部，如果相差是負數說明瀏覽器的滾動條還沒有到達頁面底部。

• 獲取可視區高度 clientWidth

function getView(container: HTMLElement): any {
return {
width: Math.max(container.clientWidth, window.innerWidth || 0),
height: Math.max(container.clientHeight, window.innerHeight || 0),
};
}

• 元素的大小及其相對于視口的位置 getBoundingClientRect^[1]

function getHeight(container: HTMLElement, el: any): number {
return getView(container).height - el.getBoundingClientRect().bottom;
}

通過addEventListener監聽scroll事,如果getHeight()的值到達某個設定的值時，我們就可以觸發我們自己需求去調用接口等

優化頁面

這里的想法是當我們的瀏覽器滾動條滾動之后，滾動上去的內容不顯示在頁面上，只顯示可視區域的，減少頁面的負載,先看一下效果

當滾動條滾動回去的效果：

思路：通過監聽內容區上部超出可視區域的高度和設置每一個目錄的高度的比值計算出超出的條數，判斷渲染數據的下標和條數的大小來展示。

<div class="scroll"><ul ref="list"><li v-for="(item,index) in lists" :key="index"><a :href="item.href" v-if="index+10>=num">{{item.name}}a>li>ul>div>
</template>

出現的問題：設置樣式的時候，我們需要在li上設置不能給a設置，如果給a設置高度之后，判斷不顯示a之后計算超出的條數時就會出現問題，如圖所示

為了防止用戶快速拖動滾動條，這里可以添加防抖函數和最后要移除事件監聽。public debounce(fn: any, wait: number): any {
let timeout: any = null;
return function () {
if (timeout != null) clearTimeout(timeout);
timeout = setTimeout(fn, wait);
};
}

源碼已放到 github 上：https://github.com/clown-Jack/vue-scroll

總結

回顧一下上面的所想的，其實無限滾動也簡單，就是能不能想到這個點子上，如果想不到那肯定就是天方夜譚了，這里面也有很多不足的地方需要改進，歡迎留言探討和指點，畢竟這里的水很深，不小心鞋就濕了。

???交流討論歡迎關注公眾號?「秋風的筆記」，主要記錄日常中覺得有意思的工具以及分享開發實踐，保持深度和專注度。回復"好友"可加微信，秋風的筆記常年陪伴你的左右。

「點贊、在看、分享」是對作者最大的支持??

總結

以上是生活随笔為你收集整理的datagridview滚动条自动滚动_掘金上摸鱼的新发现，无限滚动(infinitescroll)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。