国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

james / 2670人閱讀

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

vue-waterfall2

1.不需知道元素寬高，可寬高自適應

2.自定義程度高

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

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

5.使用極為簡便,適用于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一起使用才會生效，否則會進行自適應寬度(使用rem布局時，需先計算出自適應后的寬度再傳值)

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

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



/*
  注意:
  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)
          }
        }
    }
屬性
Name Default Type Desc
col 2 Number 列數
width null Number 寬度
gutterWidth 10 Number 間隔的寬度
data [] Array 數據
isTransition true Boolean 加載圖片是否使用過渡動畫
lazyDistance 500 Number 圖片進行懶加載的距離
懶加載

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/108623.html

相關文章

  • 【收藏】2019年最新Vue相關精品開源項目庫匯總

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

    williamwen1986 評論0 收藏0

  • 小程序之圖片瀑布流（最全實現方式，額外加送懶加載）

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

    rubyshen 評論0 收藏0

  • 用vue.js寫的一個瀑布流的組件

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

    AlphaWallet 評論0 收藏0

發表評論

0條評論

james

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<