• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序上拉加载下拉刷新

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

微信小程序实现上拉加载下拉刷新

使用小程序默认提供方法。

(1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载的动画可能会是白色背景,会看不清。

{
    "usingComponents": {
        "annicate": "/components/annicate/index"
    },
    "navigationBarTitleText": "通告列表",
    "enablePullDownRefresh": true,
    "backgroundColor": "#ffffff",
    "backgroundTextStyle": "dark"
}

(2). 在 js 中处理逻辑

/**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        // 标题栏显示刷新图标,转圈圈
        wx.showNavigationBarLoading()
        // 请求最新数据
        this.initDate(true);
        setTimeout(() => {
            // 标题栏隐藏刷新转圈圈图标
            wx.hideNavigationBarLoading()
        }, 1000);
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        setTimeout(() => {
            this.initDate();
        }, 300);
    },

data 中

loading: false,                         // 是否正在加载中
        loaded: false,                          // 是否加载完全部数据
/**
     * 初始化数据
     */
    initDate: function (isPage) {
        var that = this;
        // 加载第一页
        if (isPage === true){
            that.setData({ 
                notice_list: [],
                page: 1
            });
        } else {
            var num = that.data.page + 1;
            if (num <= that.data.totalPage) {
                that.setData({
                    page: num
                });
            } else if (num > that.data.totalPage) {
                that.setData({
                    loaded: true
                });
            }
        }

        if (that.data.loading) return;
        if (that.data.loaded) return;
        
        var json = {
            keywords: that.data.keywords
        };
        wx.showLoading({
            title: \'加载中\',
        })

        that.setData({ loading: true, loadTitle: \'\' });
        noticeList(json).then(res => {
            let notice_list = app.SplitArray(res.data.notice_list.list, that.data.notice_list);
            wx.hideLoading()
            that.setData({
                notice_list: notice_list,
                loading: false,
                loadTitle: that.data.page == res.data.notice_list.total_page ? \'已全部加载\' : \'加载更多\',
                totalPage: res.data.notice_list.total_page
            });
        }).catch(err => {
            that.setData({ loading: false, loadTitle: \'加载更多\' });
        });;
    },

页面中

<view class=\'annicate_wrap\'>
            <annicate bindtap=\'detailFun\' wx:for="{{notice_list}}" wx:key="index" jsonDate="{{item}}"></annicate>
            <view class=\'loadingicon acea-row row-center-wrapper\' wx:if=\'{{notice_list.length > 0}}\'>
                <text class=\'loading iconfont icon-jiazai\' hidden=\'{{loading==false}}\'></text>{{loadTitle}}
            </view>
        </view>
app.SplitArray是小程序连接两个数组的方法
app.js 中
/*
     * 合并数组
     * @param array list 请求返回数据
     * @param array sp 原始数组
     * @return array
     */
    SplitArray: function(list, sp) {
        return util.SplitArray(list, sp)
    }

untils 中

/*
* 合并数组
*/
const SplitArray = function (list, sp) {
    if (typeof list != \'object\') return [];
    if (sp === undefined) sp = [];
    for (var i = 0; i < list.length; i++) {
        sp.push(list[i]);
    }
    return sp;
}

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序跳转tabbar的一些问题发布时间:2022-07-18
下一篇:
零基础入门微信小程序开发发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap