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


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 相关文章推荐
Fixie.js 自动填充内容的插件
Jun 28 Javascript
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 Javascript
javascript获取文档坐标和视口坐标
May 26 Javascript
node.js调用C++开发的模块实例
Jul 03 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
Sep 30 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
简单实现js鼠标跟随效果
Aug 02 Javascript
Vue 中使用 CSS Modules优雅方法
Apr 09 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 Javascript
5种 JavaScript 方式实现数组扁平化
Oct 05 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
MySQL授权问题总结
2007/05/06 PHP
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
浅析PHP中Collection 类的设计
2013/06/21 PHP
PHP简单遍历对象示例
2016/09/28 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
javascript编程起步(第四课)
2007/01/10 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
javascript使用闭包模拟对象的私有属性和方法
2016/10/05 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
2017/12/01 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
用python实现的去除win下文本文件头部BOM的代码
2013/02/10 Python
python实现sublime3的less编译插件示例
2014/04/27 Python
Python的re模块正则表达式操作
2016/05/25 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
使用python-pptx包批量修改ppt格式的实现
2020/02/14 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
酒店值班经理的工作职责范本
2014/02/18 职场文书
农村党支部书记四风问题个人对照检查材料
2014/09/21 职场文书
考研英语复习计划
2015/01/19 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server