微信小程序 - scroll-view组件之上拉加载下拉刷新(解决上拉加载不触发)

news2024/11/13 9:12:01

前言

最近在做微信小程序项目中,有一个功能就是做一个商品列表分页限流然后实现上拉加载下拉刷新功能,遇到了一个使用scroll-viwe组件下拉刷新事件始终不触发问题,网上很多说给scroll-view设置一个高度啥的就可以解决,有些人设置了高度也不触发,所以在下就研究了一波这个scroll-view的触发机制。

一、scroll-view

可滚动视图区域。使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。

两个属性是作为上拉加载下拉刷新触发事件
scroll-view属性bindrefresherrefresh:自定义下拉刷新被触发

scroll-view属性bindscrolltolower:滚动到底部/右边时触发

官网文档:https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

二、上拉加载下拉刷新

提示:以下是本篇文章正文内容,下面案例可供参考

1. wxml代码

<scroll-view 
      id="scrollView"  scroll-y="true" style="height: {{windowHeight}}px;"
      refresher-enabled="{{true}}" 
      refresher-threshold="{{100}}"
      refresher-default-style="white"
      refresher-background="rgb(211, 234, 248)"
      refresher-triggered="{{triggered}}"
      bindrefresherrefresh="onRefresh"  
      bindscrolltolower="loadMore"
    >
      <view class="fruit-list" wx:for="{{fruits}}" wx:key="id">
        <view class="fruit-item">
          <image src="{{requestUrl}}{{item.imageUrl}}"></image>
          <view class="mid">
            <text style="font-weight: bold;">{{item.name}}</text>
            <text style="color: rgb(146, 146, 146);">库存{{item.stock}}</text>
            <text style="font-weight: bold;">¥{{item.price}}</text>
          </view>
          <button>选择</button>
        </view>
      </view>
</scroll-view>

2. wxcc代码

.fruit-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fruit-item view {
  display: flex;
  flex-direction: column;
  font-size: 9px;
  flex: 2;
  align-items: flex-start;
  justify-content: center;
  line-height: 30px;
}

.fruit-item image {
  height: 100px;
  width: 100px;
  border-radius: 5px;
  margin:10px;
  flex: 3;
}
.fruit-item button {
  background-color: rgb(219, 207, 137);
  width: 40px; 
  height: 20px;
  font-size: 8px;
  flex: 1;
  line-height: 5px;
}

