前言

上班摸魚(yú),下班摸魚(yú),一直摸一直爽。在一次調(diào)試的過(guò)程中,我按下了F12剛好是掘金的頁(yè)面，然后把代碼輸入到控制臺(tái)之后，順手滾動(dòng)了幾下右側(cè)的滾動(dòng)條，發(fā)現(xiàn)個(gè)問(wèn)題如下圖所示:

??????????掘金官網(wǎng)的滾動(dòng)條當(dāng)你拖動(dòng)到底部的時(shí)候會(huì)自動(dòng)回彈到一定的位置。順著這個(gè)問(wèn)題，我想著使用 vue-cli3.0 和 TS 實(shí)現(xiàn)以下這個(gè)功能。

技術(shù)棧

• vue-cli3.0
• ts
• axios

搭建環(huán)境

npm install -g @vue/cli
vue create

之后根據(jù)提示選擇需要的配置項(xiàng)即可

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

支持 TS

搭建好環(huán)境之后項(xiàng)目會(huì)生成shims-vue.d.ts和shims-tsx.d.ts兩個(gè)文件

• shims-vue.d.ts 默認(rèn) ts 不認(rèn)識(shí) vue

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

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

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 的無(wú)限滾動(dòng)(tsx 版本)

ts 版本和之前的 js 版本差距不適合很大,寫(xiě)法類似于 react，采用了 class 類聲明變量和聲明方法的時(shí)候直接用即可。使用count模擬初始數(shù)據(jù)，滾動(dòng)到底部的時(shí)候觸發(fā) load 方法通過(guò) push 方法模擬滾動(dòng)請(qǐng)求回來(lái)的數(shù)據(jù)。

<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中通過(guò)@Component 來(lái)注冊(cè)組件，@Prop 來(lái)屬性傳遞和屬性的校驗(yàn),render 方法來(lái)渲染組件,因?yàn)椴恢С种暗?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>
)
}
}

話不多說(shuō),看下效果圖：

自己實(shí)現(xiàn)無(wú)滾動(dòng)

首先看一下效果

后臺(tái)接口數(shù)據(jù)格式

{
"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原理,徹底看穿前端路由"
}
]
}

思路

設(shè)定頁(yè)面可以展示 n 條數(shù)據(jù),我們首屏分頁(yè)向后臺(tái)請(qǐng)求 n 條，當(dāng)滾動(dòng)條滾動(dòng)到某個(gè)位置的時(shí)候再次發(fā)送接口向后臺(tái)再請(qǐng)求 n 條數(shù)據(jù)以此類推。

首先需要獲取滾動(dòng)條的位置,即可視區(qū)的高度和內(nèi)容區(qū)域底部距離可視區(qū)頁(yè)面頂部的距離,如果他們相等此時(shí)瀏覽器的滾動(dòng)條當(dāng)好滾動(dòng)到頁(yè)面底部，如果相差是負(fù)數(shù)說(shuō)明瀏覽器的滾動(dòng)條還沒(méi)有到達(dá)頁(yè)面底部。

• 獲取可視區(qū)高度 clientWidth

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

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

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

通過(guò)addEventListener監(jiān)聽(tīng)scroll事,如果getHeight()的值到達(dá)某個(gè)設(shè)定的值時(shí)，我們就可以觸發(fā)我們自己需求去調(diào)用接口等

優(yōu)化頁(yè)面

這里的想法是當(dāng)我們的瀏覽器滾動(dòng)條滾動(dòng)之后，滾動(dòng)上去的內(nèi)容不顯示在頁(yè)面上，只顯示可視區(qū)域的，減少頁(yè)面的負(fù)載,先看一下效果

當(dāng)滾動(dòng)條滾動(dòng)回去的效果：

思路：通過(guò)監(jiān)聽(tīng)內(nèi)容區(qū)上部超出可視區(qū)域的高度和設(shè)置每一個(gè)目錄的高度的比值計(jì)算出超出的條數(shù)，判斷渲染數(shù)據(jù)的下標(biāo)和條數(shù)的大小來(lái)展示。

<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>

出現(xiàn)的問(wèn)題：設(shè)置樣式的時(shí)候，我們需要在li上設(shè)置不能給a設(shè)置，如果給a設(shè)置高度之后，判斷不顯示a之后計(jì)算超出的條數(shù)時(shí)就會(huì)出現(xiàn)問(wèn)題，如圖所示

為了防止用戶快速拖動(dòng)滾動(dòng)條，這里可以添加防抖函數(shù)和最后要移除事件監(jiān)聽(tīng)。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

總結(jié)

回顧一下上面的所想的，其實(shí)無(wú)限滾動(dòng)也簡(jiǎn)單，就是能不能想到這個(gè)點(diǎn)子上，如果想不到那肯定就是天方夜譚了，這里面也有很多不足的地方需要改進(jìn)，歡迎留言探討和指點(diǎn)，畢竟這里的水很深，不小心鞋就濕了。

???交流討論歡迎關(guān)注公眾號(hào)?「秋風(fēng)的筆記」，主要記錄日常中覺(jué)得有意思的工具以及分享開(kāi)發(fā)實(shí)踐，保持深度和專注度。回復(fù)"好友"可加微信，秋風(fēng)的筆記常年陪伴你的左右。

「點(diǎn)贊、在看、分享」是對(duì)作者最大的支持??

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。