前端调用后端接口,并把数据做分页处理

前端最主要的工作就是联合后端,调用后端接口,把页面用后端数据渲染出来

后端接口一般做封装处理

如下图:封装了一个接口,默认值处如果有默认值就写,如果没有默认值就直接写参数名,request下方记得把参数写全

在methods方法下方进行调用封装的接口,方法名随便起,调用接口方法中的变量和在封装接口中request保持一直,最下方做成功返回数据,若是做数据分页处理,在成功返回下方进行做(下方详细说明)

methods中的方法处理好后,先在script下方声明that,格式就是 var that,记得导入你所封装的接口,import { StoreCommodityList } from '../../../servies',然后在onLoad下方调用方法时先声明that = this,下方写入接口所给的数据,图中接口请求示例:{{host}}/f/api/guiji/getStoreCommodityList?guiJiCode=G340101002&pageSize=10&pageNo=1,最后调用接口的方法名

分页处理

先在html中写入uni-load-more(使用之前记得导入),loadMoreStatus为状态参数名

然后在return下方给loadMoreStatus一个默认状态

在所需要数据接口下方成功下做分页处理,因为没有总页数,所以就判断数据的长度和页大小就行比较

下拉刷新和触底加载

注意:

触底加载页数要+1并且还要判断是否需要下拉刷新,状态是否为'more',

下拉刷新数据需要先清空

<template>
    <view>
        <u-sticky>
            <view style="background-color: #ffffff;">
                <uni-section :title="terminal.guiJiCode+'('+terminal.jiGuiName+')'" :subTitle="terminal.store.name"
                    type="line">
                    <view style="margin-bottom: 5px;">
                        <u-tag style="margin-left: 10px;" v-if="terminal.online" text="在线" type="success" />
                        <u-tag style="margin-left: 10px;" v-if="!terminal.online" text="离线" type="error" />
                        <u-tag style="margin-left: 10px;" v-if="terminal.terminalOpened" text="营业" type="success" />
                        <u-tag style="margin-left: 10px;" v-if="!terminal.terminalOpened" text="维护" type="error" />
                    </view>
                </uni-section>
                <uni-notice-bar showIcon scrollable   v-if="text!=null" single :text="text" />
            </view>
        </u-sticky>
        <u-empty v-if="(terminalGoodsList==null||terminalGoodsList.length==0)&&loadMoreStatus!='loading'" mode="list"
            text="没有添加任何商品"></u-empty>
        <view class="uni-product-list" style=" margin-bottom: 50px;">
            <view class="uni-product" v-for="(product,index) in terminalGoodsList" :key="index">
                <view class="image-view">
                    <!-- <image v-if="renderImage" class="uni-product-image"
                        :src="cosUrl+'/goods_images/'+product.goods.goodsImage">
                    </image> -->
                    <image class="uni-product-image" :src="product.commodity.image" ></image>
                </view>
                <view class="uni-product-title">{{product.commodity.title}}</view>

                <view class="uni-product-price">
                    <text class="uni-product-price-original">￥{{product.discountPrice}}</text>
                    <!-- <text style="margin-left: 10px;">
                        <u-tag type="primary" :text="'库存:'+product.stockNum" />
                    </text> -->
                    <text class="uni-product-tip">{{product.commodity.standard}}</text>
                </view>
                <!-- <view class="uni-product-title title">保质期至：{{product.expireDate.replace("00:00:00", "")}}</view> -->

            </view>
            <!-- <uni-load-more :status="loadMoreStatus"></uni-load-more>-->
            <uni-load-more :status="loadMoreStatus"/>
            <view class="goods-carts">
                <uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
                    @buttonClick="placeOrder" />
            </view>
        </view>
        <view class="backTop">
            <u-back-top :scrollTop="scrollTop" mode="circle" icon="arrow-upward" :iconStyle="iconStyle" top="600" />
        </view>
    </view>
</template>

