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


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 相关文章推荐
jQuery随机切换图片的小例子
Apr 18 Javascript
node.js中的buffer.fill方法使用说明
Dec 14 Javascript
javascript折半查找详解
Jan 26 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 Javascript
js拖拽功能实现代码解析
Nov 28 Javascript
AngularJS $http模块POST请求实现
Apr 08 Javascript
websocket+node.js实现实时聊天系统问题咨询
May 17 Javascript
vuejs选中当前样式active的实例
Aug 22 Javascript
vue动态禁用控件绑定disable的例子
Oct 28 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 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 按位与或 (^ 、&amp;)
2013/06/21 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
js 发个判断字符串是否为符合标准的函数
2009/04/27 Javascript
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
2014/11/28 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
简单谈谈axios中的get,post方法
2017/06/25 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
vue全局使用axios的操作
2020/09/08 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
python实现代码行数统计示例分享
2014/02/10 Python
Python实现Linux中的du命令
2017/06/12 Python
python将字母转化为数字实例方法
2019/10/04 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
读书活动总结范文
2014/04/26 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
2014年网管工作总结
2014/12/11 职场文书
教师节主持词开场白
2015/05/29 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS