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


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 相关文章推荐
Javascript客户端脚本的设计和应用
Aug 21 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
PHPExcel中的一些常用方法汇总
Jan 23 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
Jul 08 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
微信小程序之发送短信倒计时功能
Aug 30 Javascript
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
vue引用外部JS的两种种方法
Jan 28 Javascript
es6中使用map简化复杂条件判断操作实例详解
Feb 19 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 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 stripslashes和addslashes的区别
2014/02/03 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
jquery和js实现对div的隐藏和显示方法
2014/09/26 Javascript
JS平滑无缝滚动效果的实现代码
2016/05/06 Javascript
javascript简易画板开发
2020/04/12 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
2017/12/31 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
JS打印彩色菱形的实例代码
2018/08/15 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
跟老齐学Python之Import 模块
2014/10/13 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
python 实现对文件夹内的文件排序编号
2018/04/12 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
Python中字符串与编码示例代码
2019/05/20 Python
python调用支付宝支付接口流程
2019/08/15 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
运动会开幕式解说词
2014/02/05 职场文书
春节联欢晚会主持词范文
2014/03/24 职场文书
关于运动会的口号
2014/06/07 职场文书
统计专业自荐书
2014/07/06 职场文书
小学教代会开幕词
2016/03/04 职场文书
Python实现信息管理系统
2022/06/05 Python