本文记载了如何在微信小程序里面实现下拉刷新,上拉加载更多
先开看一下界面
大致如此的界面吧。 这个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 <p></p><p><strong><span style="color: #ff0000;">index.wxml</span></strong></p><p> </p><p class="cnblogs_code"></p><pre class="brush:php;toolbar:false"><view> <scroll-view> <view> <image></image> <view> <text>{{item.name}}</text> <text>{{item.short_description}}</text> </view> </view> </scroll-view> <view> <loading> 加载中... </loading> </view></view>
更多微信小程序开发之 下拉刷新,上拉加载更多 相关文章请关注PHP中文网!
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号