zoukankan      html  css  js  c++  java
  • 小程序--下拉刷新,上拉加载

     
    //index.json 文件
    {
      "enablePullDownRefresh": true
    }
    

      

    //关键代码 index.js
    Page({
      data: {
        list: [],
        page: 1,
        hidden: false, //是否显示上拉加载的图标
        show: false,  //是否显示 文字(已经没有数据了)
    
      },
    
     
      getData: function () {
        this.setData({ hidden: true })
        var _this = this;
        var param = {};
        param.min_distance = 1;
        param.max_distance = 100000;
        param.type = this.data.types;
        param.page = this.data.page;
        param.row = this.data.row;
        param.storeId = '';
        api.getGoodsList(param).then(function (res) {
          console.log(res)
          let page = ++_this.data.page;
          if (res.data.length == 0) {
            _this.setData({ show: true, hidden: false })
          } else {
            _this.setData({
              page: page,
              list: _this.data.list.concat(res.data),
              hidden: false,
              show: false
            })
            //下拉刷新停止刷新
            wx.stopPullDownRefresh()
          }
        })
      },
      
      onReachBottom() {
       console.log('上拉')
        this.getData()
      },
      onPullDownRefresh() {
        console.log('下拉刷新')
        this.setData({
          page: 1,
          list: []
        })
        this.getData();
      },
    
    })
        
    <--index.wxml文件 -->
    <
    view class="weui-tab__panel"> <view class="weui-tab__content" wx:for='{{list}}' wx:key='{{index}}'></view> </view> <view class="page__bd"> <view class="weui-loadmore" wx:if="{{hidden}}"> <view class="weui-loading"></view> <view class="weui-loadmore__tips">正在加载</view> </view> <view class="weui-loadmore weui-loadmore_line" wx:if='{{show}}'> <view class="weui-loadmore__tips weui-loadmore__tips_in-line">暂无数据</view> </view> </view>
  • 相关阅读:
    修改linux资源限制
    Windows 建立链接
    Java & ant环境变量配置
    Linux 配置IP
    Spring-MVC 访问静态资源
    Maven 安装与配置
    OIM同步OID(OID-Connector 9.0.4.12)
    Connector|OIM向IBM TDS推送账号(LDAP3)
    TopFreeTheme精选免费模板【20130704】
    30+简约和平铺的WordPress复古主题
  • 原文地址:https://www.cnblogs.com/mengdiezhuangzhou/p/9705381.html
Copyright © 2011-2022 走看看