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


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做一个小游戏平台 (一)
Dec 29 Javascript
JQUERY对单选框(radio)操作的小例子
Apr 25 Javascript
jquery实现图片裁剪思路及实现
Aug 16 Javascript
javascript中style.left和offsetLeft的用法说明
Mar 07 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
jQuery实现隔行背景色变色
Nov 24 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 Javascript
关于 angularJS的一些用法
Nov 29 Javascript
js 数组详细操作方法及解析合集
Jun 01 Javascript
vue实现form表单与table表格的数据关联功能示例
Jan 29 Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 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
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
php安全开发 添加随机字符串验证,防止伪造跨站请求
2013/02/14 PHP
PHP错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
jQuery之end()和pushStack()使用介绍
2012/02/07 Javascript
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
Angularjs 事件指令详细整理
2017/07/27 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
JavaScript中的一些实用小技巧总结
2019/04/07 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
[05:05]DOTA2亚洲邀请赛 战队出场仪式
2015/02/07 DOTA
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
解决Spyder中图片显示太小的问题
2018/04/27 Python
kafka-python批量发送数据的实例
2018/12/27 Python
详解python编译器和解释器的区别
2019/06/24 Python
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
体育学院毕业生自荐信
2013/11/03 职场文书
公司董事长职责
2013/12/12 职场文书
小区门卫值班制度
2014/01/24 职场文书
《与象共舞》教学反思
2014/02/24 职场文书
最经典的大学生职业生涯规划范文
2014/03/05 职场文书
安全生产标语
2014/06/06 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
本科生求职信
2014/06/17 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
2014年后备干部工作总结
2014/12/08 职场文书
公司仓库管理制度
2015/08/04 职场文书
2016消防宣传标语口号
2015/12/26 职场文书
Python列表的索引与切片
2022/04/07 Python