1.10.9 • Published 5 months ago

vue-waterfall2 v1.10.9

Weekly downloads
249
License
MIT
Repository
-
Last release
5 months ago

中文版文档

Note: vue-waterfall2@2.x is adapt for vue3, if your app is vue2, please use vue-waterfall2@1.10.x, 1.10.x document

vue-waterfall2

  1. auto adaption for width and height
  2. High degree of customization
  3. Swipe to the bottom to trigger on pc/android, pull up to trigger on ios
  4. Support lazy load(attribute with lazy-src)
  5. Easy to use, for PC/ios/android

The demo on mobile device

If you have some questions,welcome to describe issues、suggestions;Thank you for your Star !
Welcome to my blog !!!

Demo

Common Demo
Lazyload Demo
Code Demo

GITHUB

npm i 
npm run dev

Installation

 npm i vue-waterfall2@latest --save

Props

NameDefaultTypeDesc
heightnullNumberheight of container
col2NumberThe number of column
widthnullNumberThe width of each column
gutterWidth10NumberThe value of margin
data[]Arraydata
isTransitiontrueBooleanload image with transition
lazyDistance300NumberThe distance of image lazy loading
loadDistance300NumberThe distance of loadmore

Lazy Load

For images that need to be loaded lazily, the 'lazy-src' attribute needs to be used

<waterfall :col='col'   :data="data"     >
  <img v-if="item.img" :lazy-src="item.img" alt="load error"  />
</waterfall>

Events

NameDataDesc
loadmore-Scroll to the bottom to trigger on PC / pull up to trigger on Mobile
scrollobjScroll to trigger and get the infomation of scroll
finish-finish render

$waterfall API

this.$waterfall.forceUpdate()   //forceUpdate

Usage

Notes: 1. when using rem to layout, calculate the width after adaptation before passing the value. 2. Use the parent component of 'waterfall' if there is a problem with the style, remove CSS scoped and try it

main.js
import { createApp } from "vue";
import waterfall from 'vue-waterfall2'

const app = createApp(App)
app.use(waterfall)
app.vue
<template>
  <div class="container-water-fall">
    <div><button  @click="loadmore">loadmore</button> <button @click="mix">mix</button> <button @click="switchCol('5')">5列</button> <button @click="switchCol('8')">8列</button> <button @click="switchCol('10')">10列</button> </div>

    <waterfall :col='col' :width="itemWidth" :gutterWidth="gutterWidth"  :data="data"  @loadmore="loadmore"  @scroll="scroll"  >
      <div class="cell-item" v-for="(item,index) in data">
        <div class="item-body">
            <div class="item-desc">{{item.title}}</div>
            <div class="item-footer">
                <div class="avatar" :style="{backgroundImage : `url(${item.avatar})` }"></div>
                <div class="name">{{item.user}}</div>
                <div class="like" :class="item.liked?'active':''" >
                    <i ></i>
                    <div class="like-total">{{item.liked}}</div>  
                </div>
            </div>
        </div>
      </div>
    </waterfall>
    
  </div>
</template>


/*
  notes:
  1. when using `rem` to layout, calculate the width after adaptation before passing the value.
  2. Use the parent component of 'waterfall' if there is a problem with the style, remove CSS 'scoped' and try it
*/

import Vue from 'vue'
	export default{
	    data(){
	        return{
	            data:[],
	            col:5,
	        }
	    },
	    computed:{
	      itemWidth(){  
	            return (138*0.5*(document.documentElement.clientWidth/375))  #rem to layout, Calculate the value of width 
	      },
	      gutterWidth(){
	            return (9*0.5*(document.documentElement.clientWidth/375)) #rem to layout, Calculate the value of margin 
	      }
	    },
	    methods:{
            scroll(scrollData){
                console.log(scrollData)
            },
	        switchCol(col){
	            this.col = col
	            console.log(this.col)
	      },
	      loadmore(index){
	            this.data = this.data.concat(this.data)
	      }
	    }
	}
1.10.9

5 months ago

2.0.7

10 months ago

2.0.6

10 months ago

1.10.7

12 months ago

2.0.3

12 months ago

2.0.2

12 months ago

2.0.5

12 months ago

2.0.4

12 months ago

2.0.1

12 months ago

2.0.0

1 year ago

2.0.0-beta.1

1 year ago

1.10.7-beta.1

12 months ago

1.10.6

2 years ago

1.10.5

2 years ago

1.10.4

2 years ago

1.10.3

2 years ago

1.10.2

2 years ago

1.10.1

4 years ago

1.9.6

5 years ago

1.9.5

5 years ago

1.9.4

5 years ago

1.9.3

5 years ago

1.9.2

5 years ago

1.9.1

5 years ago

1.8.22

5 years ago

1.8.21

5 years ago

1.8.20

5 years ago

1.8.19

5 years ago

1.8.18

5 years ago

1.8.17

5 years ago

1.8.16

5 years ago

1.8.14

5 years ago

1.8.13

5 years ago

1.8.12

5 years ago

1.8.11

5 years ago

1.8.10

5 years ago

1.8.9

5 years ago

1.8.8

5 years ago

1.8.7

5 years ago

1.8.6

5 years ago

1.8.5

5 years ago

1.8.4

5 years ago

1.8.3

5 years ago

1.8.2

5 years ago

1.8.1

5 years ago

1.7.7

5 years ago

1.7.6

5 years ago

1.7.5

5 years ago

1.7.4

5 years ago

1.7.3

5 years ago

1.7.2

5 years ago

1.7.1

6 years ago

1.6.5

6 years ago

1.6.4

6 years ago

1.6.2

6 years ago

1.6.1

6 years ago

1.6.0

6 years ago

1.5.2

6 years ago

1.5.1

6 years ago

1.5.0

6 years ago

1.4.4

6 years ago

1.4.3

6 years ago

1.4.2

6 years ago

1.4.1

6 years ago

1.4.0

6 years ago

1.3.0

6 years ago

1.2.7

6 years ago

1.2.6

6 years ago

1.2.5

6 years ago

1.2.4

6 years ago

1.2.3

6 years ago

1.2.2

6 years ago

1.2.1

6 years ago

1.1.2

6 years ago

1.1.1

6 years ago

1.1.0

6 years ago

1.0.10

6 years ago

1.0.9

6 years ago

1.0.8

6 years ago

1.0.7

6 years ago

1.0.6

6 years ago

1.0.5

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago