微信小程序 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 相关文章推荐
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
解释&amp;&amp;和||在javascript中的另类用法
Jul 28 Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 Javascript
canvas学习之API整理笔记(二)
Dec 29 Javascript
vue组件 keep-alive 和 transition 使用详解
Oct 11 Javascript
js滚轮事件 js自定义滚动条的实现
Jan 18 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
Aug 08 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
Dec 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&amp;&amp;mysql)三
2006/10/09 PHP
如何跨站抓取别的站点的页面的补充
2006/10/09 PHP
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
通过上下左右键和回车键切换光标实现代码
2013/03/08 Javascript
js判断浏览器类型的方法
2013/08/07 Javascript
基于promise.js实现nodejs的promises库
2014/07/06 NodeJs
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
jQuery Ajax前后端使用JSON进行交互示例
2017/03/17 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
vue router仿天猫底部导航栏功能
2017/10/18 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
Python正则表达式经典入门教程
2017/05/22 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
Python多进程原理与用法分析
2018/08/21 Python
python2 与 pyhton3的输入语句写法小结
2018/09/10 Python
Python 内存管理机制全面分析
2021/01/16 Python
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
毕业学生推荐信
2013/12/01 职场文书
会计大学生职业生涯规划书范文
2014/01/13 职场文书
医学类个人求职信范文
2014/02/05 职场文书
护士求职自荐信范文
2014/03/19 职场文书
三方股东合作协议书
2014/10/28 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
《秦兵马俑》教学反思
2016/02/24 职场文书
maven依赖的version声明控制方式
2022/01/18 Java/Android