微信小程序 scroll-view实现上拉加载与下拉刷新的实例


Posted in Javascript onJanuary 21, 2017

微信小程序 scroll-view实现上拉加载与下拉刷新的实例

实现效果图:

微信小程序 scroll-view实现上拉加载与下拉刷新的实例

如图,使用小程序的scroll-view实现的上拉加载数据,下拉刷新数据,试下代码如下:

js文件代码:

var url = "http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action"; 
var page = 1; 
 
var GetList = function (that) { 
 that.setData({ 
 hidden: false 
 }); 
 wx.request({ 
 url: url, 
 data: { 
  pageSize: 10, 
  pageNo: page 
 }, 
 success: function (res) { 
  var l = that.data.list 
  for (var i = 0; i < res.data.length; i++) { 
  l.push(res.data[i]) 
  } 
  that.setData({ 
  list: l 
  }); 
  page++; 
  that.setData({ 
  hidden: true 
  }); 
 } 
 }); 
} 
Page({ 
 data: { 
 hidden: true, 
 list: [], 
 scrollTop: 0, 
 scrollHeight: 0 
 }, 
 onLoad: function () { 
 var that = this; 
 wx.getSystemInfo({ 
  success: function (res) { 
  console.info(res.windowHeight); 
  that.setData({ 
   scrollHeight: res.windowHeight 
  }); 
  } 
 }); 
 }, 
 onShow: function () { 
 var that = this; 
 GetList(that); 
 }, 
 bindDownLoad: function () { 
 var that = this; 
 GetList(that); 
 }, 
 scroll: function (event) { 
 this.setData({ 
  scrollTop: event.detail.scrollTop 
 }); 
 }, 
 refresh: function (event) { 
 page = 1; 
 this.setData({ 
  list: [], 
  scrollTop: 0 
 }); 
 GetList(this) 
 }, 
 onPullDownRefresh: function () { 
 console.log("下拉") 
 }, 
 onReachBottom: function () { 
 console.log("上拉"); 
 } 
})

json文件代码

{ 
 "navigationBarTitleText": "下拉刷新", 
 "enablePullDownRefresh": true, 
 "backgroundTextStyle": "dark" 
}

wxml文件代码:

<view class="container"> 
 <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" 
 class="list" bindscrolltolower="bindDownLoad" bindscroll="scroll" bindscrolltoupper="refresh"> 
 <view class="item" wx:for="{{list}}"> 
  <image class="img" src="https://cdn.kuaidi100.com/images/all/56/zhongtong.png"></image> 
  <view class="text"> 
  <text class="title">{{item.carrierName}}</text> 
  <text class="description">{{item.carrierTelphone}}</text> 
  <text class="description">{{item.carrierId}}</text> 
  </view> 
 </view> 
 </scroll-view> 
 <view class="body-view"> 
 <loading hidden="{{hidden}}" bindchange="loadingChange"> 
  加载中... 
 </loading> 
 </view> 
</view>

wxss文件代码

.container{ 
 height: 100%; 
 padding: 20rpx; 
} 
 
.item{ 
 display: flex; 
 margin-bottom: 50rpx; 
width:100%; 
background:#f0f0f0; 
overflow:hidden; 
} 
 
.img{ 
 height: 100rpx; 
 width: 100rpx; 
 border-radius: 50%; 
} 
 
.text{ 
 display: flex; 
 flex-shrink:1; 
 flex-grow:1; 
 padding: 10rpx; 
 flex-wrap: wrap; 
 font-size: 50rpx; 
} 
 
.title{ 
 font-size: 50rpx; 
 margin:10rpx 100rpx 10rpx 100rpx; 
} 
.description{ 
 font-size: 50rpx; 
 align-self:flex-end; 
}

注意,

http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action这个接口就是更具传入的页数,每次返回不同数据。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
巧妙破除网页右键禁用的十大绝招
Aug 12 Javascript
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
Javascript面向对象编程(二) 构造函数的继承
Aug 28 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
Javascript编程之继承实例汇总
Nov 28 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 Javascript
JS常用知识点整理
Jan 21 #Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 #Javascript
原生js实现可拖动的登录框效果
Jan 21 #Javascript
微信小程序 WebSocket详解及应用
Jan 21 #Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
Jan 21 #Javascript
遍历json获得数据的几种方法小结
Jan 21 #Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 #Javascript
You might like
PHP学习笔记之二
2011/01/17 PHP
php学习笔记之面向对象编程
2012/12/29 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
微信小程序 获取javascript 里的数据
2017/08/17 Javascript
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
利用Psyco提升Python运行速度
2014/12/24 Python
python判断字符串是否包含子字符串的方法
2015/03/24 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
Python3 批量扫描端口的例子
2019/07/25 Python
python3.7 利用函数os pandas利用excel对文件名进行归类
2019/09/29 Python
PyQt5 文本输入框自动补全QLineEdit的实现示例
2020/05/13 Python
Python替换NumPy数组中大于某个值的所有元素实例
2020/06/08 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
物流管理专业应届生求职信
2013/11/21 职场文书
服装厂厂长职责
2013/12/16 职场文书
策划总监岗位职责
2014/02/16 职场文书
综治工作汇报材料
2014/10/27 职场文书
医者仁心观后感
2015/06/17 职场文书
环保建议书作文400字
2015/09/14 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书
Python中22个万用公式的小结
2021/07/21 Python