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


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压缩混淆工具
May 16 Javascript
超越Jquery_01_isPlainObject分析与重构
Oct 20 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
Nov 25 Javascript
javascript获取flash版本号的方法
Nov 20 Javascript
javascript中eval函数用法分析
Apr 25 Javascript
浅析JavaScript 调试方法和技巧
Oct 22 Javascript
jquery实现可旋转可拖拽的文字效果代码
Jan 27 Javascript
vue.js实例todoList项目
Jul 07 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
vue的状态管理模式vuex
Nov 30 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
微信小程序Echarts图表组件使用方法详解
Jun 25 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
合作指挥官:孟斯克
2020/03/16 星际争霸
PHP 编程的 5个良好习惯
2009/02/20 PHP
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
一个用js实现的页内搜索代码
2007/05/23 Javascript
Script的加载方法小结
2011/01/12 Javascript
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
使用jquery操作session方法分享
2015/01/22 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
js获取图片的base64编码并压缩
2020/12/05 Javascript
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
python实现爬取千万淘宝商品的方法
2015/06/30 Python
python调用opencv实现猫脸检测功能
2019/01/15 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
Django中的cookie和session
2019/08/27 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
python3 字符串知识点学习笔记
2020/02/08 Python
python绘制玫瑰的实现代码
2020/03/02 Python
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
会计专业应届生求职信
2013/11/24 职场文书
致裁判员加油稿
2014/02/08 职场文书
大学生学雷锋活动总结
2014/06/26 职场文书
2014年售票员工作总结
2014/11/19 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
Python四款GUI图形界面库介绍
2022/06/05 Python