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


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 相关文章推荐
jMessageBox 基于jQuery的窗口插件
Dec 09 Javascript
页面只能打开一次Cooike如何实现
Dec 04 Javascript
js动画效果制件让图片组成动画代码分享
Jan 14 Javascript
jquery解析JSON数据示例代码
Mar 17 Javascript
使用GruntJS构建Web程序之构建篇
Jun 04 Javascript
js换图片效果可进行定时操作
Jun 09 Javascript
用js实现放大镜的效果的简单实例
May 23 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 Javascript
如何制作一个Node命令行图像识别工具
Dec 12 Javascript
详解如何使用nvm管理Node.js多版本
May 06 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 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分割合并两个字符串的函数实例
2015/06/19 PHP
smarty简单应用实例
2015/11/03 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
2016/06/17 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
Vue AST源码解析第一篇
2017/07/19 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
JavaScrip如果基于url实现图片下载
2020/07/03 Javascript
vant自定义二级菜单操作
2020/11/02 Javascript
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
Django中几种重定向方法
2015/04/28 Python
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
python中解析json格式文件的方法示例
2017/05/03 Python
python将文本中的空格替换为换行的方法
2018/03/19 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
python scatter函数用法实例详解
2020/02/11 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
基于python的opencv图像处理实现对斑马线的检测示例
2020/11/29 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
幼儿园大班家长评语
2014/04/17 职场文书
暑期培训班招生方案
2014/08/26 职场文书
中学生运动会通讯稿大全
2014/09/18 职场文书
代领报检证委托书范本
2014/10/11 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript