成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

【簡(jiǎn)單好用，支持懶加載】 vue-waterfall2 基于Vue.js 瀑布流 組件

james / 2768人閱讀

摘要：不需知道元素寬高，可寬高自適應(yīng)自定義程度高支持懶加載提供端滑動(dòng)到底部觸發(fā)，端需要上拉觸發(fā)使用極為簡(jiǎn)便適用于有問題歡迎提前端工程化算法注意需要與一起使用才會(huì)生效，否則會(huì)進(jìn)行自適應(yīng)寬度使用布局時(shí)，需先計(jì)算出自適應(yīng)后的寬度再傳值使用了的

vue-waterfall2

1.不需知道元素寬高，可寬高自適應(yīng)

2.自定義程度高

3.支持懶加載(lazy-src)

4.提供Event:loadmore (pc/android端滑動(dòng)到底部觸發(fā)，ios端需要上拉觸發(fā))

5.使用極為簡(jiǎn)便,適用于PC/ios/android

有問題歡迎提issues、suggestions;Thank you for your Star !
welcome to my blog(JS/前端工程化/Python/算法) ！??！

Demo

Common Demo
Lazyload Demo

GITHUB

npm i 
npm run dev
Installation 
 npm i vue-waterfall2@latest --save
Usage

注意:

gutterWidth需要與width一起使用才會(huì)生效，否則會(huì)進(jìn)行自適應(yīng)寬度(使用rem布局時(shí)，需先計(jì)算出自適應(yīng)后的寬度再傳值)

使用了waterfall的父組件,如果樣式存在問題，可去掉css scoped嘗試一下

main.js
import waterfall from "vue-waterfall2"
Vue.use(waterfall)
app.vue(此組件 style不使用 scoped)



/*
  注意:
  1. gutterWidth需要與width一起使用才會(huì)生效，否則會(huì)進(jìn)行自適應(yīng)寬度(使用rem布局時(shí)，需先計(jì)算出自適應(yīng)后的寬度再傳值)
  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布局 計(jì)算寬度
          },
          gutterWidth(){
                return (9*0.5*(document.documentElement.clientWidth/375))    #rem布局 計(jì)算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)
          }
        }
    }
屬性
Name Default Type Desc
col 2 Number 列數(shù)
width null Number 寬度
gutterWidth 10 Number 間隔的寬度
data [] Array 數(shù)據(jù)
isTransition true Boolean 加載圖片是否使用過渡動(dòng)畫
lazyDistance 500 Number 圖片進(jìn)行懶加載的距離
懶加載

對(duì)于需要使用懶加載的圖片，需要使用lazy-src屬性
Events
Name Data Desc
loadmore null 滾動(dòng)到底部觸發(fā)
scroll obj 獲取滾動(dòng)時(shí)的event對(duì)象
$waterfall API 
this.$waterfall.forceUpdate()   //forceUpdate

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/108623.html

相關(guān)文章

  • 【收藏】2019年最新Vue相關(guān)精品開源項(xiàng)目庫匯總

    摘要：前言本文的前身是源自上的項(xiàng)目但由于該項(xiàng)目上次更新時(shí)間為年月日，很多內(nèi)容早已過期或是很多近期優(yōu)秀組件未被收錄，所以小肆今天重新更新了內(nèi)容并新建項(xiàng)目。提交的項(xiàng)目格式如下項(xiàng)目名稱子標(biāo)題相關(guān)介紹如果收錄的項(xiàng)目有錯(cuò)誤，可以通過反饋給小肆。 前言 本文的前身是源自github上的項(xiàng)目awesome-github-vue,但由于該項(xiàng)目上次更新時(shí)間為2017年6月12日，很多內(nèi)容早已過期或是很多近期優(yōu)...

    williamwen1986 評(píng)論0 收藏0

  • 小程序之圖片瀑布流（最全實(shí)現(xiàn)方式，額外加送懶加載）

    摘要：完整代碼請(qǐng)戳我們回到小程序，此時(shí)接口返回的數(shù)據(jù)如下可以看到每個(gè)圖片都有高度了，接下來我們實(shí)現(xiàn)瀑布流布局，等下，我們搞下瀑布流布局的懶加載，關(guān)于小程序的懶加載，猛戳了解更多。 效果圖 來來來，看啊看，外面的世界多好看， showImg(https://segmentfault.com/img/remote/1460000014887454?w=371&h=580); 效果圖展示的是瀑布流...

    rubyshen 評(píng)論0 收藏0

  • 用vue.js寫的一個(gè)瀑布流的組件

    摘要：有三個(gè)參數(shù)將被渲染的元素是一個(gè)，在渲染子元素的合適時(shí)機(jī)例如的事件里，調(diào)用即可。從里面拿到一個(gè)元素，找出當(dāng)前高度最小的一列，將放入該列。渲染，然后調(diào)用方法進(jìn)入瀑布流還有個(gè)常見的功能就是滾動(dòng)加載了，目前尚未加入此功能，會(huì)盡快加上。 很少寫文章，很亂，，見諒。 我所見過的瀑布流都是固定的幾列，然后每一列包含若干個(gè)元素（圖文元素），每一列的總高度都差不多。所以我這個(gè)組件的功能就很簡(jiǎn)單，可以設(shè)...

    AlphaWallet 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<