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


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 相关文章推荐
ext for eclipse插件安装方法
Apr 27 Javascript
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
JavaScript基础知识之数据类型
Aug 06 Javascript
jQuery实现炫酷的鼠标轨迹特效
Feb 01 Javascript
jQuery判断指定id的对象是否存在的方法
May 22 Javascript
AngularJS中的API(接口)简单实现
Jul 28 Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 Javascript
bootstrap手风琴折叠示例代码分享
May 22 Javascript
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 Javascript
微信小程序批量上传图片到七牛(推荐)
Dec 19 Javascript
让IDE识别webpack的别名alias的实现方法
May 06 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+mysql扎实个人基本功
2008/03/27 PHP
php HtmlReplace输入过滤安全函数
2010/07/03 PHP
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
webpack优化的深入理解
2018/12/10 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
Vue实现点击导航栏当前标签后变色功能
2020/08/19 Javascript
JavaScript实现下拉列表
2021/01/20 Javascript
设置python3为默认python的方法
2018/10/31 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
python Zmail模块简介与使用示例
2020/12/19 Python
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
写一个方法1000的阶乘
2012/11/21 面试题
介绍一下Java中标识符的命名规则
2014/02/03 面试题
公务员总结性个人自我评价
2013/12/05 职场文书
洗煤厂厂长岗位职责
2014/01/03 职场文书
单位提档介绍信
2014/01/17 职场文书
80后职场人的职业生涯规划
2014/03/08 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
争先创优公开承诺书
2014/08/30 职场文书
初中语文教学随笔
2015/08/15 职场文书
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
Python标准库pathlib操作目录和文件
2021/11/20 Python
yolov5返回坐标的方法实例
2022/03/17 Python