微信小程序 列表的上拉加载和下拉刷新的实现
作者:请叫我小东子 时间:2024-05-11 09:34:32
微信小程序可谓是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.jb51.net/201703/yuanma/WeiXinProject-master_jb51.rar
来源:http://blog.csdn.net/u010046908/article/details/52733305
标签:微信小程序,下拉,加载
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
MySQL8.0中binlog的深入讲解
2024-01-16 23:22:02
![](https://img.aspxhome.com/file/2023/2/96492_0s.png)
给Notepad++换主题
2009-05-04 14:43:00
![](https://img.aspxhome.com/file/UploadPic/20095/4/rhtml-39s.gif)
SQL查询入门(中篇)
2011-09-30 11:15:09
Python在cmd上打印彩色文字实现过程详解
2022-12-19 07:27:33
![](https://img.aspxhome.com/file/2023/8/90378_0s.png)
python中使用while循环的实例
2022-12-25 00:23:57
![](https://img.aspxhome.com/file/2023/9/101589_0s.jpg)
浅谈JavaScript中等号、双等号、 三等号的区别
2024-04-29 13:45:04
javascript判断中文的正则
2024-04-10 10:56:27
使用pycharm生成代码模板的实例
2021-03-07 04:57:52
全面了解JavaScript对象进阶
2024-04-22 12:47:51
pyinstaller封装exe的操作
2021-02-12 03:21:16
![](https://img.aspxhome.com/file/2023/4/97694_0s.jpg)
符合网站标准的图片切换代码(天极软件)
2008-02-20 08:23:00
![](https://img.aspxhome.com/file/UploadPic/20082/20/200822083043320s.gif)
另类读写:ACCESS中Field对象的标题属性
2008-11-28 16:47:00
还原大备份mysql文件失败的解决方法分享
2024-01-26 17:42:04
MySQL事务(transaction)看这篇就足够了
2024-01-12 13:54:09
![](https://img.aspxhome.com/file/2023/2/119722_0s.png)
想用户所想(感受亚马逊的设计)
2007-08-26 17:09:00
![](https://img.aspxhome.com/file/UploadPic/20078/26/2007826171322368s.gif)
Python3 如何开启自带http服务
2023-07-27 14:33:46
![](https://img.aspxhome.com/file/2023/1/63911_0s.jpg)
MySQL 导入慢的解决方法
2024-01-22 12:08:42
关于python常见异常以及处理方法
2021-03-17 06:13:34
Pandas实现批量拆分与合并Excel的示例代码
2022-06-07 22:36:28
![](https://img.aspxhome.com/file/2023/9/79489_0s.png)
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2024-05-05 09:09:59
![](https://img.aspxhome.com/file/2023/0/130120_0s.gif)