登录  /  注册

小程序开发之列表的上拉加载和下拉刷新效果实现教程

巴扎黑
发布: 2017-08-17 14:53:25
原创
1675人浏览过
微信小程序可谓是9月21号之后最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会让移动端App颠覆,让移动端的程序员失业,身为一个Android开发者我是不相信的,即使有,那也是需要个一两年的过度和打磨才能实现的吧。
不管微信小程序是否能颠覆当今的移动开发格局,我们都要积极向上的心态去接收,去学习。不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具。那么接下来就让我们来开始学习列表的上拉加载和下拉刷新的实现吧(通过聚合数据平台获取微信新闻)。
1.介绍几个组件
1.1 scroll-view 组件
小程序开发之列表的上拉加载和下拉刷新效果实现教程

注意:使用竖向滚动时,需要给一个固定高度,通过 WXSS 设置 height。
1.2 image组件

图片:2.jpg

小程序开发之列表的上拉加载和下拉刷新效果实现教程


注意:mode有12种模式,其中3种是缩放模式,9种是裁剪模式。
1.3 Icon组件

图片:3.jpg

小程序开发之列表的上拉加载和下拉刷新效果实现教程




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先来张效果图

图片:4.gif

小程序开发之列表的上拉加载和下拉刷新效果实现教程


2.2逻辑很简单,直接上代码
2.2.1 detail.wxml 布局文件
<loading hidden="pw_hidden" bindchange="loadingChange">
 加载中... </loading> 
 <scroll-view scroll-y="true" style="height: 100%;" bindscrolltolower="loadMore" bindscrolltoupper="refesh"> <view wx:if="pw_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="pw_list" wx:for-item="item" bindtap="bindViewTap" data-title="pw_item.title" > <image style=" width: 50px;height: 50px;margin: 20rpx;" src="pw_item.firstImg" ></image> <view class="eee" > 
 <view style="margin:5px;font-size:8px"> 标题:pw_item.title</view> <view style="margin:5px;color:red;font-size:6px"> 来源:pw_item.source</view> </view></view><view class="tips1"> <view wx:if="pw_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(&#39;../../utils/network_util.js&#39;);var json_util = require(&#39;../../utils/json_util.js&#39;);Page({
 data:{ // text:"这是一个页面"
 list:[],
 dd:&#39;&#39;,
 hidden:false,
 page: 1,
 size: 20,
 hasMore:true,
 hasRefesh:false },
 onLoad:function(options){ var that = this; var url = &#39;http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=1&ps=10&#39;;
 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 = &#39;http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=&#39;+(++that.data.page)+&#39;&ps=10&#39;;
 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 = &#39;http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=1&ps=10&#39;;
 network_util._get(url, function(res){
 that.setData({
 list:res.data.result.list,
 hidden: true,
 page:1,
 hasRefesh:false, }); },function(res){
 console.log(res); })},})
登录后复制

最后的效果:

图片:5.jpg

小程序开发之列表的上拉加载和下拉刷新效果实现教程

以上就是小程序开发之列表的上拉加载和下拉刷新效果实现教程 的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号