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


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 相关文章推荐
javascript编程起步(第六课)
Feb 27 Javascript
javascript学习随笔(使用window和frame)的技巧
Mar 08 Javascript
Javascript入门学习资料收集整理篇
Jul 06 Javascript
JSON 入门指南 想了解json的朋友可以看下
Aug 26 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
JavaScript中解析JSON数据的三种方法
Jul 03 Javascript
JS阻止事件冒泡行为和闭包的方法
Jun 16 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
Mar 09 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
解决vue-cli webpack打包开启Gzip 报错问题
Jul 24 Javascript
微信小程序自定义波浪组件使用方法详解
Sep 21 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
星际RPG字典
2020/03/04 星际争霸
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
jQuery ajax+PHP实现的级联下拉列表框功能示例
2019/02/12 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
2015/12/08 Javascript
JS原型链怎么理解
2016/06/27 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
React组件refs的使用详解
2018/02/09 Javascript
vue初始化动画加载的实例
2018/09/01 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
2019/04/23 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
2020/04/30 jQuery
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
Python smtp邮件发送模块用法教程
2020/06/15 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
工商管理专业应届生求职信
2013/11/04 职场文书
毕业生优秀推荐信
2013/11/26 职场文书
中英文自我评价常用句型
2013/12/19 职场文书
《台湾的蝴蝶谷》教学反思
2014/02/20 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
2014年干部培训工作总结
2014/12/17 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP