技術標籤：vue 時間元件支援時分秒

vue-waterfall2

• 不需知道元素寬高，可寬高自適應
• 自定義程度高
• 提供懶載入功能(lazy-src)
• 提供Event:loadmore (pc/android端滑動到底部觸發，ios端需要上拉觸發)
• 使用極為簡便,適用於PC/ios/android

有問題歡迎提issues

移動端效果:

Demo

Demo

GITHUB

npm i 
npm run dev

Installation

npm install --save vue-waterfall2

Usage

注意:

• 1. itemWidth需要與gutterWidth一起使用才會生效，否則會進行自適應寬度(使用rem佈局時，需先計算出高度再傳值)
• 2.使用了waterfall的父元件 style 不允許使用scoped,否則樣式會有問題
• 3.懶載入需要用`lazy-src`替換<img>的src屬性

main.js

import waterfall from 'vue-waterfall2'
Vue.use(waterfall)

app.vue(此元件 style不使用 scoped)

```<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="載入錯誤"  />   //lazy-src 懶載入
          <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.itemWidth需要與gutterWidth一起使用才會生效，否則會進行自適應寬度(使用rem佈局時，需先計算出高度再傳值)
  2.使用了waterfall的元件不允許使用scoped,否則樣式會有問題
*/

import Vue from 'vue'
    export default{
        data(){
          return{
            data:[],
            col:'5',
          }
        },
        computed:{
          itemWidth(){  
            return (138*0.5*(document.documentElement.clientWidth/375)).toString()   #rem佈局 計算寬度
          },
          gutterWidth(){
            return (9*0.5*(document.documentElement.clientWidth/375)).toString()    #rem佈局 計算x軸方向margin(y軸方向的margin自定義在css中即可)
          }
        },
        methods:{
          mix(){
            this.$waterfall.mix()
          },
          switchCol(col){
            this.col = col
            console.log(this.col)
          },
          loadmore(index){
            this.data = this.data.concat(this.data)
          }
        }
    }
 

懶載入

對於需要使用懶載入的圖片，需要使用`lazy-src`屬性

<waterfall :col='col'   :data="data"     >
  <template>
     <img v-if="item.img" :lazy-src="item.img" alt="載入錯誤"  />
  </template>
</waterfall>

<waterfall> 屬性

Name | Default | Type | Desc

col | 2 | Number | 列數

width | null | Number | 寬度

gutterWidth | 10 | Number | 間隔的寬度

data | [] | Array | 資料

isTransition | true | Boolean | 載入圖片是否使用過渡動畫

$waterfall API

this.$waterfall.forceUpdate()   //forceUpdate