微信小程序---仿今日头条

小灰灰 2022-07-11 12:15 468阅读 0赞

源码详见:
git源码

效果图:
效果图

weixinddemo

  1. demo主要调用了https://api.tianapi.com/social/的api接口,需要申请apikey,将其定义在app.js中,请求中的url格式为https://api.tianapi.com/social/?key=yourKey&num=10&currentPage=X

//api读取数据数据

  1. loadDataFromServer: function(){
  2. var that = this;
  3. that.changeLoadingStatus(false);
  4. app.req(URL,{
  5. key:app.globalData.apikey,
  6. num:10,
  7. page:currentPage,
  8. },{
  9. success:function(resp){
  10. console.log(resp);
  11. console.log("成功加载页数" + currentPage);
  12. var tempData = resp.data.newslist;
  13. var toViewId = currentPage % 2 ==0? "top-id":"top-id2";
  14. that.setData({
  15. renderData: tempData,
  16. toView: toViewId,
  17. });
  18. that.changeLoadingStatus(true);
  19. }
  20. });
  21. },
  22. 每次上拉调用refresh函数:当前页面减一,下拉调用loadMore函数:当前页面加一,定义在index.js中:
  23. refresh: function(e){
  24. currentPage = currentPage>1? --currentPage:1;
  25. this.loadDataFromServer();
  26. },
  27. loadMore: function(e){
  28. ++currentPage;
  29. this.loadDataFromServer();
  30. },
  31. 除此之外,需要注意的还有flash页面跳转到首页时的setTimeout函数:因为跳转到tabBar的页面中,所以不能用redirectTonavigateTo,只能用swithTab
  32. var timestamp = new Date().getTime();
  33. setTimeout(function(){
  34. wx.switchTab({
  35. url: '../index/index'
  36. });
  37. },duration*2.5);

index.wxml的view中:

  1. <scroll-view scroll-y="true" style="height:100vh;" scroll-into-view="{
  2. {toView}}" upper-threshold="5"
  3. lower-threshold="5" bindscrolltoupper="refresh" bindscrolltolower="loadMore">

其中style=“height:100vh;” 不能用100%,后者没有refresh和loadMore的效果。

发表评论

表情:
评论列表 (有 0 条评论,468人围观)

还没有评论,来说两句吧...

相关阅读