<script>
    //导入数据API的二次封装模块
    import { Guiji, NewsList, StoreCommodityList } from '../../../servies'
    var that
    export default {
        data() {
            return {
                loadMoreStatus: 'more',  //当前正在加载数据吗?必须等待上一次加载完成才能下一次的加载
                scrollTop:0,
                iconStyle: {
                    fontSize: '25px',
                },
                terminalGoodsList: [],
                terminal:{},
                NewsList:[],
                options: [],
                buttonGroup: [{
                    text: '开门选取商品',
                    backgroundColor: 'linear-gradient(90deg, #1E83FF, #0053B8)',
                    color: '#fff'
                }],
                pageNo: 1,
                pageSize: 10,
                guiJiCode:'G340101002',
                modId:'9fbfce19839b4829899765d5724127cb',
                text: '',
            };
        },
        async onLoad(){
            that = this;
            this.pageNo=1;
            this.pageSize=10;
            this.guiJiCode='G340101002';
            this.goodsList();  //商品列表
            
            this.guiJiCode='G340101002';
            this.guiJi();      //柜机信息
            
            
            this.pageNo=1;
            this.pageSize=10;
            this.modId='9fbfce19839b4829899765d5724127cb';
            this.newsList()     //消息公告
        },
        onReachBottom(){      //触底加载
            //防止错误加载 当状态不为'more'时不触发触底加载
            if(this.loadMoreStatus != 'more'){
                return;
            }
            console.log('滚动到页面底部了,加载下一页数据');
            this.pageNo += 1     //页数
            this.goodsList()
        },
        onPullDownRefresh() {   //下拉刷新
            
            // console.log('用户在页面顶部下拉了,希望刷新当前页面');
            // 清除当前已经加载到的数据和状态
            this.terminalGoodsList = []    //先清空数据
            this.pageNo = 1
            this.goodsList()
            // 隐藏页面顶部的"下拉刷新"提示动画符
            uni.stopPullDownRefresh()   //停止下拉刷新(所产生的动画提示符)
        },
        methods:{
            onPageScroll(e) {
                this.scrollTop = e.scrollTop;
            },
            async goodsList(){
                that.loadMoreStatus = 'loading'
                //商品列表
                let data = await StoreCommodityList(
                    this.pageNo,
                    this.pageSize,
                    this.guiJiCode
                );
                if(data.success){
                    if(data.data.length < that.pageSize){
                        that.loadMoreStatus = 'noMore'
                    }else {
                        that.loadMoreStatus = 'more'
                    }
                    that.terminalGoodsList = [...that.terminalGoodsList,...data.data]
                }else {
                    that.loadMoreStatus = 'more'
                }
                
            },
            async guiJi(){            //柜机信息
                let data = await Guiji(
                    this.guiJiCode
                )
                if(data.success){
                    that.terminal = data.data
                };
            },
            async newsList(){            //消息公告
                let data = await NewsList(
                    this.pageNo,
                    this.pageSize,
                    this.modId
                )
                if(data.success){
                    that.NewsList = data.data
                    for(var item in that.NewsList){
                        console.log('item1',item);
                        let news = that.NewsList[item]
                        console.log('item2',news.summary);  
                        that.text += ' ' + news.summary
                        console.log("text3",that.text);
                    }
                };
            }
        },
    };
</script>

<style lang="scss">
    /* product */
    page {
        background: #F8F8F8;
    }

    view {
        font-size: 28upx;
    }

    .goods-carts {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: column;
        position: fixed;
        left: 0;
        right: 0;
        /* top:20; */
        /* #ifdef H5 */
        left: var(--window-left);
        right: var(--window-right);
        /* #endif */
        bottom: 0;
    }

    .uni-product-list {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        flex-direction: row;
    }

    .uni-product {
        /* border: 1px solid black; */
        padding: 20upx;
        display: flex;
        flex-direction: column;
        margin-bottom: 30upx;
    }

    .image-view {
        /* border: 1px solid red; */
        height: 330upx;
        width: 330upx;
        margin: 12upx 0;
    }

    .uni-product-image {
        height: 330upx; 
        width: 330upx;
    }

    .uni-product-title {
        width: 300upx;
        word-break: break-all;
        display: -webkit-box;
        overflow: hidden;
        line-height: 1.5;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .uni-product-price {
        margin-top: 10upx;
        font-size: 28upx;
        line-height: 1.5;
        position: relative;
    }

    .uni-product-price-original {
        color: #e80080;
    }

    .uni-product-price-favour {
        color: #888888;
        text-decoration: line-through;
        margin-left: 10upx;
    }

    .uni-product-tip {
        position: absolute;
        right: 10upx;
        background-color: #1E83FF;
        color: #ffffff;
        padding: 0 10upx;
        border-radius: 5upx;
    }
    .backTop{
        opacity: .7;    
        &:active{
            opacity: 1;
        }
    }

    .title {
        font-size: 24rpx;
    }
</style>