• 小程序分页加载


    1、app.json启用enablePullDownRefresh

    在window配置项里面添加"enablePullDownRefresh": true

    2、页面.wxml

    <view class='panel base-padding base-margin-bottom cate-data'>
      <view class='panel-heading'>
        <view class='panel-title font-lv1 strong'>唐诗     
        </view>
      </view>
      <view class='panel-body'>  
        <block wx:for="{{contentlist}}">
          <view class='row'> 
              <navigator url='/pages/intro/intro' class='ellipsis-1row font-lv2'>{{item.title}}</navigator>      
              <view class='text-muted info'>{{item.authors}}</view>  
              <view class='text-muted ellipsis-2row desc'>{{item.content}}
              </view>        
          </view>
        </block>
      </view>
    </view>

    3、后台方法返回

    由于是测试,找了网上一个免费https接口:https://api.apiopen.top/getTangPoetry?page=1&;count=5

    返回如下:
    {"code":200,"message":"成功!","result":[{"title":"帝京篇十首 一","content":"秦川雄帝宅,函谷壮皇居。|绮殿千寻起,离宫百雉余。|连甍遥接汉,飞观迥凌虚。|云日隐层阙,风烟出绮疏。","authors":"太宗皇帝"},{"title":"帝京篇十首 二","content":"岩廊罢机务,崇文聊驻辇。|玉匣启龙图,金绳披凤篆。|韦编断仍续,缥帙舒还卷。|对此乃淹留,欹案观坟典。","authors":"太宗皇帝"},{"title":"帝京篇十首 三","content":"移步出词林,停舆欣武宴。|雕弓写明月,骏马疑流电。|惊雁落虚弦,啼猿悲急箭。|阅赏诚多美,于兹乃忘倦。","authors":"太宗皇帝"},{"title":"帝京篇十首 四","content":"鸣笳临乐馆,眺听欢芳节。|急管韵朱弦,清歌凝白雪。|彩凤肃来仪,玄鹤纷成列。|去兹郑卫声,雅音方可悦。","authors":"太宗皇帝"},{"title":"帝京篇十首 五","content":"芳辰追逸趣,禁苑信多奇。|桥形通汉上,峰势接云危。|烟霞交隐映,花鸟自参差。|何如肆辙迹?万里赏瑶池。","authors":"太宗皇帝"}]}

    4、页面.js

    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        page: 1,
        pageSize: 5,
        hasMoreData: true,
        contentlist: []
      },
    
      getInfo: function () {
        var that = this;
        wx.request({
          url: 'https://api.apiopen.top/getTangPoetry',
          data: { page: that.data.page, count: that.data.pageSize },
          success: function (res) {
            console.log(res);// 服务器回包信息
            var contentlistTem = that.data.contentlist;       
            if (res.data.code == 200) {
              if (that.data.page == 1) {
                contentlistTem = []
              }
              var contentlist = res.data.result;
              if (contentlist.length < that.data.pageSize) {
                that.setData({
                  contentlist: contentlistTem.concat(contentlist),
                  hasMoreData: false
                })
              } else {
                that.setData({
                  contentlist: contentlistTem.concat(contentlist),
                  hasMoreData: true,
                  page: that.data.page + 1
                })
              }        
            }else{
              wx.showToast({
                title: '出现异常'
              })
            }
          }
    
        })
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        var that = this;
        that.getInfo();
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
        this.data.page = 1;
        this.getInfo();
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
        if (this.data.hasMoreData) {
          this.getInfo();
        } else {
          wx.showToast({
            title: '没有更多数据',
          })
        }
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })

    界面效果如下:

    备注:
    分页代码主要参考这篇文章https://blog.csdn.net/xiehuimx/article/details/74938034

  • 相关阅读:
    行测-民法典
    行测-中心理解
    行测-资料分析
    行测-数量关系
    行测-三视图、截面图、立体拼合
    行测-加强题型
    C# Unity游戏开发——Excel中的数据是如何到游戏中的 (四)2018.4.3更新
    UGUI batch 规则和性能优化
    Unity 绘图性能优化
    Unity UGUI —— 鼠标穿透UI问题(Unity官方的解决方法)
  • 原文地址:https://www.cnblogs.com/gdjlc/p/10362769.html
Copyright © 2020-2023  润新知