微信小程序 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 相关文章推荐
来自chinaz的ajax获取评论代码
May 03 Javascript
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
Sep 09 Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 Javascript
javascript中常用编程知识
Apr 08 Javascript
jQuery中:only-child选择器用法实例
Jan 03 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
js canvas实现擦除动画
Jul 16 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
简单快速的实现js计算器功能
Aug 17 Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
Jun 02 Javascript
JS Object构造函数之Object.freeze
Apr 28 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简单提示框alert封装函数
2010/08/08 PHP
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
php封装的单文件(图片)上传类完整实例
2016/10/18 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
用javascript控制iframe滚动的代码
2007/04/10 Javascript
Extjs 几个方法的讨论
2010/01/28 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
2012/05/14 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
2016/09/04 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
初探JavaScript 面向对象(推荐)
2017/09/03 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
python getopt 参数处理小示例
2009/06/09 Python
Python Web框架Flask信号机制(signals)介绍
2015/01/01 Python
六个窍门助你提高Python运行效率
2015/06/09 Python
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
python实时分析日志的一个小脚本分享
2017/05/07 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
python可迭代对象去重实例
2020/05/15 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
python/golang 删除链表中的元素
2020/09/14 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
T3官网:头发造型工具
2019/12/26 全球购物
linux面试题参考答案(4)
2014/09/21 面试题
2015年会计人员工作总结
2015/05/22 职场文书
Pytorch 如何实现常用正则化
2021/05/27 Python
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