微信小程序实现下滑到底部自动翻页功能


Posted in Javascript onMarch 07, 2020

前言

这段时间接了一个微信小程序项目,从此打开小程序的新世界大门。然后发现使用页码进行翻页已经不适用于手机app,我们日常中实用的手机app或者小程序进行翻页一般都是使用底部后下拉的方式。

解决思路

我发现微信小程序远程组件提供了一个scroll-view(可滚动视图区域),这个组件中有个属性,bindscrolltolower能够监听区域内滑到了最后一个位置。这就能用来解决和实现我们提出的问题。当用户滑到最后一个元素,触发函数,我们在该函数中请求下一页的数据,然后追加到展示列表里。ps:需要一个变量来存储当前页码

微信小程序实现下滑到底部自动翻页功能

实现

wxml:

<scroll-view class="scroll_view" scroll-y bindscrolltolower="nextPage">
 <view style="height:100vh">
  <block wx:for="{{lists}}" wx:for-index="index" wx:for-item="item" wx:key="unique">
   <view style="height:10vh;border:1rpx solid red">
    {{item}}
   </view>
  </block>
 </view>
</scroll-view>

wxss:

.scroll_view{
 height:100vh;
}

js:

Page({

 data: {
  lists: [],
  page: 1
 },
 //监听是否滑到底部
 nextPage: function () {
  let new_lists = [];
  let page = this.data.page;
  let startindex = page * 10 + 1;
  console.log("第" + page + "页滑到底部了,请求第" + (page + 1) + "页");
  page += 1;
  //模拟请求
  for (let i = startindex; i <= startindex + 9; i++) {
   new_lists.push(i);
  }
  this.setData({ lists: this.data.lists.concat(new_lists), page: page });
 },
 onLoad: function (options) {
  let lists = [];
  //模拟请求
  for (let i = this.data.page; i <= this.data.page + 9; i++) {
   lists.push(i)
  }
  this.setData({ lists: lists, });
 },
})

效果:

微信小程序实现下滑到底部自动翻页功能

说明

我这里没有做判断是否请求到最后一页,我们一般后台逻辑是当请求当前页码为空时说明上一页已经是最后一页了。我们可以在nextPage函数论进行相应的逻辑判断处理,我这里就不展示了,大家自己实现,不会的给我留个言。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用Jquery打造最佳用户体验的登录页面的实现代码
Jul 08 Javascript
基于jquery实现漂亮的动态信息提示效果
Aug 02 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
js 跳出页面的frameset框架示例介绍
Dec 23 Javascript
jQuery实现三级菜单的代码
May 09 Javascript
浅谈js中的延迟执行和定时执行
May 31 Javascript
AngularJS 入门教程之事件处理器详解
Aug 19 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
Vue中在新窗口打开页面及Vue-router的使用
Jun 13 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 Javascript
element的el-table中记录滚动条位置的示例代码
Nov 06 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
Dec 04 Javascript
js实现选项卡效果
Mar 07 #Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 #Javascript
js实现简单放大镜效果
Mar 07 #Javascript
js实现文字头像的生成代码
Mar 07 #Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 #Javascript
原生JS实现萤火虫效果
Mar 07 #Javascript
JavaScript实现轮播图片完整代码
Mar 07 #Javascript
You might like
php 常用算法和时间复杂度
2013/07/01 PHP
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
php DES加密算法实例分析
2019/09/18 PHP
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
jQuery动画animate方法使用介绍
2013/05/06 Javascript
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
JQuery节点元素属性操作方法
2015/06/11 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
Bootstrap select多选下拉框实现代码
2016/12/23 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
JS实现电商放大镜效果
2017/08/24 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
Python中实现最小二乘法思路及实现代码
2018/01/04 Python
python之pandas用法大全
2018/03/13 Python
次世代生活态度:Hypebeast
2018/07/05 全球购物
新西兰便宜隐形眼镜购买网站:QUICKLENS New Zealand
2019/03/02 全球购物
汽车销售求职自荐信
2013/10/01 职场文书
客房主管岗位职责
2013/12/09 职场文书
副总经理任命书
2014/06/05 职场文书
教师暑期培训感言
2014/08/15 职场文书
材料物理专业求职信
2014/09/01 职场文书
学生会干部任命书
2015/09/21 职场文书
大学生学习十八届五中全会精神心得体会
2016/01/05 职场文书
sql中mod()函数取余数的用法
2021/05/29 SQL Server
SpringBoot+VUE实现数据表格的实战
2021/08/02 Java/Android
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android