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

11 months ago

2.0.6

11 months ago

1.10.7

1 year ago

2.0.3

1 year ago

2.0.2

1 year ago

2.0.5

1 year ago

2.0.4

1 year ago

2.0.1

1 year ago

2.0.0

1 year ago

2.0.0-beta.1

1 year ago

1.10.7-beta.1

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

6 years ago

1.7.5

6 years ago

1.7.4

6 years ago

1.7.3

6 years ago

1.7.2

6 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