微信小程序---仿今日头条
2017-01-24 22:50
561 查看
源码详见:
git源码
效果图:
效果图
//api读取数据数据
index.wxml的view中:
其中style=”height:100vh;” 不能用100%,后者没有refresh和loadMore的效果。
git源码
效果图:
效果图
weixinddemo
本demo主要调用了https://api.tianapi.com/social/的api接口,需要申请apikey,将其定义在app.js中,请求中的url格式为https://api.tianapi.com/social/?key=yourKey&num=10¤tPage=X
//api读取数据数据
loadDataFromServer: function(){ var that = this; that.changeLoadingStatus(false); app.req(URL,{ key:app.globalData.apikey, num:10, page:currentPage, },{ success:function(resp){ console.log(resp); console.log("成功加载页数" + currentPage); var tempData = resp.data.newslist; var toViewId = currentPage % 2 ==0? "top-id":"top-id2"; that.setData({ renderData: tempData, toView: toViewId, }); that.changeLoadingStatus(true); } }); }, 每次上拉调用refresh函数:当前页面减一,下拉调用loadMore函数:当前页面加一,定义在index.js中: refresh: function(e){ currentPage = currentPage>1? --currentPage:1; this.loadDataFromServer(); }, loadMore: function(e){ ++currentPage; this.loadDataFromServer(); }, 除此之外,需要注意的还有flash页面跳转到首页时的setTimeout函数:因为跳转到tabBar的页面中,所以不能用redirectTo和navigateTo,只能用swithTab: var timestamp = new Date().getTime(); setTimeout(function(){ wx.switchTab({ url: '../index/index' }); },duration*2.5);
index.wxml的view中:
<scroll-view scroll-y="true" style="height:100vh;" scroll-into-view="{{toView}}" upper-threshold="5" lower-threshold="5" bindscrolltoupper="refresh" bindscrolltolower="loadMore">
其中style=”height:100vh;” 不能用100%,后者没有refresh和loadMore的效果。
相关文章推荐
- 小程序的F4:微信、百度、支付宝和今日头条的流星花园
- 微信小程序_今日头条
- 微信小程序仿今日头条小程序端界面和代码演示
- 如何在微信小程序中实现今日头条App那样的Topbar
- 今日头条、微信写出阅读量十万+的文章核心技巧解密!
- 微信小程序< 2 > ~ 微信小程序之头条新闻
- 知乎遭下架;传微信屏蔽今日头条;南非发生大规模比特币诈骗丨价值早报
- 自媒体时代 今日头条能超越百度与微信吗?
- 今日头条新公布:禁止内容含微信、微博等账户的推广
- 正面开战:今日头条将封禁微信、微博等账户推广
- 微信小程序< 2 > ~ 微信小程序之头条新闻
- 今日小程序推荐:汇率即时查-打通微信直接搜一搜
- 今日头条lite:你关心的才是头条【极乐小程序商店出品】
- iOS仿今日头条频道选择、仿微信项目、音频控件、多种动画效果等源码
- 极信头条--微信小程序
- 吃货福利get-今日美食food微信小程序
- 微信、今日头条限制公众号注册数量
- 行业趋势:今日的微信小程序能否颠覆APP?
- 今日头条将发布小程序“灵犬” 向全社会招募测试员
- 使用老张阅读器的api迅速开发今日头条lite的小程序