zoukankan      html  css  js  c++  java
  • 微信小程序上拉下拉刷新

    小程序提供了,onPullDownRefresh和onReachBottom两个事件函数监听下拉和上拉事件函数。提示加载中,取消加载中

    效果:

     

    js文件

    // pages/enterprise/enterprise.js
    var app = getApp();
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        enterpriseList: [],
        pageNo: 1, //页数
        pageSize: 10, // 条数
        cityCode: null // 城市编码
      },
    
      //查询数据
      queryData: function() {
        var that = this;
        var pageNo = this.data.pageNo;
        var pageSize = this.data.pageSize;
        var provinceCode = "220000";
        var cityCode = wx.getStorageSync("cityCode");
    
        wx.showLoading({ //弹出页面加载中
          title: '加载中...',
        });
    
        wx.request({
          url: xxxxxx //上线的话必须是https,没有appId的本地请求貌似不受影响 
          method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT 
          header: {
            'Content-Type': "application/x-www-form-urlencoded",
            'Cookie': 'SESSION=' + wx.getStorageSync("sessionId")
          }, // 设置请求的 header
          data: {
            pageIndex: pageNo,
            pageSize: pageSize,
            companyDivisoinCode: provinceCode + "|" + cityCode + "|"
          },
          success: function(res) {
            app.consoleLog("请求数据成功");
            app.consoleLog(res.data)
            wx.hideLoading(); //隐藏加载中提示
            if (res.data.dataList.length > 0) {
              if (that.data.enterpriseList.isEmpty) {
                that.setData({ // 设置页面列表的内容
                  enterpriseList: res.data.dataList,
                })
              } else {
                that.setData({ // 设置页面列表的内容
                  enterpriseList: that.data.enterpriseList.concat(res.data.dataList),
                  totalPageCnt: res.data.totalPageCnt,
                })
              }
            } else {
              wx.showToast({
                title: "没有更多数据了",
                duration: 1000,
                icon: 'none',
                mask: true
              })
            }
          },
          fail: function() {
            wx.hideLoading(); //隐藏加载中提示
            wx.showToast({
              title: "请求失败!",
              duration: 1000,
              icon: 'none',
              mask: true
            })
          },
          complete: function() {
            // complete 
          }
        })
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function(options) {
        this.setData({
          globalData: app.globalData
        });
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function() {
        this.setData({ //刷新操作初始化数据
          pageNo: 1,
          list: [],
          isEmpty: true
        })
        this.queryData(); //查询数据
      },
    
      /**
       * 页面   上拉触底事件的处理函数
       */
      onReachBottom: function() {
        var pageNum = this.data.pageNo;
    
        if (pageNum < this.data.totalPageCnt) {
          this.setData({
            pageNo: pageNum + 1 //设置下一页
          })
          this.queryData(); //查询数据
        } else {
          wx.showToast({
            title: "没有更多数据了",
            duration: 1000,
            icon: 'none',
            mask: true
          })
        }
    
      },
    
      onShow: function(e) {
    
        if (!this.data.cityCode) { // 页面首次加载时cityCode=null,查询数据
          this.refreshData();
        } else if (this.data.cityCode != wx.getStorageSync("cityCode")) { // 当地区改变时加载数据,此时避免二级页返回时重新加载
          this.refreshData();
        }
    
      },
      // 重新加载数据
      refreshData: function (){
        this.setData({
          enterpriseList: [],
          pageNo: 1, //页数
          pageSize: 10, // 条数
          cityCode: wx.getStorageSync("cityCode"), //保存当前城市编码
        });
        this.queryData();
      }
    })
  • 相关阅读:
    idea + springboot 的java后台服务器通过小米推送
    python编程之禅
    温故而知新-MySQL高级编程
    温故而知新-mysql的一些语法show,describe,explain,fulltext
    温故而知新-PHP文件操作函数
    温故而知新-正则单词和strlen
    php使用tcpdf实现在线PDF功能
    温故而知新-array_walk和sizeof和array_count_values()和extract()
    温故而知新-strtok函数
    mysql中的blob和text区别
  • 原文地址:https://www.cnblogs.com/xiaolinstudy/p/9510157.html
Copyright © 2011-2022 走看看