首页 网络编程 前端制作 数据库 CMS教程 脚本编程 微信开发 小程序开发 服务器

小程序开发

热门: ASP.NET PHP编程 ASP编程 JSP编程

微信小程序开发之 下拉刷新,上拉加载更多

来源:未知 发布时间:2017-06-17

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

先开看一下界面

 

 大致如此的界面吧。 这个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>

网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 微信开发 | 小程序开发 | 服务器 |

程序员学习网,提供最新的微信开发教程,小程序开发教程,网络编程、php教程、asp.net教程、微信公众平台二次开发教程、脚本编程、网页制作、网页设计、网页特效,为站长与网络编程从业者提供学习资料,凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2018 程序员学习网 版权所有,并保留所有权利。

电脑版 | 移动版