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


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 相关文章推荐
jquery 查找select ,并触发事件的实现代码
Mar 30 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 Javascript
jQuery基本过滤选择器用法示例
Sep 09 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
详解jQuery选择器
Dec 21 Javascript
原生JS实现在线问卷调查投票特效
Jan 03 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
angular.js和vue.js中实现函数去抖示例(debounce)
Jan 18 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
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
JS获取页面input控件中所有text控件并追加样式属性
2013/02/25 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
2013/08/13 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
2020/10/28 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
python改变日志(logging)存放位置的示例
2014/03/27 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
python实现简易版计算器
2020/06/22 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
几个常见的消息中间件(MOM)
2014/01/08 面试题
管理心得体会
2013/12/28 职场文书
刘胡兰的英雄事迹材料
2014/02/11 职场文书
毕业生就业意向书
2014/04/01 职场文书
《赶海》教学反思
2014/04/20 职场文书
社区党员志愿服务活动方案
2014/08/18 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
小学生通知书评语
2014/12/31 职场文书
公司慰问信范文
2015/03/23 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书
话题作文之生命的旋律
2019/12/17 职场文书
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技