微信小程序 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中对象property的读取和写入方法介绍
Dec 30 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
谈谈JavaScript的New关键字
Aug 26 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
Redux实现组合计数器的示例代码
Jul 04 Javascript
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
Apr 17 Javascript
JavaScript实现前端网页版倒计时
Mar 24 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安全配置方法
2007/06/16 PHP
编译PHP报错configure error Cannot find libmysqlclient under usr的解决方法
2014/06/27 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
Jquery Select操作方法集合脚本之家特别版
2010/05/17 Javascript
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
JavaScript中常用的运算符小结
2012/01/18 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
微信小程序 图片边框解决方法
2017/01/16 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
Vue监听数组变化源码解析
2017/03/09 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
在vue中使用express-mock搭建mock服务的方法
2018/11/07 Javascript
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
python django中8000端口被占用的解决
2019/12/17 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
python打包多类型文件的操作方法
2020/09/21 Python
金讯Java笔试题目
2013/06/18 面试题
电子信息专业自荐书
2014/02/04 职场文书
酒店总经理助理职责
2014/02/12 职场文书
群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书
python实现Thrift服务端的方法
2021/04/20 Python