小程序上拉加载更多数据,分类切换状态等实例

发现很多人对小程序的文章比较好奇,购物车那篇居然占了快三分一的访问量,因此写多篇关于小程序的常用功能。

上拉加载更多其实很简单,关键点只是知道上拉加载是变相的分页加载,然后通过初始化记录值和通过数组来保存加载过的数据(用户看回加载过的数据),同样的每行解析,分类切换的状态显示的想法是慕课网的七月讲师在视频的想法。我这里简化一下。

    data: {
        begin: 0,
        goods_list_key:[]//上拉加载更多初始化
    },
    goodsBegin: function (catId) {//初始化首页商品展示
        var that = this;
        var begin = this.data.begin;//初始化时是零,后面通过上拉会不断叠加
        //console.log(begin);
        wx.request({
            url: 'https://www.xxxxxx/' + begin + '/' + catId,
            method: 'GET', 
            header: { 'content-type': 'application/json' },
            success: function (res) {
                if(res.data ==""){//没有返回数据时的判断
                    wx.showToast({
                    title: '已加载完所有数据',
                    icon: 'success',
                    duration: 2000
                    })
                    //console.log(res.data);
                /*
                that.setData({
                begin:0                    
                })
                */
                }else{
    var goods_list_key=that.data.goods_list_key;//通过在小程序的data开数组进行保存,数组是专门处理数据保存的方法
    goods_list_key=goods_list_key.concat(res.data);//通过concat来合拼所有数组统一为一个数组
    for(var i=0;i<goods_list_key.length;i++){//对商品的价格进行小数点后两位的保留显示
   var costPrice= parseFloat(goods_list_key[i].costPrice);
   costPrice =costPrice.toFixed(2);
   goods_list_key[i].costPrice=costPrice;
    }
               that.setData({//赋值
                    goods_list_key: goods_list_key
                })
                }
            }
        })
    },
    scrolltolower: function () {//上拉加载事件
        var begin = this.data.begin;//获取记录值,
        begin += 4;//自加
        this.setData({//更新记录值
            begin: begin
        });
        var catId = wx.getStorageSync('catId');//获取用户点击的分类缓存
        this.goodsBegin(catId);//执行加载数据函数
    },
    cateId: function (event) {//用户切换分类时,分类点亮的显示效果,商品显示初始化
        var catId = event.currentTarget.dataset.catId;//获取传过来的分类id
        wx.setStorageSync('catId', catId);//记录缓存。用于上拉加载事件用
        var catIds=new Array;//开数组对象
        catIds[catId]=true;//将获取的分类id记录到数组,并赋予状态
        this.setData({//将begin设回为0
        catIds:catIds,
        goods_list_key:[],//重置商品保存数组
        begin:0//初始化记录值
        });
        //wx.setStorageSync('catIds',catIds);
        this.goodsBegin(catId);//执行加载数据函数说
    }


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值