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


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操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
7个去伪存真的JavaScript面试题
Jan 07 Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 Javascript
jQuery、zepto、js常用小技巧
Feb 12 Javascript
使用OPENLAYERS3实现点选的方法
Sep 24 Javascript
ionic2懒加载配置详解
Sep 01 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
koa源码中promise的解读
Nov 13 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
Jul 20 Javascript
小程序中手机号识别的示例
Dec 14 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网上调查系统
2006/10/09 PHP
php文件上传简单实现方法
2015/01/24 PHP
[原创]php简单防盗链验证实现方法
2016/07/09 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
PHP实现图片压缩
2020/09/09 PHP
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
快速对接payjq的个人微信支付接口过程解析
2019/08/15 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
python函数参数*args**kwargs用法实例
2013/12/04 Python
Python简单进程锁代码实例
2015/04/27 Python
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
使用python实现knn算法
2017/12/20 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
2019/10/14 Python
python实现复制文件到指定目录
2019/10/16 Python
python 实现绘制整齐的表格
2019/11/18 Python
自主实习接收函
2014/01/13 职场文书
募捐感谢信
2015/01/22 职场文书
投诉书格式范本
2015/07/02 职场文书
自荐信大全
2019/03/21 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers
python对文档中元素删除,替换操作
2022/04/02 Python
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers