https://github.com/supercll/vue3-virtual-scroll-list

vue3 虚拟滚动列表组件，可自定义列表样式
https://github.com/supercll/vue3-virtual-scroll-list

component typescript virtual-scroll vue3

Last synced: 3 days ago
JSON representation

vue3 虚拟滚动列表组件，可自定义列表样式

• Host: GitHub
• URL: https://github.com/supercll/vue3-virtual-scroll-list
• Owner: supercll
• Created: 2023-07-28T08:41:41.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-07-31T07:28:33.000Z (over 1 year ago)
• Last Synced: 2024-11-15T09:10:16.914Z (3 months ago)
• Topics: component, typescript, virtual-scroll, vue3
• Language: Vue
• Homepage:
• Size: 32.2 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## install

```

pnpm i vue3-virtual-scroll-list-component

or

npm i vue3-virtual-scroll-list-component

```

## use

```Vue

  


    

      

        


          


            

              {{ item.date }}

            

            删除

          

          


            
{{ item.id }}

            
{{ item.detail }}

            
支出收入

            
{{ item.money }}元

          

        

      


    

  


​

import { ref, reactive, onMounted, Ref, defineComponent } from 'vue'

import { nanoid } from 'nanoid'

import VirtualScrollList from 'vue3-virtual-scroll-list-component'

import 'vue3-virtual-scroll-list-component/css'

defineComponent({

  VirtualScrollList

})

interface AccountDataItem {

  date: string //日期

  state: number //收支状态 0为收入 1为支出

  detail: string //详情

  money: number //花费或收入

  id: string,

}

//原始数据

const accountData = ref<AccountDataItem[]>([])

//获取原始数据

const getData = (): Promise<AccountDataItem[]> => {

  const data: AccountDataItem[] = []

  return new Promise(resolve => {

    for (let i = 0; i < 10000; i++) {

      data.push(

        {

          date: `2023-03-28`,

          id: nanoid(),

          state: 0,

          detail: `ACG${i}`,

          money: 1800

        },

        {

          date: `2023-03-29`,

          id: nanoid(),

          state: 1,

          detail: `ACG${i}`,

          money: 2000

        })

    }

    resolve(data)

  })

}

const deleteItem = (targetId) => {

  accountData.value = accountData.value.filter(item => item.id !== targetId)

}

onMounted(async () => {

  accountData.value = await getData()

})

​

p {

  margin: 0;

  padding: 0;

}

#main-bg {

  margin: 0 auto;

}

.list-itembox {

  margin: 10px 0;

  border: 1px #EEEEEE solid;

  border-radius: 8px;

  width: 70vw;

  .action {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 5px;

  }

  .date {

    font-size: 14px;

    line-height: 14px;

    padding: 10px;

  }

  .delete {

    font-size: 12px;

    line-height: 18px;

    height: 18px;

    width: 38px;

    padding: 0 5px;

    color: white;

    background-color: red;

  }

  .info {

    display: grid;

    grid-template-columns: 80px auto auto auto;

    justify-content: space-between;

    font-size: 15px;

    line-height: 15px;

    text-align: left;

    padding: 10px 15px;

  }

}

​

```