微信小程序上拉更多下拉刷新-即速应用

老规矩先上图；

小程序

下拉使用的是微信自带的下拉功能。但是在滚动条存在的情况下拉动的区域是只有，navbar部分。而这里完美解决了这个问题。
原理：在内容区域上有一个透明块，当滚动条isTop=0；显示；isTop！=0隐藏。注意这个透明块用户永远是看不见的。它的作用是让用户触摸时可以完成下拉动作；

上拉就简单了使用的是scroll-view 的bindscrolltolower；

index.json

{  "navigationBarTitleText": "",  "enablePullDownRefresh": true,  "usingComponents": {    "i-load-more": "../../../components/iview/load-more/index"  }  }

index.wxml

view class="page"  view class="page__bd"    view class="weui-tab"      view class="weui-navbar"        block wx:for="{{tabs}}" wx:key="*this"          view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick"            view class="weui-navbar__title"{{item}}/view          /view        /block        view class="weui-navbar__slider" style="left: {{sliderLeft}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"/view      /view      view class="weui-tab__panel"        view class="weui-tab__content"          view class='pullmask' hidden='{{!isTop}}'/view          scroll-view scroll-y="auto" scroll-top="{{topNum}}" style="height: {{wH}}px" class="page-body-info" bindscrolltolower="loadmore" bindscroll="doScrollTop"            view class="weui-panel mycontent" wx:for="{{mydata}}" wx:key="{{index}}" style="height:200px"              view class="weui-panel__bd"                 view                  text class="page-body-text"内容{{index}} len {{mydata.length}}/text                /view              /view            /view              i-load-more wx:if="{{loadMore}}" /            i-load-more wx:if="{{!loadMore}}" tip="{{mydata.length==0?'暂无数据':'我是底部'}}" loading="{{ false }}" i-class="myload" /          /scroll-view        /view            /view    /view  /view/view

index.js

var sliderWidth = 96; // 需要设置slider的宽度，用于计算中间位置let isRefesh = false; //正在下拉更多let isloadmore = false; //正在下载更多let istop = true;let pageSize = 10;let pageIndex = 1;let totalpages = 1;Page({  data: {    tabs: ["选项一", "选项二"],    activeIndex: 0,    sliderOffset: 0,    sliderLeft: 0,    wH: 500,    mydata:[],    isTop: true, //滚动条顶部    loadMore: false,    topNum: 0  },   onLoad: function () {    if (this.data.topNum != 0) {      this.setData({ topNum: 0 })    }    var that = this;    wx.getSystemInfo({      success: function (res) {        that.setData({          wH: res.windowHeight - 60,          sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,          sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex        });      }         });    this.onPullDownRefresh2();  },  /**  * 页面相关事件处理函数--监听用户下拉动作  */  onPullDownRefresh: function () {    this.onPullDownRefresh2()      },  onPullDownRefresh2(){    isRefesh = true;    isloadmore = false;    istop = false;    wx.showToast({      title: 'loading...',      icon: 'loading'    })    let self = this;    setTimeout(() = {      pageIndex++;      self.getData();    }, 2000)  },  stopPullDownRefresh: function () {    wx.stopPullDownRefresh({      complete: function (res) {        wx.hideToast()        console.log(res, new Date())      }    })  },  //滚动条到top  doScrollTop(e) {    istop = this.data.isTop    if (e.detail.scrollTop  10) {      if (!istop) {        this.setData({          isTop: true        })      }    } else {      if (istop) {        this.setData({          isTop: false        })      }    }     },  /**   * 更多   */  loadmore(){    let self=this;    wx.showLoading({      title: 'loading',    })    isloadmore = true;        self.setData({      loadMore: isloadmore,    })    setTimeout(() = {      pageIndex++;            self.getData();         }, 2000)  },  getData(){    wx.hideLoading();    let mydata = this.data.mydata;    if(isRefesh){      this.stopPullDownRefresh();      mydata = [0, 1, 2, 3];    }else{           for (let i = 0; i  5; i++) {        mydata.push(i)      }    }    this.setData({      loadMore:false,      mydata    })    isRefesh = false;    isloadmore = false;  },  tabClick: function (e) {    if (this.data.topNum != 0) {      this.setData({ topNum: 0 })    }    let id = e.currentTarget.id    if(id==1){      this.setData({        mydata:[]      })    }else{      this.onPullDownRefresh2();    }    this.setData({      sliderOffset: e.currentTarget.offsetLeft,      activeIndex: e.currentTarget.id    });  }, });

以上具体代码可以到 https://github.com/sallyFishKun/loadmoreAndRefresh.git 下载；

下面是结合post/get使用，可以不看；

// page/tabBar/msg.jsimport config from '../../../config.js';let ftime = require('../../../utils/util.js').formatTimevar app = getApp();var sliderWidth = 96;let mytime = ''let pageSize = 10;let pageIndex = 1;let totalpages = 1;let isRefesh = false; //正在下拉更多let isloadmore = false; //正在下载更多let istop = true;let markTime = [] //存储告警红点；let imei = '';let mygjData = []; //告警数据Page({  /**   * 页面的初始数据   */  data: {    tabs: [{      name: "告警消息",      isdot: false    }, {      name: "系统消息",      isdot: false    }],    isdot: [false, false],    adx0: 0,    sliderOffset: 0,    sliderLeft: 0,    systemList: [],    gjList: [],    // imei: '',    loadMore: false,    wH: 500,    isTop: true, //滚动条顶部    topNum:0  },  /**   * 生命周期函数--监听页面显示   */  onShow: function() {    if (this.data.topNum != 0) {      this.setData({ topNum: 0 })    }    pageIndex = 1;    totalpages = 1;    isRefesh = false; //正在下拉更多    isloadmore = false; //正在下载更多    istop = true;    markTime = [];    let adx0 = this.data.adx0;    if (adx0 == 0) {        this.gjInit()    } else {      this.getsysmmsg()    }    // this.initDot();  },  /**  * 页面相关事件处理函数--监听用户下拉动作  */  onPullDownRefresh: function () {   console.log('onRefresh')    let adx0 = this.data.adx0;    let self = this;      pageIndex = 1;      totalpages = 1;      // mygjData = [];      isRefesh = true;      isloadmore = false;      istop = false;      if (adx0 == 0) {        this.getList();      } else {        this.getsysmmsg()      }   },//停止刷新  stopPullDownRefresh: function () {    wx.stopPullDownRefresh({      complete: function (res) {        wx.hideToast()        console.log(res, new Date())      }    })  },  gjInit() {    pageIndex = 1;    totalpages = 1;    this.setData({      gjList: [],    })    mygjData = [];    this.getImei();  },  onLoad: function(e) {    imei=''    var self = this;    app.getSystemInfo(function(res) {      self.setData({        wH: res.windowHeight - 60,        sliderLeft: (res.windowWidth / 2 - sliderWidth) / 2,        sliderOffset: res.windowWidth / 2 * self.data.adx0,      });    });    },  loadmore1() {    if (!this.data.loadMore) return;    console.log('loadmore')    let adx0 = this.data.adx0;    let self = this;    setTimeout(() = {      pageIndex++;      isloadmore = true;      if (adx0 == 0) {        this.getList();      } else {        this.getsysmmsg()      }    }, 2000)  },  /**系统红点 */  checkRedDot() {    if (this.data.tabs[1].isdot == true) return;    const self = this;    app.getPost("/xcx/user_message/check_red_dot", {}, function(res) {      if (res.data.num  0) {        self.setData({          'tabs[1].isdot': true        })      }    }, false)  },  clearRedDot() {    if (this.data.tabs[1].isdot==false)return;    const self = this;    app.getPost("/xcx/user_message/clear_red_dot", {}, function(res) {      self.setData({        'tabs[1].isdot': false      })    })  },  //滚动条到top  doScrollTop(e) {    istop = this.data.isTop    if (e.detail.scrollTop  10) {   if (!istop) {        this.setData({          isTop: true        })      }    } else {      if (istop) {        this.setData({          isTop: false        })      }    }    },  stopWuxRefresher() { let id = '#wux-refresher'    if(isRefesh){      this.stopPullDownRefresh();    }  },  // 获取系统消息数据  getsysmmsg() {    const data = {      page: pageIndex,    }    const self = this;    this.clearRedDot();    self.setData({      loadMore: isloadmore,    })    app.getPost("/xcx/user_message/get_sys_msg", data, function(res) {      self.stopWuxRefresher();        let resdata = res.data;      if (resdata.status == 1) {        let list = resdata.data.data;        if (isloadmore) {          let systemList = self.data.systemList          for (let i = 0; i  list.length; i++) {            systemList.push(list[i])          }          list = systemList        }        self.setData({          systemList: list        })        totalpages = resdata.data.last_page;        self.setData({          loadMore: pageIndex  totalpages        })        isRefesh = false;        isloadmore = false;      }    })  },  setMarkTime(data) {    markTime = wx.getStorageSync('markTime')    let st = new Date(data.time).getTime();    // let start =new Date().getTime() - 24 * 5 * 60 * 60 * 1000 ;    if (!markTime) {      markTime = [];    } else {      markTime = JSON.parse(markTime)      if (markTime.length  100) {        markTime.splice(0, 50)        // for (let i = 0; i  markTime.length;i++){        //     if (Number(markTime[i]) start){        //       markTime.splice(i,1)        //       console.log(markTime)        //     }        //   }      }    }    if (markTime.indexOf(st) == -1) {      markTime.push(st)    }    wx.setStorageSync('markTime', JSON.stringify(markTime))  },  getCurrentDay() {    let start = new Date().getTime() - 24 * 5 * 60 * 60 * 1000    start = ftime(new Date(start)).substr(0, 10)    let end = ftime(new Date()).substr(0, 10)    let arr = [];    arr[0] = start + ' 00:00:00'    arr[1] = end + ' 23:59:59'    console.log("getCurrentDay", arr[0])    return arr;  },  /**   * 获取告警消息列表   */  getList() {    let self = this;    // let imei = this.data.imei;    let markTime = wx.getStorageSync("markTime");    if (markTime) {      markTime = JSON.parse(markTime)    }    let timeArr = this.getCurrentDay();    let data = {      IMEIs: imei,//.split(","),      // IMEIs: '688502000010235,695502000001904',      timeFlag: 4, //0今日 1本周 2本月 3本年      startTime: timeArr[0], //'2018-07-23 06:14:27.000',      endTime: timeArr[1], //'2018-09-23 06:14:27.000',      pageIndex: pageIndex,      pageSize: pageSize,      alarmType: '',      key: config.msgKey      // key: '68YHQt0qMKGg8orSro2YannF',    }    self.checkRedDot()    self.setData({      loadMore: isloadmore,    })    let url = config.msgRootUrl + '/api/teralarm/getlist'    app.getGet(url, data, function(res) {      self.stopWuxRefresher();      if (res && res.data) {             // let { TerName, StartTime, AlarmContent } = res.data.Items;        let item = res.data.Items;        let gjList = self.data.gjList;        let isdot = false;        if (isRefesh) {          gjList = []        }        if (item.length == 0) {          self.setData({            loadMore: false,          })          return;        } else {          for (let i = 0; i  item.length; i++) {            let st = item[i].StartTime.split('T')            item[i].StartTime = st[0] + " " + st[1].substr(0, 8);            st = new Date(item[i].StartTime).getTime();            if (markTime.indexOf(st) != -1) {              item[i].isdot = false;              isdot = false;            } else {              item[i].isdot = true;              isdot = true;            }            let {              TerName,              StartTime,              AlarmContent,              isdot,              Latitude,              Longitude            } = item[i]            gjList.push({              TerName,              StartTime,              AlarmContent,              isdot,              Latitude,              Longitude            });            mygjData.push(item[i])          }          // if (!isloadmore) {          //   gjList = item          // }          totalpages = res.data.TotalPages          self.setData({            gjList: gjList,            'tabs[0].isdot': isdot,            loadMore: pageIndex  totalpages          })        }      } else {        self.setData({          loadMore: false,        })        app.postFail()      }      isRefesh = false;      isloadmore = false;    })  },  tabClick: function(e) {    // this.stopWuxRefresher();    if (this.data.topNum != 0) {      this.setData({ topNum: 0 })    }    let id = e.currentTarget.id;    this.setData({      sliderOffset: e.currentTarget.offsetLeft,      adx0: e.currentTarget.id,      isTop: true,    });    istop=true;    isRefesh = false;    isloadmore = false;    if (id == 0) {      pageIndex = 1;      totalpages = 0;      this.getList();    } else {      this.getsysmmsg()    }  },  /**   * 页面上拉触底事件的处理函数   */  onReachBottom: function() {    // var that = this;    // 显示加载图标    // this.getList();  },  /**   * 获取imei   */  getImei() {    pageIndex = 1;    totalpages = 1;    let self = this;    app.getImei(function(res) {      imei = res.join(",")      // self.setData({      //   imei: res.join(",")      // })      self.getList();    })  },