Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue-long-scroll

Package Overview
Dependencies
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-long-scroll

基于vue长列表优化无限滚动(只3d渲染视窗内元素)。Based on Vue long list optimization (only 3D rendering window elements).

  • 0.1.7
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

vue-long-scroll

Get Start

Installation

npm i --save vue-long-scroll

Initialization

import Vue from "vue";
import LongScroll from "vue-long-scroll"
import "vue-long-scroll/lib/vue-long-scroll.css"

Usage

<template>
    <long-scroll v-model="current" :data="data" :style="{height:'400px'}"></long-scroll>
    // 组件根元素为滚动容器默认高度400px,可自行设置。如果容器高度过大页面出现空白增大size属性即可
    //  The root element of the component is the scroll container. The default height is 400px, which can be set by yourself. If the height of the container is too large, the page appears blank, increase the size attribute
    //  或者 or
    <long-scroll v-model="current" :data="data" :style="{height:'400px'}">
      <template #default="{row}">
        {{row.name}}
      </template>
    </long-scroll>
</template>

<script>
    data(){
        return {
            current:0,  // 当前展示的数据第一条索引 The first index of the data currently displayed
            data:[] // 数据结构[{name:""}] 
        }
    }
</script>

效果

avatar

属性方法说明/option

属性/事件 option描述 description默认值 default
v-model/current+@change当前展示的数据第一条索引 The first index of the data currently displayed0
data要展示的所有数据 All data to show\
current当前展示的数据第一条索引 The first index of the data currently displayed0
size要渲染到Dom的数据条数 Number of data to render to DOM20
valueKey行展示默认内容的键 Line shows the default content of the keyname
rowHeight每行展示的高度 Height of each line36
change当前数据改变事件 Current data change eventscurrent

License

MIT License

Copyright (c) 2021-present, YangJianFei 1294485765@qq.com

Source Code

https://github.com/YangJianFei/vue-long-scroll

My Git

YangJianFei

Keywords

FAQs

Package last updated on 04 Jun 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc