caimei-applets-hehe/pages/goods/good-floorMore.vue

<template>
    <view class="good-floor-more">
        <tui-skeleton v-if="isRequest" loadingType="2"></tui-skeleton>
        <template v-if="!isRequest">
            <!-- 商品列表 -->
            <view class="product-list">
                <template v-for="(product, index) in productList">
                    <cm-product class="product" :key="index" :data="product"></cm-product>
                </template>
            </view>
            <template v-if="productList.length >= 6">
                <tui-loadmore :index="3" :visible="loadmore"></tui-loadmore>
                <tui-nomore :text="loadingText" :visible="!loadmore" backgroundColor="#f7f7f7"></tui-nomore>
            </template>
            <!-- 侧边 -->
            <scroll-top :isScrollTop="isScrollTop" :bottom="160"></scroll-top>
        </template>
    </view>
</template>

<script>
import CmProduct from '@/components/cm-module/cm-product/cm-product.vue'
import { mapGetters } from 'vuex'
export default {
    components: {
        CmProduct
    },
    data() {
        return {
            productList: [], //商品列表
            pageNum: 1,
            pageSize: 6,
            floorId: undefined,
            title: '',
            hasNextPage: false,
            isScrollTop: false,
            isRequest: true,
            loadmore: false, // 正在加载更多
            timer: null
        }
    },
    onLoad(option) {
        this.floorId = option.floorId
        this.title = option.title
        this.init()
    },
    computed: {
        ...mapGetters(['userId']),
        loadingText() {
            return this.hasNextPage ? '上拉加载更多' : '没有更多了'
        }
    },
    methods: {
        // 首页初始化
        async init() {
            uni.setNavigationBarTitle({
                title: this.title
            })
            try {
                await this.fetchProductList()
                this.isRequest = false
            } catch (e) {
                this.$util.msg(e.msg, 2000)
            }
        },
        //初始化商品数据列表
        fetchProductList() {
            this.loadmore = true
            return this.ProductService.QueryProductList({
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                floorId: this.floorId,
                userId: this.userId
            })
                .then(response => {
                    let data = response.data
                    this.productList = [...this.productList, ...data.list]
                    this.hasNextPage = data.hasNextPage
                    this.title = data.title
                    this.pageNum++
                    this.loadmore = false
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        }
    },
    onPageScroll(e) {
        this.isScrollTop = e.scrollTop > 400
    },
    onReachBottom() {
        if (!this.hasNextPage) return
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
            console.log('触底了')
            this.fetchProductList()
        }, 200)
    }
}
</script>

<style lang="scss" scoped>
.good-floor-more {
    background: $uni-floor-bg-color;
}
.product-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 24rpx;
    box-sizing: border-box;
    .product {
        margin-top: 24rpx;
    }
}
</style>