本文记载了如何在微信小程序里面实现下拉刷新,上拉加载更多

先开看一下界面

 

 大致如此的界面吧。 这个Demo使用了微信的几个Api和事件,我先列出来。

1.wx.request (获取远程服务器的数据,可以理解成$.ajax)

2. scroll-view的两个事件

   2.1 bindscrolltolower(滑到页面底部时)

   2.2 bindscroll (页面滑动时)

   2.3 bindscrolltoupper (滑倒页面顶部时)

然后我们看代码,详细描述。

index.js

var url = "http://www.imooc.com/course/ajaxlist";
var page =0;
var page_size = 20;
var sort = "last";
var is_easy = 0;
var lange_id = 0;
var pos_id = 0;
var unlearn = 0;


// 获取数据的方法,具体怎么获取列表数据大家自行发挥
var GetList = function(that){
    that.setData({
        hidden:false
    });
    wx.request({
        url:url,
        data:{
            page : page,
            page_size : page_size,
            sort : sort,
            is_easy : is_easy,
            lange_id : lange_id,
            pos_id : pos_id,
            unlearn : unlearn
        },
        success:function(res){
            //console.info(that.data.list);
            var list = that.data.list;
            for(var i = 0; i < res.data.list.length; i++){
                list.push(res.data.list[i]);
            }
            that.setData({
                list : list
            });
            page ++;
            that.setData({
                hidden:true
            });
        }
    });
}
Page({
  data:{
    hidden:true,
    list:[],
    scrollTop : 0,
    scrollHeight:0
  },
  onLoad:function(){
    //   这里要非常注意,微信的scroll-view必须要设置高度才能监听滚动事件,所以,需要在页面的onLoad事件中给scroll-view的高度赋值
      var that = this;
      wx.getSystemInfo({
          success:function(res){
              console.info(res.windowHeight);
              that.setData({
                  scrollHeight:res.windowHeight
              });
          }
      });
  },
  onShow:function(){
    //   在页面展示之后先获取一次数据
    var that = this;
    GetList(that);
  },
  bindDownLoad:function(){
    //   该方法绑定了页面滑动到底部的事件
      var that = this;
      GetList(that);
  },
  scroll:function(event){
    //   该方法绑定了页面滚动时的事件,我这里记录了当前的position.y的值,为了请求数据之后把页面定位到这里来。
     this.setData({
         scrollTop : event.detail.scrollTop
     });
  },
  refresh:function(event){
    //   该方法绑定了页面滑动到顶部的事件,然后做上拉刷新
      page = 0;
      this.setData({
          list : [],
          scrollTop : 0
      });
      GetList(this)
  }
})

index.wxml

 

<view class="container">
    <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" 
        class="list" bindscrolltolower="bindDownLoad" bindscroll="scroll" bindscrolltoupper="refresh">
        <view class="item" wx:for="{{list}}">
            <image class="img" src="{{item.pic_url}}"></image>
            <view class="text">
                <text class="title">{{item.name}}</text>
                <text class="description">{{item.short_description}}</text>
            </view>
        </view>
    </scroll-view>
    <view class="body-view">
        <loading hidden="{{hidden}}" bindchange="loadingChange">
            加载中...
        </loading>
    </view>
</view>

 

源码奉上 http://pan.baidu.com/s/1gfLpuKj

 

posted @ 2016-10-28 11:02 梦断难寻 阅读(34052) 评论(8) 推荐(2) 编辑
摘要: 这一篇就废话少一点,直接上代码吧,三个接口都是微信提供的。 index.js index.wxml 最后效果图 好了。文本介绍了三个接口的使用方式,具体怎么发挥,大家自行判断吧。 源码奉上 http://pan.baidu.com/s/1gfLpuKj 阅读全文
posted @ 2016-10-27 17:29 梦断难寻 阅读(4604) 评论(2) 推荐(0) 编辑
摘要: 微信小程序创建之后会生成一个项目模板,如下图所示(基本如此,但并不局限于此) 现在分别来说明一下每个文件及目录的意思 app.js 程序的入口文件,必须存在。 app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API,如本例的同步 阅读全文
posted @ 2016-10-27 17:18 梦断难寻 阅读(6499) 评论(0) 推荐(0) 编辑
摘要: 个人的每一篇博文都谈不上有什么技术含量,只是为了帮助不熟悉微信小程序开发的自己及他人提供一下思路。谢谢,下面开始! PS: 因为本人没有小程序的内测资格,所以所有的开发及Demo都是无AppId的,如果哪位同学可以分享AppId,那感激不尽! 第一步 (下载开发工具) https://mp.weix 阅读全文
posted @ 2016-10-27 17:03 梦断难寻 阅读(72300) 评论(4) 推荐(0) 编辑
摘要: 阅读全文
posted @ 2013-12-02 21:16 梦断难寻 阅读(601) 评论(0) 推荐(0) 编辑
摘要: 程序运行效果 ... 阅读全文
posted @ 2013-11-27 23:22 梦断难寻 阅读(1673) 评论(0) 推荐(0) 编辑
摘要: 使用partial关键字可以声明部分类, 部分类的作用是可以在多个文件中声明同一个类, 主要用于类比较大的时候进行拆分,或者xaml中使用也比较多。在下面创建了3个.cs文件,分别是 Name.cs Age.cs Sex.cs三个文件中都是在声明同一个类 MyClass 。 看代码。Name.csusing System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks;namespace ConsoleApplication1{ partial.. 阅读全文
posted @ 2012-10-29 22:58 梦断难寻 阅读(9073) 评论(3) 推荐(2) 编辑
摘要: using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks;namespace ConsoleApplication1{ //对象初始化器简介: 1. 对象初始化器可以在对象声明的时候为其里面的字段或者属性赋值。 但是,需要赋值的字段或者属性必须是public 或 internal修饰符修饰的。 //下面对对象初始化器的演示 //此处声明一个类 class MyClass { publi... 阅读全文
posted @ 2012-10-29 22:31 梦断难寻 阅读(684) 评论(0) 推荐(0) 编辑
摘要: ExtensionProcedure.csusing System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks;//扩展方法的声明方式 : 修饰符 static 返回类型 方法名 (this 需要添加方法的类 参数名 , 参数列表)如下: public static void Extension (this String s , string value)namespace ConsoleApplica... 阅读全文
posted @ 2012-10-29 22:04 梦断难寻 阅读(399) 评论(0) 推荐(0) 编辑
摘要: StrucrTest.csusing System;using System.Collections.Generic;using System.Linq;using System.Text;namespace ConsoleApplication11{ struct MyStruct // struct定义结构体的关键字. { private string name; private int age; private bool marriage; public MyStruct(string n,int a , bool ... 阅读全文
posted @ 2012-10-25 23:23 梦断难寻 阅读(430) 评论(0) 推荐(0) 编辑
点击右上角即可分享
微信分享提示