• 小程序:下拉刷新,上拉加载


    wxml:

    <view class='view-container'>  
      <block wx:for='{{articles}}' wx:key='{{item.id}}'>  
        <view class='articles-container'>  
          <view class='info'>  
            <image class='avatar' src='{{item.avatar}}'></image>{{item.nickname}}  
            <text class='created-at'>{{item.created_at}}</text>  
            <text class='category'>{{item.category}}</text>  
          </view>  
        </view>  
      </block>  
      <view class='data-loading' hidden='{{hidden}}'>  
        数据加载中...  
      </view>  
    </view> 
    

    wxss:

    .view-container {  
      background-color: #fff;  
    }  
      
    .data-loading {  
      height: 100rpx;  
      line-height: 100rpx;  
      background-color: #eee;  
      text-align: center;  
      font-size: 14px;  
    }  
      
    .articles-container {  
      border-bottom: 1px solid #eee;  
      margin: 30rpx 10rpx;  
      background-color: #eee;  
    }  
      
    .articles-container .info {  
      font-size: 12px;  
      margin: 20rpx 0rpx;  
      height: 100%;  
      display: inline-block;  
    }  
      
    .articles-container .info .avatar {  
       60rpx;  
      height: 60rpx;  
      margin-right: 10rpx;  
      border-radius: 60rpx;  
      display: inline-block;  
      vertical-align: middle;  
    }  
      
    .articles-container .info .created-at {  
      margin: 0px 20rpx;  
      display: inline-block;  
      vertical-align: middle;  
    }  
      
    .articles-container .info .category {  
      color: #3399ea;  
      display: inline-block;  
      vertical-align: middle;  
    }  
    

    js:

    Page({
    
      data: {
        /** 
         * 需要访问的url 
         */
        urls: [
          'https://www.csdn.net/api/articles?type=more&category=home&shown_offset=0',
          'https://www.csdn.net/api/articles?type=new&category=arch',
          'https://www.csdn.net/api/articles?type=new&category=ai',
          'https://www.csdn.net/api/articles?type=new&category=newarticles'
        ],
        /** 
         * 当前访问的url索引 
         */
        currentUrlIndex: 0,
        /** 
         * 获取到的文章 
         */
        articles: [],
        /** 
         * 控制上拉到底部时是否出现 "数据加载中..." 
         */
        hidden: true,
        /** 
         * 数据是否正在加载中,避免数据多次加载 
         */
        loadingData: false
      },
    
      onLoad: function (options) {
        this.loadData(false);
      },
    
      /** 
       * 加载数据 
       */
      loadData: function (tail, callback) {
        var that = this,
          urlIndex = that.data.currentUrlIndex;
        wx.request({
          url: that.data.urls[urlIndex],
          success: function (r) {
            var oldArticles = that.data.articles,
              newArticles = tail ? oldArticles.concat(r.data.articles) : r.data.articles;
            that.setData({
              articles: newArticles,
              currentUrlIndex: (urlIndex + 1) >= that.data.urls.length ? 0 : urlIndex + 1
            });
            if (callback) {
              callback();
            }
          },
          error: function (r) {
            console.info('error', r);
          },
          complete: function () { }
        });
      },
    
      /** 
       * 监听用户下拉动作 
       */
      onPullDownRefresh: function () {
        console.info('onPullDownRefresh');
        var loadingData = this.data.loadingData,
          that = this;
        if (loadingData) {
          return;
        }
        // 显示导航条加载动画  
        wx.showNavigationBarLoading();
        // 显示 loading 提示框,在 ios 系统下,会导致顶部的加载的三个点看不见  
        // wx.showLoading({  
        //   title: '数据加载中...',  
        // });  
        setTimeout(function () {
          that.loadData(false, () => {
            that.setData({
              loadingData: false
            });
            wx.stopPullDownRefresh();
            // wx.hideLoading();  
            wx.hideNavigationBarLoading();
            console.info('下拉数据加载完成.');
          });
        }, 1000);
      },
    
      /** 
       * 页面上拉触底事件的处理函数 
       */
      onReachBottom: function () {
        console.info('onReachBottom');
        var hidden = this.data.hidden,
          loadingData = this.data.loadingData,
          that = this;
        if (hidden) {
          this.setData({
            hidden: false
          });
          console.info(this.data.hidden);
        }
        if (loadingData) {
          return;
        }
        this.setData({
          loadingData: true
        });
        // 加载数据,模拟耗时操作  
    
        wx.showLoading({
          title: '数据加载中...',
        });
    
        setTimeout(function () {
          that.loadData(true, () => {
            that.setData({
              hidden: true,
              loadingData: false
            });
            wx.hideLoading();
          });
          console.info('上拉数据加载完成.');
        }, 1000);
      }
    })  
    

      

  • 相关阅读:
    如何设置SQL Server 全文搜索
    怎么样充分运用ASP.NET 2.0预编译
    怎么样用CSC.exe来编译Visual C#地代码文件
    ASP.NET设计中的性能优化问题
    给Repeater、Datalist和Datagrid增加自动编号列
    ASP.net的RUL重写
    正则表达式学习日记
    SQLCLR(三)触发器
    几个用常用的jscript验证
    Asp.net性能优化总结(二)
  • 原文地址:https://www.cnblogs.com/jy13638593346/p/11686800.html
Copyright © 2020-2023  润新知