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


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 相关文章推荐
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 Javascript
Javascript 实现复制(Copy)动作方法大全
Jun 20 Javascript
jquery中使用循环下拉菜单示例代码
Sep 24 Javascript
浅析javascript中的事件代理
Nov 06 Javascript
canvas时钟效果
Feb 16 Javascript
js 获取今天以及过去日期
Apr 11 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
Jul 05 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 Javascript
了解重排与重绘
May 29 Javascript
JS数组Object.keys()方法的使用示例
Jun 05 Javascript
VUE实现自身整体组件销毁的示例代码
Jan 13 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的bbs设计(二)
2006/10/09 PHP
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
2017/07/03 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
利用JS如何获取form表单数据
2019/12/19 Javascript
jquery实现简单自动轮播图效果
2020/07/29 jQuery
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
Python 私有函数的实例详解
2017/09/11 Python
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
Python读取yaml文件的详细教程
2020/07/21 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
2015年世界水日活动总结
2015/02/09 职场文书
新学期感想
2015/08/10 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
2016优秀毕业生个人事迹材料
2016/02/29 职场文书
Python破解极验滑动验证码详细步骤
2021/05/21 Python