微信小程序 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 相关文章推荐
javascript 解析url的search方法
Feb 09 Javascript
Javascript 中的 call 和 apply使用介绍
Feb 22 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
在JS中如何调用JSP中的变量
Jan 22 Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 Javascript
JavaScript驾驭网页-DOM
Mar 24 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 Javascript
原生js实现表格翻页和跳转
Sep 29 Javascript
JavaScript函数柯里化
Nov 07 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 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
Javascript动画的实现原理浅析
2015/03/02 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
解析vue中的$mount
2017/12/21 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
Python中的面向对象编程详解(下)
2015/04/13 Python
Python 3中print函数的使用方法总结
2017/08/08 Python
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
Python的多维空数组赋值方法
2018/04/13 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
尼克松手表官网:Nixon手表
2019/03/17 全球购物
香港士多网上超级市场:Ztore
2021/01/09 全球购物
名企HR怎样看待求职信
2014/02/23 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书
英文慰问信范文
2015/03/24 职场文书
停电调休通知
2015/04/16 职场文书
五年级作文之成长
2019/09/16 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL
nginx静态资源的服务器配置方法
2022/07/07 Servers