vuejs react_基于vuejs 2的React式虚拟滚动条

vuejs react

可视滚动 (vuescroll)

vuescroll is a virtual scrollbar based on vue.js 2.X which can both support PC and mobile phone.You can customize the scrollbar how you like instead of using native in browser.

vuescroll是基于vue.js 2.X的虚拟滚动条，可同时支持PC和手机。您可以按自己的喜好自定义滚动条，而不必在浏览器中使用本机。

View demo 查看演示 Download Source 下载源

特征 (Features)

Full features of scrollor. Ability to customize scrollbar by powerful configurations. Ability to detect size change of content and automatically update. smooth-scroll Integration. Vue-Powered.

滚动条的全部功能。 能够通过强大的配置自定义滚动条。 能够检测内容的大小变化并自动更新。 平滑滚动集成。 Vue供电。

开始使用 (Get Started)

安装 (Installation)

直接下载/ CDN (Direct Download / CDN)

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuescroll"></script>

使用npm或yarn (Use npm or yarn)

npm install vuescroll -S
# yarn add vuescroll

app.js (app.js)

// In module system, you need to manully install
// and in browser environment need not.
import Vue from 'vue'
import vuescroll from 'vuescroll'

Vue.use(vuescroll)

// declare Vue instance and bind your options.
const vm = new Vue({
    el: "#app",
    data: {
        ops: {
            // write your own options in ops
            vuescroll: {

            },
            scrollPanel: {
                
            }
            // ...
        }
    }
})

index.html (index.html)

<div id="app" >
    <!-- bind ops -->
    <vue-scroll :ops="ops">
        <!-- the content you want to scroll -->
        <div 
        class="content"
        v-for= "item in 100"
        :key="item"
        >
        <span>{{item}}</span>
        </div>
    </vue-scroll>
</div>

预习 (Preview)

在两种模式之间切换 (Toggle between two modes)

平滑滚动 (Smooth scroll)

BTW,

Here are many scroll animations you can choose.

这里有很多滚动动画可供选择。

拉动刷新和推入负载 (Pull-Refresh and Push-Load)

翻译自: https://vuejsexamples.com/a-reactive-virtual-scrollbar-based-on-vue-js-2/

vuejs react