.mid :first-child{
  width: 70px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

3. 下拉刷新bindrefresherrefresh : onRefresh下拉刷新事件定义

 onRefresh() {
        // 自己定义刷新事件
        var self = this;
        // 自己定义刷新事件
        self.setData({
          triggered: true, // 将triggered属性设置为true,表示下拉刷新已经被触发
        })
        wx.showToast({
          title: "刷新成功"
        })
        setTimeout(function () {
          self.setData({
            triggered: false, // 将triggered属性设置为false,表示下拉刷新已完成
            
          })
          console.log('下拉刷新已完成');
        }, 3000);
  }

4. 上拉加载

scroll-view触发的条件

在这里插入图片描述

触底事件不触发有以下情况:

  1. scroll-view没有设置高度或者高度设置太高导致 item总高度 < scroll-view高度下拉过程中触不到底
  2. scroll-view容器中的item没有设置高度导致 item总高度<scollview高度

注意:如果scroll-view高度 < item总高度且值小于1~4px也是不触发的要大于5px这样才会触发,
例如:scroll-view高度为480px,item总高度为480-484px不会触发

解决方案

  1. scroll-view设置高度100vh;
  2. item设置一个适合的高度

100vh

是一个在网页开发中常用的单位,表示相对于视窗(viewport)高度的百分比。具体来说,它等于视窗高度的百分之一百。在大多数情况下,该单位用于设置元素的高度或最小高度,以便使其充满整个视窗高度。
例如,如果视窗高度为600像素,那么使用"100vh"将会等于600像素。这样,你可以通过将元素的高度设置为"100vh",使其完全填充整个视窗高度。这在创建全屏幻灯片、背景图像或需要完全占据视窗的元素时非常有用。

下拉刷新bindrefresherrefresh : onRefresh下拉刷新事件定义

// 下拉刷新
  onRefresh() {
    var self = this;

    this.setData({
      triggered: true, // 将triggered属性设置为true,表示下拉刷新已经被触发
    })
    this.requestFruitList(this.data.flag, 1, function (data) {
      // 处理响应数据,并将新的数据覆盖原有数据
      this.setData({
        fruits: data.fruits,
        allPage: data.totalPages,
        curPage: 1,
        triggered: false, // 将triggered属性设置为false,表示下拉刷新已完成
      })
      wx.showToast({
        title: "刷新成功"
      })
    }.bind(this), function (err) {
      // 处理请求失败情况
      console.error(err);
      wx.showToast({
        title: "刷新失败,请重试"
      })
    }.bind(this));
  }

源码:

const app = getApp()

Page({
  data: {
    requestUrl: app.globalData.baseUrl,
    types: [{
        id: 1,
        title: "鲜果现切"
      }, {
        id: 2,
        title: "国产零食"
      }, {
        id: 3,
        title: "特产零食"
      },
      {
        id: 4,
        title: "肉类蛋食"
      }, {
        id: 5,
        title: "特色小吃"
      }, {
        id: 6,
        title: "牛奶乳品"
      },
      {
        id: 7,
        title: "水果捞吧"
      }, {
        id: 8,
        title: "当即热销"
      }, {
        id: 9,
        title: "蔬菜鲜卖"
      }
    ],
    fruits: [{
        id: 1,
        name: "哈密瓜",
        price: 29,
        stock: 100,
        imageUrl: "/images/ls.jpg"
      }, {
        id: 2,
        name: "哈密瓜",
        price: 29,
        stock: 100,
        imageUrl: "/images/ls.jpg"
      },
      {
        id: 3,
        name: "哈密瓜",
        price: 29,
        stock: 100,
        imageUrl: "/images/ls.jpg"
      }, {
        id: 4,
        name: "哈密瓜",
        price: 29,
        stock: 100,
        imageUrl: "/images/ls.jpg"
      }
    ],
    flag: 1,
    triggered: false, // 设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发
    allPage: 1, // 总页数
    curPage: 1, // 当前页数
    windowHeight: null
  },

  // 上拉到底部触发
  loadMore: function () {
    console.log("加载更多");
    var self = this;
    // 为最后一页
    if (self.data.curPage == self.data.allPage) {
      wx.showToast({
        title: '没有更多了',
      })
    } else {
      setTimeout(function () {
        console.log("加载更多");
        var tempCurPage = self.data.curPage;
        tempCurPage++;
        self.setData({
          curPage: tempCurPage
        })
        self.requestFruitList(self.data.flag, self.data.curPage, function (data) {
          // 处理响应数据,并将新的数据添加到原有数据之后
          var newFruits = self.data.fruits.concat(data.fruits);
          self.setData({
            fruits: newFruits,
            allPage: data.totalPages
          });
        }, function (err) {
          // 处理请求失败情况
          console.error(err);
        });
      }, 300)
    }
  },

  // 下拉刷新
  onRefresh() {
    var self = this;

    this.setData({
      triggered: true, // 将triggered属性设置为true,表示下拉刷新已经被触发
    })
    this.requestFruitList(this.data.flag, 1, function (data) {
      // 处理响应数据,并将新的数据覆盖原有数据
      this.setData({
        fruits: data.fruits,
        allPage: data.totalPages,
        curPage: 1,
        triggered: false, // 将triggered属性设置为false,表示下拉刷新已完成
      })
      wx.showToast({
        title: "刷新成功"
      })
    }.bind(this), function (err) {
      // 处理请求失败情况
      console.error(err);
      wx.showToast({
        title: "刷新失败,请重试"
      })
    }.bind(this));
  },

  switchNav: function (e) {
    var page = this;
    var id = e.target.id;
    if (this.data.currentTab == id) {
      return false;
    } else {
      page.setData({
        currentTab: id
      });
    }
    page.setData({
      flag: id,
      curPage: 1
    });
    this.requestFruitList(id, page.data.curPage, function (data) {
      // 处理响应数据
      page.setData({
        fruits: data.fruits,
        allPage: data.totalPages
      });
    }, function (err) {
      // 处理请求失败情况
      console.error(err);
    });
  },
  requestFruitList: function (typeId, curPage, successCallback, failCallback) {
    wx.request({
      url: this.data.requestUrl + '/fruit?typeId=' + typeId + '&pageNum=' + curPage,
      method: 'GET',
      success(res) {
        console.log(res.data);
        // 调用成功回调函数,并将响应数据作为参数传递
        successCallback(res.data);
      },
      fail(err) {
        console.error(err);
        // 调用失败回调函数,并将错误信息作为参数传递
        failCallback(err);
      }
    })
  },
  onLoad: function (options) {
    var id = options.id; // 获取传递的参数
    console.log('接收到的id参数为:' + id);
    var page = this;
    page.setData({
      flag: id
    })
    this.requestFruitList(id, page.data.curPage, function (data) {
      // 处理响应数据
      page.setData({
        fruits: data.fruits,
        allPage: data.totalPages
      });
    }, function (err) {
      // 处理请求失败情况
      console.error(err);
    });

    // 获取屏幕高度
    wx.getSystemInfo({
      success: function (res) {
        page.setData({
          windowHeight: res.windowHeight
        })
        console.log('屏幕高度:', res.windowHeight);
      }
    })
  }
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/825052.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

嵌入式软件开发有没有捷径

嵌入式软件开发有没有什么捷径&#xff1f;不定期会收到类似的问题&#xff0c;我只想说&#xff1a;嵌入式软件开发没有捷径 说实话&#xff0c;有这种想法的人&#xff0c;我其实想劝你放弃。对于绝大多数普通人&#xff0c;一步一个脚印就是捷径。 当然&#xff0c;这个问题…

若依(RuoYi)系统添加自定义的模块

RuoYi系统是干什么用的,这里不过多说明了,自己搜一下,其提供的功能己经基本满足了一些简单的系统应用,如果想进行二次开发的小伙伴,可能会想仅仅用Ruoyi的后台权限管理,但是业务功能想进行自定义,可以借鉴一下本文。我们用的是前后端分离版 一、前端的自定义模块 其实在…

Drools用户手册翻译——第四章 Drools规则引擎(九)Phreak算法

这个地方我是先了解了Rete算法&#xff0c;才来看得这一部分&#xff0c;结果发现好像没有什么用......完全不知道讲的什么&#xff0c;估计之后在用的时候慢慢会明白。 RETE算法笔记&#xff1a;http://t.csdn.cn/iNZ8V 甩锅声明&#xff1a;本人英语一般&#xff0c;翻译只…

二叉树的最近公共祖先,二叉搜索树的最近公共祖先(同一个思路)

题目链接   二叉树的最近公共祖先   给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。   百度百科中最近公共祖先的定义为&#xff1a;“对于有根树 T 的两个节点 p、q&#xff0c;最近公共祖先表示为一个节点 x&#xff0c;满足 x 是 p、q 的祖先且 x 的深度尽可…

GD32F103输入捕获

GD32F103输入捕获程序&#xff0c;经过多次测试&#xff0c;终于完成了。本程序将TIMER2_CH2通道映射到PB0引脚&#xff0c;捕获PB0引脚低电平脉冲时间宽度。PB0是一个按钮&#xff0c;第1次按下采集一个值保存到TIMER2_CountValue1中&#xff0c;第2次按下采集一个值保存到TIM…

如何使jwt生成的 token在用户登出之后失效?

问题1:如何使jwt生成的 token在用户登出之后失效? 由于jwt生成的token是无状态的,这体现在我们在每一次请求时 request都会新建一个session对象: 举个例子: @PostMapping(value = "/authentication/logout") public ResponseEntity<BaseResult> logOut(Htt…

第十次CCF计算机软件能力认证

第一题&#xff1a;分蛋糕 小明今天生日&#xff0c;他有 n 块蛋糕要分给朋友们吃&#xff0c;这 n 块蛋糕&#xff08;编号为 1 到 n&#xff09;的重量分别为 a1,a2,…,an。 小明想分给每个朋友至少重量为 k 的蛋糕。 小明的朋友们已经排好队准备领蛋糕&#xff0c;对于每个朋…

Spring之浅谈AOP技术

前言 AOP&#xff1a;Aspect Oriented Programming&#xff08;面向切面编程&#xff09;&#xff0c;一种编程范式&#xff0c;指导开发者如何组织程序结构。 OOP&#xff08;Object Oriented Programming&#xff09;面向对象编程 AOP和OOP一样都是一种编程思想&#xff0c…

佑友防火墙后台命令执行漏洞

漏洞描述 佑友防火墙 后台维护工具存在命令执行&#xff0c;由于没有过滤危险字符&#xff0c;导致可以执行任意命令 漏洞复现 访问url 使用弱口令登录佑友防火墙后台 User: admin Pass: hicomadmin 点击系统管理 维护工具 Ping 输入可执行命令 127.0.0.1|cat /etc/passwd

【高级程序设计语言C++】AVL树

1. AVL树的概念2. AVL树的旋转2.1. 左单旋2.2 右单旋2.3 左右双旋2.4 右左双旋 1. AVL树的概念 AVL树是一种自平衡二叉搜索树&#xff0c;它在每次插入或删除节点时自动调整以保持树的平衡。AVL树的平衡是通过节点的高度差来衡量的&#xff0c;即左子树的高度和右子树的高度之…

Gartner:2022年全球IaaS公有云服务市场增长30%,首次突破1000亿美元

根据Gartner的统计结果&#xff0c;2022年全球基础设施即服务&#xff08;IaaS&#xff09;市场从2021年的928亿美元增长到1203亿美元&#xff0c;同比增长29.7%。亚马逊在2022年继续排在IaaS市场的第一名&#xff0c;其次是微软、阿里巴巴、谷歌和华为。 最新消息&#xff0c;…

Spring Cloud+Spring Boot+Mybatis+uniapp+前后端分离实现知识付费平台免费搭建 qt

&#xfeff;Java版知识付费源码 Spring CloudSpring BootMybatisuniapp前后端分离实现知识付费平台 提供职业教育、企业培训、知识付费系统搭建服务。系统功能包含&#xff1a;录播课、直播课、题库、营销、公司组织架构、员工入职培训等。 提供私有化部署&#xff0c;免费售…

无涯教程-Lua - 文件I/O

I/O库用于在Lua中读取和处理文件。 Lua中有两种文件操作&#xff0c;即隐式(Implicit)和显式(Explicit)操作。 对于以下示例&#xff0c;无涯教程将使用例文件test.lua&#xff0c;如下所示。 -- sample test.lua -- sample2 test.lua 一个简单的文件打开操作使用以下语句。…

计算机毕设 深度学习猫狗分类 - python opencv cnn

文章目录 0 前言1 课题背景2 使用CNN进行猫狗分类3 数据集处理4 神经网络的编写5 Tensorflow计算图的构建6 模型的训练和测试7 预测效果8 最后 0 前言 &#x1f525; 这两年开始毕业设计和毕业答辩的要求和难度不断提升&#xff0c;传统的毕设题目缺少创新和亮点&#xff0c;往…

vscode 第一个文件夹在上一层文件夹同行,怎么处理

我的是这样的 打开终端特别麻烦 解决方法就是 打开vscode里边的首选项 进入设置 把Compact Folders下边对勾给勾掉

acwing 1064 小国王 线性状态压缩DP

输入 3 2输出 16&#x1f37a; AC code #include<iostream> #include<cstring> #include<cstdio> #include<algorithm> #include<vector>using namespace std;typedef long long ll; const int N 12; const int M 1 << 10, K 110;//…

Openlayers:DWS-DD坐标形式互相转换

参考google地图, 坐标分为DD和DMS两种形式。 在本示例中,DWS-DD做互相转换。Openlayers处理DD-》DMS很简单,逆向操作需要做反向推导,方法参考源代码。 效果图 源代码 /* * @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN) * @此源代码版权归大剑师兰特所有…

Linux【网络基础】IP协议

文章目录 一、IP协议&#xff08;1&#xff09;IP地址协议概念和理解&#xff08;2&#xff09;IP地址协议格式&#xff08;3&#xff09;网络号和主机号&#xff08;4&#xff09;地址管理&#xff08;一&#xff09;分配IP地址方法&#xff08;二&#xff09;CIDR分配IP地址&…

基本频谱分析

基本频谱分析 傅里叶变换是用于对时域信号执行频率和功率谱分析的工具。 频谱分析数量 频谱分析研究非均匀采样的离散数据中包含的频谱。傅里叶变换是通过在频率空间表示基于时间或空间的信号来揭示该信号的频率分量的工具。下表列出了用于描述和解释信号属性的常用量。要了…