仿头条小程序

计算content的高度
wx.getSystemInfoSync().windowHeight - (导航高度/2)
this.setData({height:height})

三目运算符判断导航是否显示激活样式
class="{{item.id == activeChannel ? 'active' : ''}}"

导航使用数组对象方式遍历出来
channels:[
      { name: '推荐', id: 'tuijian', data: [] },
      { name: '热点', id: 'redian', data: [] },
      { name: '本地', id: 'bendi', data: [] },
      { name: '社会', id: 'shehui', data: [] },
      { name: '娱乐', id: 'yule', data: [] },
      { name: '军事', id: 'junshi', data: [] },
      { name: '科技', id: 'keji', data: [] },
      { name: '汽车', id: 'qiche', data: [] }
    ],
activeChannel:'tuijian'
{{item.name}}

内容列表使用两个遍历做出来（可以看出wx:for就是个遍历）


  
    
      
        
          
            
          
          
            央视快评 796评论
          
        
      
    
  



请求接口数据
wx.request 文案中有示例，放在onload中

php获取api接口数据的方法

请求接口报错request...
设置-项目设置-不校验合法域名
到后台配置request合法域名（https）

在另一个对象里面，要接收this指向
var that = this

导航点击切换
在遍历时，把每个导航项id在标签上以data-id名字存起来
clickChangeChannel: function (e) {
    var id = e.currentTarget.dataset.id;
    this.setData({ 'activeChannel': id })
},

点击跑到最左效果，还有跑最左带动画
文档 scroll-into-view  scroll-with-animation

点击导航后，内容区的滑动
swiper上的current-item-id和swiper-item上的item-id

点击导航后，显示内容区的内容
先给导航每个项加index，以data-index='{{index}}'来加（才能传到当前事件中去 e.curr...）
判断当前data中有没有数据，没有就去请求。 this.data.channels[index].data.length == 0
写法：var key = 'channels['+index+'].data';
[key]

滑动swiper，实现导航改变和内容改变
利用bindchange
swiper-item 设置data-index后，在e.e.curr...中获取不到，我们用e.detail.current代替
//滑动切换频道
  swiperChangeChannel:function(e){
    //获取当前元素的itemId
    var id = e.detail.currentItemId;
    //设置导航对应
    this.setData({'activeChannel':id});
    //获取当前元素的下标
    var index = e.detail.current;
    //接收this指向
    var that = this;
    if (this.data.channels[index].data.length == 0) {
      //无数据则去请求接口
      wx.request({
        url: 'https://c.m.163.com/nc/article/headline/data/10-20.html?from=toutiao&passport=&devId=OPdeGFsVSojY0ILFe6009pLR%2FMsg7TLJv5TjaQQ6Hpjxd%2BaWU4dx4OOCg2vE3noj&size=20&version=5.5.3&spever=false&net=wifi&lat=&lon=&ts=1456985878&sign=oDwq9mBweKUtUuiS%2FPvB015PyTDKHSxuyuVq2076XQB48ErR02zJ6%2FKXOnxX046I&encryption=1&canal=appstore',
        success(res) {
          console.log(res.data);
          var key = 'channels[' + index + '].data';
          that.setData({ [key]: res.data.data })
        }
      })
    }

点击跳转到内容详情页
navigater
网易新闻内容接口    

替换内容区中的图片注释

将html转换成小程序能识别的内容
wxParse

url传参
获取url参数options.id

滑动到底部加载新数据
事件+合并数据

this.data 表示当前页面对象中的data
e 表示事件中的一些玩意

删除数组中的元素用splice（和原生splice不同，这里只有删除功能）
this.data.channels.splice(index, 1);
this.setData({ channels: this.data.channels});

往数组中添加元素用push
this.data.otherChannels.push(removeItem);

bug
原因是删除频道数组后会触发swiper的bindchange。未解决。
把整个的swiper视图放到js中重新构建可能可以，懒得做了。