[Простой в использовании, поддерживает ленивую загрузку] vue-waterfall2 основан на компоненте водопада Vue.js.

Vue.js

vue-waterfall2

  • 1. Вам не нужно знать ширину и высоту элемента, вы можете настроить ширину и высоту
  • 2. Поддержка режима без изображения, высокая степень настройки контента.
  • 3. Поддержка ленивой загрузки (lazy-src)
  • 4. Обеспечьте событие: loadmore (сторона ПК/Android скользит вниз для срабатывания, сторона ios должна потянуть вверх для срабатывания)
  • 5. Очень прост в использовании, подходит для ПК/ios/android

Если у вас есть какие-либо вопросы, пожалуйста, присылайте вопросы и предложения; Спасибо за вашу звезду!
Добро пожаловать в мой блог (JS/Front-end Engineering/Python/Algorithms)! ! !

移动端效果

Demo

Common Demo
Lazyload Demo
Code Demo

GITHUB

npm i 
npm run dev

Installation

 npm i vue-waterfall2@latest --save

Атрибуты

Name Default Type Desc
height 100% String высота контейнера
col 2 Number Число столбцов
width - Number ширина
gutterWidth 10 Number ширина интервала
data [] Array данные
isTransition true Boolean Использовать ли анимацию перехода для загрузки изображений
lazyDistance 300 Number Расстояние, вызывающее ленивую загрузку изображений
loadDistance 300 Number Подтягивание триггера для загрузки большего расстояния

ленивая загрузка

Для изображений, которым необходимо использовать ленивую загрузку, вам нужно использоватьlazy-srcАтрибуты

<waterfall :col='col'   :data="data"     >
  <template>
     <img v-if="item.img" :lazy-src="item.img" alt="加载错误"  />
  </template>
</waterfall>

Events

Name Data Desc
loadmore - Прокрутите до нижнего триггера
scroll obj Получить объект события при прокрутке
finish - полный рендеринг элемента

$waterfall API

this.$waterfall.forceUpdate()   //forceUpdate

Usage

Уведомление:

  1. gutterWidthнужно сwidthВступит в силу при совместном использовании, иначе будет выполняться адаптивная ширина (при использовании rem-макета перед передачей значения нужно вычислить адаптивную ширину)
  2. использовалwaterfallРодительский компонент, если проблема со стилем, можно удалить cssscopedпопытайся
main.js
import waterfall from 'vue-waterfall2'
Vue.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"  >
      <template >
        <div class="cell-item" v-for="(item,index) in data">
          <img v-if="item.img" :src="item.img" alt="加载错误"  /> 
          <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>
      </template>
    </waterfall>
    
  </div>
</template>


/*
  注意:
  1. gutterWidth需要与width一起使用才会生效，否则会进行自适应宽度(使用rem布局时，需先计算出自适应后的宽度再传值)
  2. 使用了`waterfall`的父组件,如果样式存在问题，可去掉css `scoped`尝试一下
*/

import Vue from 'vue'
	export default{
	    data(){
	        return{
	            data:[],
	            col:5,
	        }
	    },
	    computed:{
	      itemWidth(){  
	            return (138*0.5*(document.documentElement.clientWidth/375))  #rem布局 计算宽度
	      },
	      gutterWidth(){
	            return (9*0.5*(document.documentElement.clientWidth/375))	#rem布局 计算x轴方向margin(y轴方向的margin自定义在css中即可)
	      }
	    },
	    methods:{
            scroll(scrollData){
                console.log(scrollData)
            },
	        switchCol(col){
	            this.col = col
	            console.log(this.col)
	      },
	      loadmore(index){
	            this.data = this.data.concat(this.data)
	      }
	    }
	}
Категории