当前位置: 首页 > 网络学院 >

微信小程序新手教程之怎么实现下拉刷新

新客网 XKER.COM 时间:2017-01-11 18:24:43来源:下载吧  评论:

微信小程序新手教程之怎么实现下拉刷新,本篇默认已经成功安装微信小程序工具,来和小编一起看看吧

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

先看一下界面

微信小程序新手教程之怎么实现下拉刷新_新客网

微信小程序新手教程之怎么实现下拉刷新_新客网

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

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

2. scroll-view的两个事件

   2.1 bindscrolltolower(滑到页面底部时)

   2.2 bindscroll (页面滑动时)

   2.3 bindscrolltoupper (滑倒页面顶部时)

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

index.js

#FormatImgID_2#

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>

下面小编就给大家介绍一种一个小程序吧

嗨图功能

微信小程序新手教程之怎么实现下拉刷新_新客网

1、专题——DIY图片的模板,点击可以生成使用,分享到朋友圈。

2、分享墙——用户上传的自己DIY作品。

3、立即制作——可以用自己的图来DIY。

4、告诉我——告诉产品的改进,内容的增加。

想要体验怎么制作属于自己个性朋友圈照片的用户,扫一扫下面的二维码就可以啦!还等什么,赶紧扫码体验,开启你的嗨图之旅吧!

微信小程序新手教程之怎么实现下拉刷新_新客网


如果本文对您有帮助请分享给您的好友,也可按Ctrl+D收藏本页面,谢谢!感谢本文来源方:下载吧

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)