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

标签: 微信
48758人阅读 评论(13) 收藏 举报
分类:

微信小程序可谓是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);
 })
},
})

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

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

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

查看评论

微信小程序实战篇-下拉刷新与加载更多

哈喽,大家好,看这标题是不是有点奇怪,你们期盼的微信小程序实战篇-电商(三)没出现,我是这么想的,因为电商里面的内容有很多,如何我只是以一二三那样命名的话,不方便你们查看每篇文章讲解的内容,所以我就换...
  • u012927188
  • u012927188
  • 2017-06-17 10:59:19
  • 30884

微信小程序----列表下拉刷新上拉加载(MUI下拉刷新和上拉加载更多)

DEMO下载 效果图 原理 利用微信小程序的onPullDownRefresh函数(下拉刷新监听函数)和onReachBottom函数(上拉加载监听函数)监听页面的下拉和上拉动态,...
  • m0_38082783
  • m0_38082783
  • 2018-01-04 11:21:25
  • 2236

微信小程序入门五上滑加载下拉刷新

之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的。这章介绍加载和刷新。 效果图: 先介绍在IDE中,怎么模拟上滑这个操作。开始我是用鼠标点击文章列表,然后先上移动。结果一直没有结果,以...
  • qq_19558705
  • qq_19558705
  • 2017-03-11 11:36:03
  • 17763

微信小程序下拉刷新/上拉加载更多

查看文档,在用page()函数注册页面的时候有这样的两个对象参数用户判断用户在最顶部下拉和到达最底部, 在小程序里,用户顶部下拉是默认禁止的,我们需要把他设置为启用,在app.json中的设置对所...
  • Ruffaim
  • Ruffaim
  • 2017-12-19 09:37:50
  • 5894

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

一: 下拉刷新 下拉刷新两个步骤就能实现。 1.在要实现下拉刷新的页面的json配置文件里面加上 "enablePullDownRefresh": true, //开启下拉刷新 ...
  • qq_35713752
  • qq_35713752
  • 2018-01-09 19:02:47
  • 641

微信小程序上拉加载,下拉刷新实现方法

微信小程序下拉刷新上拉加载的两种实现方法方法1利用”onPullDownRefresh”和”onReachBottom”方法实现小程序下拉刷新上拉加载设置window中属性enablePullDown...
  • bjnihao
  • bjnihao
  • 2016-12-15 15:42:12
  • 16612

小程序的下拉刷新与上划加载

1.获取页面的值 手机端页面使用如下代码:   姓名:{{item.name}} 作物:{{item.crop}} 类型:{{item.operation_type}} ...
  • yongshuai185
  • yongshuai185
  • 2017-01-24 10:00:23
  • 2156

小程序上拉加载和下拉刷新问题总结

先说下遇到的问题 1、怎么触发下拉刷新上拉加载及设定触发上拉加载的距离 2、怎么在wx.startPullDownRefresh()中执行方法 3、没有刷新动画 4、ios真机下拉刷新反弹距离...
  • weichen913
  • weichen913
  • 2018-02-24 13:28:09
  • 403

微信小程序仿闲鱼『下拉菜单』

https://gold.xitu.io/user/58277c482f301e00584f3ecf下拉菜单我们非常常见了,但是要在微信小程序中实现并不容易,今天带来的是仿闲鱼下拉菜单,相信对您有一定...
  • sinat_17775997
  • sinat_17775997
  • 2016-12-13 11:52:43
  • 13217

关于微信小程序下拉刷新,真机测试不弹回的处理办法

onPullDownRefresh: function() { this.myRecordingA(1,answerUrl); wx.stopPullDownRefr...
  • weixin_39872588
  • weixin_39872588
  • 2018-03-16 15:47:10
  • 304
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 53万+
    积分: 4840
    排名: 7392
    博客专栏
    最新评论