uniapp 瀑布流

效果图

image.png

代码

<template>
    <view style="background: #F8F8F8;overflow: hidden;">
        <!-- 宫格类样式 -->
        <view class="product_list">
            <view v-for="(item, index) in newList" :key="index" class="products" @tap="jumpDetails(item.productId)">
                <view class="top" @tap="jumpDetails(item.productId)">
                    <image class="image" :src="item.img || defaultImg" mode=""></image>
                </view>
                <view class="bottom">
                    <view class="nameBox">
                        <!-- <view class="type" v-if="item.istuangou == true" >团购</view>
                        <view class="type" v-if="item.iskanjia == true" >砍价</view> -->
                        <view class="products_name">{{item.name}}</view>
                    </view>
                    <view class="price">
                        <text class="text1">￥ {{item.salePrice}}</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="loading" v-if="loading == true">加载中...</view>
        <view class="loading" v-if="isEnd">—— 到底啦 ——</view>
    </view>
</template>

<script>
    const app = getApp();

    export default {
        props: {
            loading: {
                type: Boolean,
                default: false
            },
            isEnd: {
                type: Boolean,
                default: false
            },

        },
        data() {
            return {
                defaultImg: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2840566132,1956215229&fm=26&gp=0.jpg',
                showModal: false,
                newList: [{
                        productId: 122,
                        name: "吃看看",
                        salePrice: 12,
                        img: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2296741453,1895942201&fm=26&gp=0.jpg"
                    }, {
                        productId: 3221,
                        name: "樱桃糖浆",
                        salePrice: 82,
                        img: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2181114481,2029467349&fm=26&gp=0.jpg"
                    },
                    {
                        productId: 123,
                        name: "要麻花辫",
                        salePrice: 52,
                        img: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3614647321,3347753997&fm=26&gp=0.jpg"
                    },
                    {
                        productId: 1213,
                        name: "水果拼盘",
                        salePrice: 32,
                        img: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2358432450,3613091560&fm=26&gp=0.jpg"
                    }
                ],
            };
        },

        created() {
            this.setProductListt(this.productList)
        },
        watch: {
            productList(value) {
                this.setProductListt(value)
            }
        },
        methods: {
            setProductListt(newVal) {
                const newList = [].concat(...Array.from(newVal.reduce((total, cur, index) => { //瀑布流处理
                    total[index % 2].push(cur);
                    return total;
                }, {
                    0: [],
                    1: [],
                    length: 2
                })));
                this.setData({
                    newList: newList
                });
            },
            jumpDetails(id) {
                // console.log("id",id)
                uni.navigateTo({
                    url: '/pages/shopping/goodsDetails/goodsDetails?id=' + id,
                    success: res => {},
                    fail: () => {},
                    complete: () => {}
                });
            }
        }
    };
</script>
<style scoped lang="scss">
    .product_list {
        padding: 20upx;
        column-count: 2;
        /*分为两列  用于瀑布流*/
        column-gap: 20upx;

        .products {
            height: 100%;
            overflow: auto;
            margin-bottom: 20upx;
            break-inside: avoid;
            /*用于瀑布流*/
            border-radius: 10upx;
            box-sizing: content-box;

            .image {
                width: 100%;
                height: 100%;
            }

            &:first-child {
                margin-top: 0;
            }

            .top {
                height: 45vw;
                overflow: hidden;
                position: relative;
                background-color: #ffffff;

                .cover {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                }

                .tags {
                    width: 65upx;
                    height: 65upx;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            }

            .bottom {
                padding: 15upx;
                background-color: #ffffff;
                overflow: hidden;

                .nameBox {
                    display: flex;

                    .type {
                        border-radius: 20upx;
                        background-color: #C7040A;
                        display: inline-block;
                        padding: 4upx 10upx;
                        text-align: center;
                        color: #fff;
                    }
                }

                .products_name {
                    /* height: 66upx; */
                    font-size: 24upx;
                    word-break: break-all;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    font-weight: bold;
                    color: #6E6E6E;
                }

                .price {
                    margin-top: 15upx;
                    color: #E62428;

                    .text1 {
                        font-size: 32upx;
                        font-weight: bold;
                        color: $myPriceColor;
                    }

                }

            }
        }
    }

    .loading {
        height: 80upx;
        line-height: 80upx;
        text-align: center;
        color: #ccc;
        font-size: 24upx;
        width: 100%;
        margin-bottom: 20upx;
    }
</style>

亲，点个赞吧！！！！