微信小程序上拉更多下拉刷新

最新推荐文章于 2024-06-05 07:15:00 发布
最新推荐文章于 2024-06-05 07:15:00 发布
阅读量4.5k 收藏 6
点赞数 1
分类专栏： 微信小程序 html5 文章标签： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012123026/article/details/82965599
版权

老规矩先上图；

在这里插入图片描述在这里插入图片描述

下拉使用的是微信自带的下拉功能。但是在滚动条存在的情况下拉动的区域是只有 ，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.js
import config from '../../../config.js';

let ftime = require('../../../utils/util.js').formatTime
var 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();
    })
  },
久如云漂泊
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
小白学习微信小程序的下拉刷新和上拉加载更多
吃不胖.
09-12 2061
<image class="refreshing-icon" src="../../images/loading@2x.gif"></image> <view class="refreshing-text">正在刷新</view>
【微信小程序】页面tabBar切换、下拉刷新
yzq0820的博客
09-13 1万+
在 pages.json 中提供 tabBar 配置，不仅仅是为了方便快速开发导航，更重要的是在App和小程序端提升性能。在这两个平台，底层原生引擎在启动时无需等待js引擎初始化，即可直接读取 pages.json 中配置的 tabBar 信息，渲染原生tab
iview 下拉刷新loadTop报错解决
weixin_33709590的博客
06-26 132
<div class="noData" v-if="lifeList.length==0"> <img src="../assets/images/noData.png" alt=""> <p>这里暂时还没有内容哦~亲</p> </div> <mt-loadmore :top-method="loadTop" ref="...
【微信小程序开发】小程序中的上滑加载更多，下拉刷新是如何实现的？
最新发布
景天科技苑
06-05 2万+
小程序是如何实现下滑加载更多数据，下拉刷新页面的，本文就来详细探讨一下。
uniapp中uni-load-more的使用
第⑦个前端
08-25 9266
1 引入uniloadmore import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'; 2 data中写的内容 reload: false, status: 'more', contentText: { contentdown: '上拉加载更多~', contentrefresh: '加载中', contentnomore: '我是有底线的~' }, 3 template里面写的内容 <uni-l
微信小程序项目实战（下拉刷新+加载更多)
03-16
1、微信小程序下拉刷新和上拉事件的需求和相关知识点讲解 2、微信小程下拉刷新的设计和开发 3、微信小程序加载更多的设计和开发
微信小程序下拉刷新、上拉加载更多
weixin_57983561的博客
05-13 220
微信小程序下拉刷新、上拉加载更多 一、首先，固定一个包含列表数据的view高度，让它里面列表的数据溢出可以滚动： <scroll-view scroll-y lower-threshold="100" bindscrolltolower="scrollToLower" style="height: 100vh;"> <view wx:for="{{listData}}" wx:key="{{index}}" style="height: 40px;line-height:
微信小程序下拉刷新/上拉加载更多
热门推荐
爱开车的彬哥的CSDN博客
12-19 13万+
查看文档，在用page()函数注册页面的时候有这样的两个对象参数用户判断用户在最顶部下拉和到达最底部， 在小程序里，用户顶部下拉是默认禁止的，我们需要把他设置为启用，在app.json中的设置对所有页面有效，在单独页面设置则对当前页面有效； 看一下json文件 "enablePullDownRefresh": true, 注意这里的true是布尔型而不是字符； 有...
微信小程序实现页面下拉刷新和上拉加载功能详解
10-17
微信小程序的一个重要特点就是页面下拉刷新和上拉加载功能。这两个功能，可以优化用户的浏览体验，提高页面的交互性，使得用户在阅读过程中可以方便地获取新信息。 页面下拉刷新，即当用户在页面上滑动时，触发表单...
微信小程序 下拉刷新及上拉加载原理解析
10-16
微信小程序提供了两种数据交互方式来提升用户操作的流畅度和用户体验，这两种方式分别是下拉刷新和上拉加载更多。下拉刷新通常用于获取最新的数据列表，而上拉加载更多则用于在列表内容即将触底时加载更多内容。这两...
微信小程序下拉刷新上拉加载组件
01-27
基于小程序原生组件scroll-view的扩展与封装,实现简单的上拉加载下拉刷新 扩展下拉刷新动画，有灵感的朋友可以丰富更多下拉动画 在线征集 在线征集下拉刷新动画创意,你可以发草图,或者psd,AE等文件到邮箱：. 只要...
小程序swiper实现tab切换--下拉刷新、上拉加载更多.zip
07-23
本项目中，开发者利用Swiper和Swiper-Item组件，结合下拉刷新和上拉加载更多的功能，构建了一个交互性强、用户体验良好的小程序界面。 1. **Swiper组件**： Swiper是微信小程序中的一个容器组件，可以用来展示一...
微信小程序实现列表下拉刷新上拉加载
08-28
"微信小程序实现列表下拉刷新上拉加载" 微信小程序实现列表下拉刷新上拉加载是指在微信小程序中实现列表的下拉刷新和上拉加载功能，以便于用户更方便地浏览和加载列表数据。下面将详细介绍微信小程序实现列表下拉...
学习微信小程序的下拉刷新和上拉加载更多
吃不胖.
10-02 1430
以一个简单的展示商品列表的小程序为例，假设我们已经获得最新的商品列表数据，并且已经在页面中渲染出来。以一个展示订单列表的小程序为例，假设我们已经获得第一页的订单数据，并且已经在页面中渲染出来。下拉刷新是指当用户在小程序页面下拉时，页面可以重新加载最新的数据。好的，下面我将为你详细介绍微信小程序中的下拉刷新和上拉加载更多功能，并提供代码案例。当请求成功后，将下一页的订单数据追加到页面的现有订单数据之后。在这个示例中，我们将最新的商品列表数据保存在页面的。生命周期函数中，发起请求请求下一页的订单数据。
让你的微信小程序对用户更加友好：上拉加载和下拉刷新就是关键
Shids_的博客
04-07 1万+
让你的微信小程序对用户更加友好：上拉加载和下拉刷新就是关键
【微信小程序插件】下拉刷新、下拉加载
前端知识分享喵
06-09 909
今天在优化小程序的列表时候，想要把原生的 scroll-view 组件替换成一个下拉刷新的组件，然后就找了一下，果然有大神已经封装好。coolui-scroller 就是这样满足需求的一款插件，但是微信官网构建npm提示错误，未找到[1.06.2209190][win32-x64]？。试了几次，都说找不到这个插件。所以尝试着去找这个官网最新的资料，终于发现是做了更新，这里提前给大家踩坑了。项目开发的过程中，一定要注意版本的问题，否则很容易造成引入依赖失败，而这种问题又比较隐蔽。github 地址。
小程序上拉加载、下拉刷新的使用方法
m0_61663332的博客
04-20 2629
小程序上拉加载、下拉刷新、分批次请求数据的使用方法。每次触底加载请求十条数据，提升用户体验，增加用户粘性。优化小程序页面加载速度，减少了页面加载时间。
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
06-16 4425
下拉刷新和上拉加载是业务上一个很常见的需求，在微信小程序里，提供了下拉刷新的方法 onPullDownRefresh。最近在开发一个微信小程序项目，里面用到了下拉刷新重新加载数据的功能。做完后做了下总结。使用的是uni-app开发的，所以就以uni-app为例。
微信小程序交互增强：实现上拉加载、下拉刷新与一键返回顶部【代码示例】
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-07 1394
至此，我们已经实现了微信小程序中上拉加载、下拉刷新及一键返回顶部三大交互功能。这些功能不仅能提升用户体验，也是现代Web应用不可或缺的一部分。你是否在实际开发中遇到过特别的挑战？或是有更高效、创意的实现方式？欢迎在评论区分享你的见解和经验，让我们共同探讨，不断优化小程序的交互体验。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。
vue组件的3种书写形式
久如云漂泊
05-18 5万+
第一种 使用script标签<!DOCTYPE html> <html> <body> <div id="app"> <my-component></my-component> </div> <-- 注意：使用<script>标签时，type指定为text/x-template，意在告诉浏览器这不是一段js脚本，浏览器在
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值