微信小程序初体验-列表的上拉加载和下拉刷新的实现-阿里云开发者社区

开发者社区> 请叫我东子> 正文

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

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010046908/article/details/52733305 ...
+关注继续查看
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010046908/article/details/52733305

微信小程序可谓是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先来张效果图

20161004115244341

!这里写图片描述

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);
 })
},
})

最后的效果:
这里写图片描述

关于新闻的详情实现,后面在实现,由于还不知道怎么加载h5页面。谢谢你学习,有问题直接QQ(1561281670)交流。

代码地址:https://github.com/lidong1665/WeiXinProject

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
6362 0
Web---JS-返回上一页并刷新代码整理
返回上一页并刷新在此功能有利于用户的体验,是每一个web开发人员所必备的一项,长话短说,今天介绍实现此功能的一个方法,需要了解的朋友可以参考下: 一:JS 重载页面,本地刷新,返回上一页 代码如下: 返回上一页 重载页面,本地刷新 返回上一页重载页面,本地刷新 返回前二页并刷新的JS代码应该怎样写。
1003 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
3956 0
Android 下拉刷新,上拉加载更多控件--支持ListView,GridView和ScrollView
麦洛原文:http://miloisbadboy.com/archives/55 由于这个文章比较长点,这里简单贴点代码,详细说明还是看原文吧       主要源码 package com.
758 0
Vue2.0 实战 之 上拉加载下拉刷新
目前有很多方式可以实现上拉刷新下拉加载的功能 基于vue2.0并参考网上的一些实例完善了一个vue的组件来实现上拉刷新,下拉下载的功能。 下拉刷新 下拉加载更多 暂无数据 以下为代码 scroll.
1085 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
5676 0
.Net 以报表的形式加载SAP里面的数据
最近真是累,杂七杂八的事情一大堆,还好明天就放假了,终于可以好好的放松一下了,祝大家国庆中秋愉快! 感觉园子里面搞SAP的貌似不多,很少看到有新的SAP方面的文章出现... 这帮文章写的是在VS里面设计水晶报表,以报表的形式加载SAP里面的数据,涉及到以下几点知识: 1.通过“数据库专家”给水晶报表设置数据源以及各个字段。
710 0
Unity3d游戏开发之使用AssetBundle和Xml实现场景的动态加载
在Unity3D游戏开发过程中,因为受到游戏容量、平台性能和热更新等诸多因素的限制,我们可能无法将所有的游戏场景打包到项目中然后相对”静态”地加载,那么这个时候就需要我们使用动态加载的方式来将游戏场景加载到场景中。
971 0
92
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载