微信小程序 列表的上拉加载和下拉刷新的实现


Posted in Javascript onApril 01, 2017

微信小程序可谓是9月21号之后最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会让移动端App颠覆,让移动端的程序员失业,身为一个Android开发者我是不相信的,即使有,那也是需要个一两年的过度和打磨才能实现的吧。

不管微信小程序是否能颠覆当今的移动开发格局,我们都要积极向上的心态去接收,去学习。不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具。那么接下来就让我们来开始学习列表的上拉加载和下拉刷新的实现吧(通过聚合数据平台获取微信新闻)。

1.介绍几个组件

1.1 scroll-view 组件

微信小程序 列表的上拉加载和下拉刷新的实现

注意:使用竖向滚动时,需要给一个固定高度,通过 WXSS 设置 height。

1.2 image组件

微信小程序 列表的上拉加载和下拉刷新的实现

注意:mode有12种模式,其中3种是缩放模式,9种是裁剪模式。

1.3 Icon组件

微信小程序 列表的上拉加载和下拉刷新的实现

iconType: [ 
‘success', ‘info', ‘warn', ‘waiting', ‘safe_success', ‘safe_warn', 
‘success_circle', ‘success_no_circle', ‘waiting_circle', ‘circle', ‘download', 
‘info_circle', ‘cancel', ‘search', ‘clear' 
]

2.列表的上拉加载和下拉刷新的实现

2.1先来张效果图

微信小程序 列表的上拉加载和下拉刷新的实现

2.2逻辑很简单,直接上代码

2.2.1 detail.wxml 布局文件

<loading hidden="{{hidden}}" bindchange="loadingChange">
 加载中...
 </loading> 
 <scroll-view scroll-y="true" style="height: 100%;" bindscrolltolower="loadMore" bindscrolltoupper="refesh">
 <view wx:if="{{hasRefesh}}" style="display: flex;flex-direction: row;align-items: center;align-self: center;justify-content: center;">
 <icon type="waiting" size="45"/><text>刷新中...</text></view>
 <view wx:else style="display:none" ><text></text></view>
 <view class="lll" wx:for="{{list}}" wx:for-item="item" bindtap="bindViewTap" 
 data-title="{{item.title}}" >
 <image style=" width: 50px;height: 50px;margin: 20rpx;" src="{{item.firstImg}}" ></image>
 <view class="eee" > 
 <view style="margin:5px;font-size:8px"> 标题:{{item.title}}</view>
 <view style="margin:5px;color:red;font-size:6px"> 来源:{{item.source}}</view>
 </view>
</view>
<view class="tips1">
 <view wx:if="{{hasMore}}" style="display: flex;flex-direction: row;align-items: center;align-self: center;justify-content: center;">
 <icon type="waiting" size="45"/><text>玩命的加载中...</text></view>
 <view wx:else><text>没有更多内容了</text></view>
 </view>
 </scroll-view>

2.2.1 detail.js逻辑代码文件

var network_util = require('../../utils/network_util.js');
var json_util = require('../../utils/json_util.js');
Page({
 data:{
 // text:"这是一个页面"
 list:[],
 dd:'',
 hidden:false,
 page: 1,
 size: 20,
 hasMore:true,
 hasRefesh:false
 },
 onLoad:function(options){
 var that = this;
 var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=1&ps=10';
 network_util._get(url,
 function(res){
 that.setData({
 list:res.data.result.list,
 hidden: true,
 });
 },function(res){
 console.log(res);
 });
 },
 onReady:function(){
 // 页面渲染完成
 },
 onShow:function(){
 // 页面显示
 },
 onHide:function(){
 // 页面隐藏
 },
 onUnload:function(){
 // 页面关闭
 },
 //点击事件处理
 bindViewTap: function(e) {
 console.log(e.currentTarget.dataset.title);
 },
 //加载更多
 loadMore: function(e) {
 var that = this;
 that.setData({
 hasRefesh:true,});
 if (!this.data.hasMore) return
 var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno='+(++that.data.page)+'&ps=10';
 network_util._get(url,
 function(res){
 that.setData({
 list: that.data.list.concat(res.data.result.list),
 hidden: true,
 hasRefesh:false,
 });
 },function(res){
 console.log(res);
 })
},
//刷新处理
refesh: function(e) {
 var that = this;
 that.setData({
 hasRefesh:true,
 });
 var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=1&ps=10';
 network_util._get(url,
 function(res){
 that.setData({
 list:res.data.result.list,
 hidden: true,
 page:1,
 hasRefesh:false,
 });
 },function(res){
 console.log(res);
 })
},
})

最后的效果:

微信小程序 列表的上拉加载和下拉刷新的实现

关于新闻的详情实现,后面在实现

代码地址:http://xiazai.3water.com/201703/yuanma/WeiXinProject-master_3water.rar

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js getElementsByTagName的简写方式
Jun 27 Javascript
浅谈javascript中的作用域
Apr 07 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
May 23 Javascript
js制作的鼠标悬浮时产生的下拉框效果
Oct 27 Javascript
jQuery页面加载初始化常用的三种方法
Jun 04 Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
Dec 01 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 Javascript
Angular使用Restful的增删改
Dec 28 Javascript
微信小程序 slot踩坑的解决
Apr 01 Javascript
Node.js之网络通讯模块实现浅析
Apr 01 #Javascript
vue-cli+webpack记事本项目创建
Apr 01 #Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
Apr 01 #Javascript
Vue.js实战之Vuex的入门教程
Apr 01 #Javascript
AngularJS页面传参的5种方式
Apr 01 #Javascript
vue2.0构建单页应用最佳实战
Apr 01 #Javascript
vue货币过滤器的实现方法
Apr 01 #Javascript
You might like
全国中波电台频率表
2020/03/11 无线电
PHP制作图型计数器的例子
2006/10/09 PHP
PHP使用适合阅读的格式显示文件大小的方法
2015/03/05 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
基于mootools 1.3框架下的图片滑动效果代码
2011/04/22 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
javascript 中that的含义示例介绍
2014/05/14 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
three.js实现圆柱体
2018/12/30 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
python实现复制整个目录的方法
2015/05/12 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
Python图像滤波处理操作示例【基于ImageFilter类】
2019/01/03 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
python 模拟登陆163邮箱
2020/12/15 Python
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
海南地接欢迎词
2014/01/14 职场文书
律师授权委托书范本
2014/10/07 职场文书
单位实习鉴定评语
2015/01/04 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
公司管理制度范本
2015/08/03 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python