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

原创 2017年01月24日 22:50:30

源码详见:
git源码

效果图:
效果图

weixinddemo

本demo主要调用了https://api.tianapi.com/social/的api接口,需要申请apikey,将其定义在app.js中,请求中的url格式为https://api.tianapi.com/social/?key=yourKey&num=10&currentPage=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的效果。

版权声明:本文为博主原创文章,未经博主允许不得转载。

灯灯小程序开发手记:仿今日头条(上)

写在前面 新的一年,祝大家新年快乐!当然对于程序员来说,新的一年,也要有新的改变。因此灯灯决定凑热闹编写微信小程序啦! 上一篇文章《记一次小程序开发过程》中,灯灯大致写了下自己第一次开发小程序的感...
  • u013411976
  • u013411976
  • 2017年01月03日 14:09
  • 1828

模仿今日头条的微信小程序源码

  • 2017年02月08日 22:47
  • 3.36MB
  • 下载

模仿今日头条(微信小程序源代码)

  • 2016年11月14日 12:12
  • 4.17MB
  • 下载

目前为止最全的微信小程序项目实例

wx-gesture-lock  微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小...
  • zuoliangzhu
  • zuoliangzhu
  • 2016年12月24日 21:10
  • 134108

微信小程序_模仿今日头条源代码

  • 2016年10月31日 11:47
  • 4.17MB
  • 下载

(小程序)仿今日头条源码

  • 2017年10月30日 17:29
  • 1.82MB
  • 下载

如何在微信小程序中实现今日头条App那样的Topbar

今日头条App的Topbar是一个典型的频道管理和切换组件,自己前段时间研究了一番,在微信小程序上也实现了类似的效果。 http://biebu.xin/2017/03/07/%E5%A6%82%E...
  • sinat_17775997
  • sinat_17775997
  • 2017年03月12日 18:14
  • 391

精仿今日头条

转载请注明出处:/Chay_Chan/article/details/75319452 由来篇 当初的梦想   一直都想尝试开发自己还没接触过...
  • sinat_28238111
  • sinat_28238111
  • 2017年08月01日 17:17
  • 670

灯灯小程序开发手记:仿今日头条(上)

写在前面 新的一年,祝大家新年快乐!当然对于程序员来说,新的一年,也要有新的改变。因此灯灯决定凑热闹编写微信小程序啦! 上一篇文章《记一次小程序开发过程》中,灯灯大致写了下自己第一次开发小程序的感...
  • u013411976
  • u013411976
  • 2017年01月03日 14:09
  • 1828

高仿今日头条(1)

本片博客主要实现今日头条的主题框架。 先上两张图 直接贴代码: @InjectView(钱柜娱乐开户.R.id.tabcontent) FrameLayout tabcontent...
  • xiangzhihong8
  • xiangzhihong8
  • 2016年04月27日 17:39
  • 3019
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:微信小程序---仿今日头条
举报原因:
原因补充:

(最多只允许输入30个字)