微信小程序页面无限滚动流
场景
当前的小程序非常火,开发起来也很快,框架很多,今天讲下mpvue这个框架实现页面无限滚动流,滚动到底加载新数据。
问题
微信小程序不支持Dom, 那么要实现一个无限的滚动效果那不是蛋疼?
mpvue+scroll-view实现
mpvue这个是美团开源的一个框架, 语法是和vue99%相似,但是坑很多,如果你遇到可以看下我的mpvue的其他文章,里面详细的讲了哪些坑以及解决办法。
scroll-view标签是微信原生提供的标签组件, 全局可用。看代码, 先在templates中把结构写好, 注意mpvue可以使用微信原生的标签!
<template>
<div id="test"><scroll-view @scrolltolower="lower" lower-threshold="20rpx" scroll-y="true"><div v-for="(v,i) in content" :key="i"><p class="text" v-for="(val, n) in v" :key="n" v-text="val"></p></div></scroll-view>
</div>
</template>
- @scrolltolower=“lower” 绑定一个回调函数,就是说条件满足,触发此函数
- lower-threshold=“20rpx” 到距离底部还有20rpx在触发上面的@scrolltolower="lower"事件
- 你可以按照自己的需求修改这个值,这个是按照自己的业务场景而定
- scroll-y=“true”,允许纵向y轴滚动
注意: id="test"这个盒子一定要有高度,要不然滚不动!如果你出现了此问题请看我mpvue其他文章里面有解决办法!
重点核心
在methods中定义一个上面绑定的方法,lower。
lower(){if(this.addStatus){this.addStatus = !this.addStatus;// 这里写你想要的逻辑let that = this;wx.request({url: that.URL",method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECTdata: that.info,success: function (res) {// success},fail: function () {// failconsole.log("失败");},});// 这个异步的逻辑是核心 不能少new Promise((resolve, reject) => {let that = this;setTimeout(function(){that.addStatus = !that.addStatus;}, 3000);});}},
- 在data中定义一个状态addStatus,用于控制滑动请求次数,因为我们定义的是距离底部20rpx,所以可能会触发多次lower函数
- 所以我们定义一个状态保证一次只有一个请求
- 当进入 if(this.addStatus)后立马把 this.addStatus状态改为false,保证不会再进来了
- 开始请求数据,或其他逻辑
- 最后Promise异步重置这个状态that.addStatus,保证下次可以继续进来,并且这不会阻碍程序继续加载
- 我这边按照我的需求是三秒钟, 可以按照自己的业务来定
结束
scroll-view滚不动!如果你出现了此问题请看我mpvue其他文章里面有解决办法!最后友情链接有我的博客和github地址,欢迎相互沟通学习!
想一起讨论/学习微信小游戏开发的,GO语言开发的,请微信搜索下方小程序加博主微信群
微信小程序页面无限滚动流相关推荐
- 微信小程序页面上下滚动、左右滑动(二)
系列文章目录 微信小程序页面上下滚动.左右滑动(一) 文章目录 系列文章目录 前言 项目结构 解决问题1 1.pretest页面 2.test页面 解决问题2 总结 参考 前言 在上一篇文章,讲解了再 ...
- 微信小程序页面竖向滚动逻辑
微信小程序页面竖向滚动逻辑 1.实现下面类似的数组 注:下面这个生成的数组最好是整数,滑动的时候会失去精度的,要不然你永远会差一点,让你崩溃的.而且你永远不知道差在哪里. this.leftScrol ...
- 微信小程序实现无限滚动列表
实现方式是利用小程序原声组件swiper,方向设置为纵向 :vertical='true'设置同时显示的滑块数量:display-multiple-items='4'设置自动轮播:autoplay:' ...
- IOS微信小程序页面滚动导致滚动穿透的解决办法
IOS微信小程序页面滚动导致滚动穿透的解决办法 当微信小程序页面存在弹窗并且有可滚动的列表时,IOS默认的页面滚动会使弹窗滚动列表失焦,从而出现弹窗列表无法滚动的情况 第一步 第二步 当微信小程序页面 ...
- php小程序 100行左右,微信小程序 左右分类滚动列表
今天需求个类似得到app分类的功能,效果如图: 左右分别滚动,互不干扰,先把简单的布局和样式搭好. 左侧分类 右侧顶部分类 右侧列表 .flex_row{display: flex;flex-dire ...
- 微信小程序-页面配置-界面显示部分
微信小程序-页面配置-界面显示部分 配置项 singlePage 小结: 每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置. 页面中配置项在当前页面会覆盖 app.json 的 ...
- 小程序如何做成html的滚动字幕,微信小程序实现文字滚动
本文实例为大家分享了微信小程序实现文字滚动的具体代码,供大家参考,具体内容如下 wxml: 显示完后再显示: {{text}} 出现白边后即显示: {{text}} {{text}} wxss: .e ...
- 微信小程序实现文字滚动
微信小程序实现文字滚动 1.wxml <view class="container"><view class='list' animation="{{a ...
- 微信小程序页面间通信的5种方式
微信小程序页面间通的5种方式 PageModel(页面模型)对小程序而言是很重要的一个概念,从app.json中也可以看到,小程序就是由一个个页面组成的. 如上图,这是一个常见结构的小程序:首页是一个 ...
最新文章
- 26期20180716 iptables规则备份恢复 firewalld zone
- 原码、反码、补码的产生、应用以及优缺点有哪些?
- android sharedpre,Android SharedPreferences四种操作模式使用详解_Android_脚本之家
- windows mysql读写分离_windows下的MySql实现读写分离
- 手把手教你搭建Mac环境微信小程序的本地测试服务器
- 如何使编译的EXE程序能多个运行?
- JavaScript循环及练习
- Oracle 中给表添加主键、外键
- Java-实现异地登陆和超时登陆
- 学点PYTHON基础的东东--数据结构,算法,设计模式---访问者模式
- 打印计算机错误,打印机测试错误 原因administrator解决办法
- Python操作PDF的神器——PyMuPDF
- vmware虚拟机使用docker使用代理国外镜像
- 【干货】大数据招聘官就业指导
- 泰康人寿付刚:IT规划 SOA是目标
- 62. 丑数(剑指Offer经典题)
- 人脸识别嵌入式Linux芯片瑞芯微RV1109参数介绍
- 大数据工程师修炼笔记
- Windows10中如何使用ADSL固定IP地址连接因特网
- Windows10与iPhone文件互传神器——Intel Unison,Win10版安装教程,解决Win10无法安装问题