WEEX瀑布流

<template>
    <waterfall class="waterfall" column-count="2" left-gap="20" gap="30" right-gap="20" show-scrollbar="false">
        <cell class="cell" v-for="(products, index) in productList" :key="index">
            <div class="item" @click="skipdetails(index)">
                <image
                    :src="products.img"
                    resize="stretch"
                    class="waterfall-imgs"
                    :style="{ width: products.imgwidth + 'px', height: products.imgheight + 'px' }"
                    :index="index"
                    @load="loadImg"
                ></image>
                <count-down class="jiepai"></count-down>
                <div class="waterfall-title">{{ products.title }}</div>
                <view class="waterfall-price">
                    <view class="align-center">
                        <text class="price-text">当前：</text>
                        <text class="waterfall-price-text">{{ products.price }}</text>
                    </view>
                    <image class="img" src="../../../static/canpai/chuju.png"></image>
                </view>
            </div>
        </cell>
        <loading @loading="loadmore" class="loading" :display="loadMore ? 'show' : 'hide'">
            <loading-indicator class="loading-indicator"></loading-indicator>
            <text class="loading-txt">{{ loadMoreText }}</text>
        </loading>
    </waterfall>
</template>
<script>

import countDown from '../../../components/custom/countdown.vue';
var page = 1;
//引入产品数据
var dataObj = require('../../../graceUI/demoData/data.js');
var products = dataObj.products;
export default {
    data() {
        return {
            token:'',
            loadMoreText: '... 加载更多 ...',
            productList: [],
            loadMore: false
        };
    },
    created: function() {
        this.getList();
    },

    components: {
        countDown
    },
    methods: {
        ...mapActions('center', ['getAuction']),
        loadmore: function() {
            this.getList();
        },
        loadImg: function(e) {
            var width = e.size.naturalWidth;
            var height = e.size.naturalHeight;
            var index = e.currentTarget.attr.index;
            var newItem = this.productList[index];
            newItem.imgwidth = 350;
            newItem.imgheight = (height / width) * 350;
            this.productList.splice(index, 1, newItem);
        },
        skipdetails: function(index) {
            console.log(index);
            
        },
        getList: function() {
            var _self = this;
            this.loadMore = true;
            this.loadMoreText = '... 加载中 ...';
            if (page > 3) {
                this.loadMoreText = '定海神针告诉您已经到底了 (:';
                setTimeout(function() {
                    _self.loadMore = false;
                }, 1000);
                return;
            }
            this.loadingType = 1;
            setTimeout(function() {
                for (let i = 0; i < products.length; i++) {
                    products[i].imgwidth = '500';
                    products[i].imgheight = '500';
                }
                if (page == 1) {
                    _self.productList = dataObj.getArrRandomly(products); //打乱排序【模拟api】
                } else {
                    _self.productList = _self.productList.concat(dataObj.getArrRandomly(products));
                }
                page++;
                _self.loadMoreText = '... 加载更多 ...';
                _self.loadMore = false;
            }, 1000);
        }
    }
};
</script>
<style scoped>
.waterfall {
    width: 750px;
    background-color: #f1f1f1;
}
.waterfall-imgs {
    flex: 1;
}
.cell {
    padding-top: 10px;
    padding-bottom: 10px;
}
.item {
    border-radius: 10px;
    background-color: #ffffff;
}
.waterfall-title {
    width: 300px;
    margin-left: 18px;
    line-height: 50px;
    font-size: 30px;
    color: #333333;
    font-weight: 500;
}
.waterfall-price {
    width: 300px;
    height: 70px;
    margin-left: 18px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.align-center {
    flex-direction: row;
    align-items: flex-end;
}
.price-text {
    color: #ff4400;
    font-size: 18px;
    line-height: 50px;
}
.waterfall-price-text {
    font-size: 30px;
    color: #ff0036;
    font-weight: 500;
    line-height: 50px;
}
.waterfall-tags {
    width: 100px;
    height: 60px;
    line-height: 60px;
    font-size: 25px;
    text-align: center;
    background-color: #ff0036;
    color: #ffffff;
    border-radius: 5px;
}
.img {
    width: 68px;
    height: 34px;
}

.loading {
    height: 100px;
    justify-content: center;
    align-items: center;
}

.jiepai {
    width: 240px;
    height: 36px;
    background-color: #b71e2f;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
    top: -35px;
}
.loading-txt {
    color: #999999;
    font-size: 24upx;
}
</style>
 

转载于:https://my.oschina.net/u/3554714/blog/3080543