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


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 小练习(实例代码)
Aug 07 Javascript
js中的eventType事件及其浏览器支持性介绍
Nov 29 Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
Bootstrap精简教程
Nov 27 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
JS基于正则表达式的替换操作(replace)用法示例
Apr 28 Javascript
JavaScript实现瀑布流图片效果
Jun 30 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
vue template中slot-scope/scope的使用方法
Sep 06 Javascript
JS实现的全选、全不选及反选功能【案例】
Feb 19 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冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
php中spl_autoload详解
2014/10/17 PHP
微信支付开发维权通知实例
2016/07/12 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
javascript实现完美拖拽效果
2015/05/06 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
django使用图片延时加载引起后台404错误
2017/04/18 Python
Python开发的实用计算器完整实例
2017/05/10 Python
解决python3中解压zip文件是文件名乱码的问题
2018/03/22 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
Django ImageFiled上传照片并显示的方法
2019/07/28 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
员工年终自我评价
2014/09/14 职场文书
超市主管竞聘书
2015/09/15 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python
使用Pytorch实现two-head(多输出)模型的操作
2021/05/28 Python
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js