猿记录

一个记录、分享的博客

您的位置:主页 > 技术专栏 >

微信小程序上拉加载更多实例

2018-07-12 08:51:08 作者:yxl 次阅读 技术专栏

1、微信小程序列表内容更多,不需要一次性展示出来,这时候就需要我们上拉加载,小程序中提供了2中方式实现

     这个另外一片文章有介绍小程序下拉刷新上拉加载

这里我推荐使用onReachBottom 这种方式,如果是使用scroll-view的方式需要设定高度,这有意想不到的问题

实例:

wxml:
       //在模板中添加最后两个view 用来展示是否在加载的样式
      <navigator url="../detail/detail?aid={{item.id}}" class="article-item" wx:for="{{indexList}}" wx:key="unique" wx:for-index="idx">
           <image src="{{item.litpic}}" class="article-img"/>
            <view class="article-info">
              <text class="title">{{item.title}}</text>
              <text class="desc">{{item.description}}</text>
              <view class="bot">
                    <text class="tag">{{item.source}}</text>
                     <text class="read">阅读数:{{item.click}}</text>
                    <text class="time">{{item.pubdate}}</text>
              </view>
            </view>
      </navigator >
      <view class="loadingmore" hidden="{{!searchLoading}}">正在载入更多...</view>
      <view class="loadingmore complete" hidden="{{!searchLoadingComplete}}">已加载全部</view>
Page({
    data: {
        searchLoading: false, //"上拉加载"的变量,默认false,隐藏
        searchLoadingComplete: false, //“没有数据”的变量,默认false,隐藏
        page: 1, //页码
        size: 10, //每页多少条数据
        isFromSearch: true, //用于判断searchSongList数组是不是空数组,默认true,空的数组
    },
    getHomeArticle() {
        var _self = this;
        wx.request({
            url: api.urls.indexList + "1",
            data: {
                page: _self.data.page,
                size: _self.data.size
            },
            success: function(res) {
                if (res.data.code == 1) {
                    if (res.data.result.length > 0) {
                        var list = [];
                        _self.data.isFromSearch ? list = res.data.result : list = _self.data.indexList.concat(res.data.result)
                        list.forEach(element => {
                            element.pubdate = util.formatTime(element.pubdate, 'Y-M-D');
                        });
                        _self.setData({
                            indexList: list,
                            searchLoading: true
                        })
                    } else {
                        _self.setData({
                            searchLoadingComplete: true, //把“没有数据”设为true,显示
                            searchLoading: false //把"上拉加载"的变量设为false,隐藏
                        });
                    }
                } else {
                    wx.showToast({
                        title: "服务器错误",
                    })
                }
            }
        })
    },
    //上拉加载触发
    onReachBottom() {
        let that = this;
        if (that.data.searchLoading && !that.data.searchLoadingComplete) {
            that.setData({
                page: that.data.page + 1, //每次触发上拉事件,把searchPageNum+1
                isFromSearch: false //触发到上拉事件,把isFromSearch设为为false
            });
            that.getHomeArticle();
        }
    },
    onLoad: function() {
        //获取文章
        this.getHomeArticle();      
    },
    
})

       

凡本站注明“本站”或“投稿”的所有文章,版权均属于本站或投稿人,未经本站授权不得转载、摘编或利用其它方式使用上述作品。

编辑:yxl 关键词: 小程序
0

网友评论