微信小程序下拉刷新上拉加载
前言:
- 下拉刷新和上拉加载是业务上一个很常见的需求,在微信小程序里,提供了下拉刷新的方法
onPullDownRefresh() 上拉加载触底onReachBottom()
- 也可以scroll-view进行布局,这个就要个人喜好,比如滚动条滚动、触底、触顶着三个事件,中的三个属性 scroll-top:设置滚动条的位置,scroll-y:是否允许竖向滑动,height:是组件的高度
- Bindscrolltolower是绑定触底触发的事件
- Bindscroll 是滚动触发的时间
- Bindscrolltoupper 触顶触发的事件,由于是触顶触发事件,所以不合适用来当做下拉刷新
下拉刷新
首先把页面结构以及样式布置好 让列表数据溢出滚动
<Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange" ><block wx:if="{{tabs[0].isActive}}"><view class="first_tab"><navigator class="goods_item"wx:for="{{goodsList}}"wx:key="goods_id"url="/pages/goods_detail/detail?goods_id={{item.goods_id}}"><!-- 左侧 图片容器 --><view class="goods_img_wrap"><image mode="widthFix" src="{{item.goods_small_logo?item.goods_small_logo:'https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg'}}"></image></view><!-- 右侧 商品容器 --><view class="goods_info_wrap"><view class="goods_name">{{item.goods_name}}</view><view class="goods_price">¥{{item.goods_price}}</view></view></navigator></view></block><block wx:elif="{{tabs[1].isActive}}">1</block><block wx:elif="{{tabs[2].isActive}}">2</block></Tabs>
第二步 现在data中创建空数组 用来接收数据以及tab栏选项卡切换数据,接口参数,总页数
data: {tabs: [{id: 0,value: "综合",isActive: true},{id: 1,value: "销量",isActive: false},{id: 2,value: "价格",isActive: false}],goodsList:[]},// 接口要的参数QueryParams:{query:"",cid:"",pagenum:1,pagesize:10},// 总页数totalPages:1,/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.QueryParams.cid=options.cid||"";this.QueryParams.query=options.query||"";this.getGoodsList();},// 标题点击事件 从子组件传递过来handleTabsItemChange(e){// 1 获取被点击的标题索引const {index}=e.detail;// 2 修改原数组let {tabs}=this.data;tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);// 3 赋值到data中this.setData({tabs})},
第三步 同步操作 获取商品列表数据 在这时要写一个关闭下拉刷新的窗口 渲染完数据就关闭下拉刷新(完成下拉刷新事件后写进去)
// 获取商品列表数据async getGoodsList(){const res=await request({url:"/goods/search",data:this.QueryParams});// 获取 总条数const total=res.total;// 计算总页数this.totalPages=Math.ceil(total/this.QueryParams.pagesize);// console.log(this.totalPages);this.setData({// 拼接了数组goodsList:[...this.data.goodsList,...res.goods]})// 关闭下拉刷新的窗口 如果没有调用下拉刷新的窗口 直接关闭也不会报错 第二步wx.stopPullDownRefresh();},// 下拉刷新事件 第一步onPullDownRefresh(){// 1 重置数组this.setData({goodsList:[]})// 2 重置页码this.QueryParams.pagenum=1;// 3 发送请求this.getGoodsList();}
上拉加载
具体思路:上拉触底 先判断有没有下一页 看看获取的页数是否大于等于总页数 小于的话就会继续下一页 大于的话滚动到底部就不用再发起请求了 提示没有下一页数据
// 页面上滑 滚动条触底事件onReachBottom(){// 1 判断还有没有下一页数据if(this.QueryParams.pagenum>=this.totalPages){// 没有下一页数据// console.log('%c'+"没有下一页数据","color:red;font-size:100px;background-image:linear-gradient(to right,#0094ff,pink)");wx.showToast({ title: '没有下一页数据' });}else{// 还有下一页数据// console.log('%c'+"有下一页数据","color:red;font-size:100px;background-image:linear-gradient(to right,#0094ff,pink)");this.QueryParams.pagenum++;this.getGoodsList();}},
总结:具体讲解见代码注释
微信小程序下拉刷新上拉加载相关推荐
- php微信小程序向下滑动,微信小程序功能实现:上滑加载下拉刷新
本篇文章给大家带来的内容是关于微信小程序功能实现:上滑加载下拉刷新,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介 ...
- 微信小程序开发之scroll-view上拉加载数据实现
微信小程序开发之scroll-view上拉加载数据实现 一.开发思路 1.使用小程序的scroll-view组件中提供了一个bindscrolltolower属性监听组件的滑动到了底部 https:/ ...
- 微信小程序中使用echart、动态加载几条折线
一.示例 echart小程序示例 gitub地址:GitHub - ecomfe/echarts-for-weixin: Apache ECharts 的微信小程序版本 在小程序中放入 效果 二. 小 ...
- 微信小程序双瀑布流布局+动态懒加载
效果图 实现代码: 思路: 将双瀑布流分为left.right两个数据流,通过动态获取两边数据的动态高度来进行判断,下一条数据插入低的一方. 因为用户所上传图片高度不一致,所以image的mode属性 ...
- 【微信技术-微信小程序】------- 渐进式骨架屏(加载流)(第二篇)
提示:看如下内容需要了解第一篇:简单入门(骨架屏(加载流) 简单入门(第一篇)) 目录 一.什么是渐进式骨架屏? 二.实现渐进式骨架屏 三.效果展示 下载示例代码地址: 渐进式骨架屏示例代码-下载 一 ...
- 【微信小程序】image真机无法加载网络图片
背景 由于最近路边的停车位都被无情的创收铲掉了!今天把车停在了路边,可能是挡住了行人的路,被贴了个条,还留了个纸条--没有你的随车电话,我只能点电话举报你了.气的我牙痒痒! 只能回来自己撸一个挪车电话 ...
- 微信小程序云数据库触底分页加载,下拉无限加载,第一次请求数据随机,随机获取数据库的数据
效果图 小程序云开发分页加载代码 <!--pages/chatList/chatList.wxml--> <view class="pageTitle">家 ...
- 微信小程序实现FBX模型的动画加载
鉴于有CSDN友问我FBX模型在小程序端加载的问题,我就在这里给大家介绍一下吧~ 首先,加载fbx模型,我们用到的是three.js和不同的模型类型的加载库,那么,我们在得到了web版本的加载库的前提 ...
- 微信小程序图片处理方案,解决加载缓慢,影响用户体验
1.改变图片尺寸:对于上传的图片,在后台对图片进行可接受范围内的最大限度压缩,图片宽高不用太大,大概预留你图片容器的1.5倍就行了,除非你做图片放大镜功能,否则小程序上加载2倍图意义不大,清晰度体验也 ...
- 微信小程序媒体组件-image图片懒加载效果
image 基础库 1.0.0 开始支持,低版本需做兼容处理. 图片.支持 JPG.PNG.SVG.WEBP.GIF 等格式,2.3.0 起支持云文件ID. 属性 类型 默认值 必填 说明 最低版本 ...
最新文章
- 关于object references an unsaved transient instance - save the transient instance before flushing的解决方法
- 《Visual C++数字图像模式识别技术详解(第2版)》一3.4 形状特征
- OpenGL CPU射线行进
- 安装hadoop-2.3.0-cdh5.1.2全过程
- banner轮播无缝滚动 jq代码
- P3857-[TJOI2008]彩灯【线性基】
- C#与C/C++的交互zz
- 2评分标准多少分_高新企业认定评分标准,需要多少分才能拿到高新认证证书...
- connection url mysql_JDBC URL格式及其参数说明 oracle mysql
- DBUtils结果集处理
- Win2000自动登陆
- #论char数组结尾’\0’的必要性#
- 大有可为,忍不住再说下 !
- 光纤跳线接口_你知道光纤接头、尾纤、终端盒的作用与接法嘛?读懂这篇足够...
- 厉害了网页扫码,所有方法都给你总结到这了,赶紧收藏
- _stdcall与_cdecl区别
- java微信下载word文件怎么打开方式_微信打不开word文档的解决方法 如何打开word文档...
- 达梦数据库启动、停止,集群环境监视器服务启动、停止,查看各机器状态
- Python网络爬虫第一课----网络爬虫之数据解析方式大全
- 04 第三章 命题逻辑的推理理论