微信小程序页面滑动屏幕加载数据效果


Posted in Javascript onNovember 16, 2020

滑动屏幕加载数据是任何小程序中都会用到的功能,本文我就将这个功能整理给大家,希望对大家有意。我们先看看效果图:

微信小程序页面滑动屏幕加载数据效果

创建目录

首先我们现在项目中创建资讯目录,以下是我自己创建的目录,大家可以根据自己的需求创建。如图所示:

微信小程序页面滑动屏幕加载数据效果

创建lists.js文件

以下是lists.js代码

var app = getApp()
Page({
 data: {
 newsList: [],
 lastid: 0,
 toastHidden: true,
 confirmHidden: true,
 isfrist: 1,
 loadHidden: true,
 moreHidden: 'none',
 msg: '没有更多文章了'
 },
 loadData: function (lastid) {
 //显示出加载中的提示
 this.setData({ loadHidden: false })
 var limit = 10
 var that = this
 wx.request({
  url: 'http://127.0.0.1:9090/hpm_bill_web/news/getnewslist', //数据接口
  data: { lastid: lastid, limit: limit },
  header: {
  'Content-Type': 'application/json'
  },
  success: function (res) {
  if (!res.data) {
   that.setData({ toastHidden: false })
   that.setData({ moreHidden: 'none' })
   return false
  }
  var len = res.data.length
  var oldLastid = lastid
  if(len != 0) {
   that.setData({ lastid: res.data[len - 1].id })
  } else {
   that.setData({ toastHidden: false})
  }
  var dataArr = that.data.newsList
  var newData = dataArr.concat(res.data);
   if (oldLastid == 0) {
   wx.setStorageSync('CmsList', newData)
   }
  that.setData({ newsList: newData })
  that.setData({ moreHidden: '' })
  },
  fail: function (res) {
  if (lastid == 0) {
   var newData = wx.getStorageSync('CmsList')
   if(newData) {
   that.setData({ newsList: newData })
   that.setData({ moreHidden: '' })
   var len = newData.length
   if (len != 0) {
    that.setData({ lastid: newData[len - 1].id })
   } else {
    that.setData({ toastHidden: false })
   }
   console.log('data from cache');
   }
   } else {
   that.setData({ toastHidden: false, moreHidden: 'none', msg: '当前网格异常,请稍后再试' })
   }
  },
  complete: function () {
  //显示出加载中的提示
  that.setData({ loadHidden: true })
  }
 })
 },
 loadMore: function (event) {
 var id = event.currentTarget.dataset.lastid
 var isfrist = event.currentTarget.dataset.isfrist
 var that = this
 wx.getNetworkType({
  success: function (res) {
  var networkType = res.networkType // 返回网络类型2g,3g,4g,wifi
  if (networkType != 'wifi' && isfrist == '1') {
   that.setData({ confirmHidden: false })
  }
  }
 })
 this.setData({ isfrist: 0 })
 this.loadData(id);
 },
 onLoad: function () {
 var that = this
 this.loadData(0);
 },
 toastChange: function () {
 this.setData({ toastHidden: true })
 },
 modalChange: function () {
 this.setData({ confirmHidden: true })
 }
})

创建页面文件(lists.wxml)

<view class="warp">
 <!-- 文章列表模板 begin -->
 <template name="items">
 <navigator url="../../pages/detail/detail?id={{id}}" hover-class="navigator-hover">
  <view class="imgs">
  <image src="{{image}}" class="in-img" background-size="cover" model="scaleToFill"></image>
  </view>
  <view class="infos">
  <view class="title">{{name}}</view>
  <view class="dates">{{createtime}}</view>
  </view>
 </navigator>
 </template>
 <!-- 文章列表模板 end -->
 <!-- 循环输出列表 begin -->
 <view wx:for="{{newsList}}" class="list">
 <template is="items" data="{{...item}}" />
 </view>
 <!-- 循环输出列表 end -->
<loading hidden="{{loadHidden}}" bindchange="loadChange">
 数据加载中...
</loading>
 <view bindtap="loadMore" data-lastid="{{lastid}}" data-isfrist="{{isfrist}}" class="loadMore" style="display:{{moreHidden}}">加载更多</view>
 <toast hidden="{{toastHidden}}" bindchange="toastChange" duration="3000">{{msg}}</toast>
 <modal title="温馨提示" no-cancel confirm-text="明确" cancel-text="关闭" hidden="{{confirmHidden}}" bindconfirm="modalChange" bindcancel="modalChange">你当前不在在WIFI网格下下,会产生流量费用</modal>
</view>

创建页面样式(lists.wxss)

.warp {height:100%;display:flex;flex-direction: column;padding:20rpx;}
navigator {overflow: hidden;}
.list {margin-bottom:20rpx;height:200rpx;position:relative;}
.imgs{float:left;}
.imgs image {display:block;width:200rpx;height:200rpx;}
.infos {float:left;width:480rpx;height:200rpx;padding:20rpx 0 0 20rpx}
.title {font-size:20px; font-family: Microsoft Yahei}
.dates {font-size:16px;color: #aaa; position: absolute;bottom:0;}
.loadMore {text-align: center; margin:30px;color:#aaa;font-size:16px;}

通过以上代码就能实现在屏幕上滑动显示数据的功能。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个对于js this关键字的问题
Jan 09 Javascript
YUI 读码日记之 YAHOO.util.Dom - Part.1
Mar 22 Javascript
js异步加载的三种解决方案
Mar 04 Javascript
异步动态加载js与css文件的js代码
Sep 15 Javascript
使用jquery prev()方法找到同级的前一个元素
Jul 11 Javascript
禁用页面部分JavaScript不是全部而是部分
Sep 03 Javascript
bootstrap vue.js实现tab效果
Feb 07 Javascript
vue中用H5实现文件上传的方法实例代码
May 27 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
axios中cookie跨域及相关配置示例详解
Dec 20 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
Oct 28 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 Javascript
Angularjs中数据绑定的实例详解
Aug 25 #Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 #Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 #Javascript
在Js页面通过POST传递参数跳转到新页面详解
Aug 25 #Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 #Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 #Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 #Javascript
You might like
PHP中上传大体积文件时需要的设置
2006/10/09 PHP
php解析url的三个示例
2014/01/20 PHP
destoon数据库表说明汇总
2014/07/15 PHP
在Debian系统下配置LNMP的教程
2015/07/09 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
javascript 得到变量类型的函数
2010/05/19 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
electron demo项目npm install安装失败的解决方法
2018/02/06 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
[00:32]2018DOTA2亚洲邀请赛VGJ.T出场
2018/04/03 DOTA
一些常用的Python爬虫技巧汇总
2016/09/28 Python
Python实现简易端口扫描器代码实例
2017/03/15 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
django ajax发送post请求的两种方法
2020/01/05 Python
django-csrf使用和禁用方式
2020/03/13 Python
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
高校学生干部的自我评价分享
2013/11/04 职场文书
升职自荐信
2013/11/28 职场文书
双方协议书
2014/04/22 职场文书
专家推荐信模板
2014/05/09 职场文书
政审证明范文
2015/06/19 职场文书
会议主持词结束语
2015/07/03 职场文书