<view>
<view class="top-tab flex-wrp flex-tab " >
  <view class="toptab flex-item {{currentNavtab==idx ? 'active' : ''}}" wx:for="{{navTab}}" wx:for-index="idx" wx:for-item="itemName" data-idx="{{idx}}" bindtap="switchTab">
    {{itemName}}
  </view>
</view>
<scroll-view class="swipers"> 
  <swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
      <swiper-item class="swiper_img">
        <image src="{{item}}" />
      </swiper-item>
    </block>
  </swiper>
   
</scroll-view>
<scroll-view  scroll-y="true" scroll-x="false">
  <block wx:for="{{article}}" wx:for-index="idx" wx:for-item="item" data-idx="{{idx}}">
        <view class="article-item">
            <a class="">
                <view>
                    <image class="imgs" src="{{item.art_img}}"></image>
                    <text class="title">{{item.title}}</text>
                    <text class="art_other">{{item.createtime}} 评论：{{item.comments}} {{item.type}}</text>
                    <text class="clear"></text>                    
                </view>
                
            </a>                
        </view>
    </block> 
</scroll-view>
</view>

/**导航**/
.flex-wrp{
  display: flex;
}
.flex-tab{
  flex-flow: row nowrap;
  justify-content: space-around;
  align-items: stretch;
}
.flex-item{
  flex-grow: 1;
  text-align: center;
}
.top-tab{
  width: 750rpx;
  height: 100rpx;
  background: #eee;
  color: #000;
  font-size: 28rpx;
  font-weight: bold;
  line-height: 100rpx;
  box-shadow: 0 2px 2px #bebebe;
  margin: 0 0 8rpx 0;
  position: fixed;
  top: 0;
  z-index: 9999;
}
.toptab.active{
  color: #298DE5;
  border-bottom: solid 2px #298DE5;
}

.swipers {
    height: 310rpx;
    margin:120rpx 0rpx 0rpx 0rpx;
}
.swiper_img{
    height: 280rpx;
    margin: 0rpx 50rpx;
}
.article-item{
    margin:80rpx 20rpx;
    clear: both;
}
.imgs{
    border: 0;
    width:150rpx;
    height: 150rpx;
    float: left;
}
.title {
    text-indent: 20rpx; 
    font-size: 40rpx;
    line-height: 30rpx;
    display: inline;
}
.art_other{    
    float: left;
}
.clear {
    clear: both;
}

//获取新闻
var util = require('../../utils/util.js')
var app = getApp()
Page({
  data: {
    navTab: ["最新", "亿人", "视频", "新闻","导购"],
    currentNavtab: "0",
    imgUrls: [
      '../../imgs/gift1.png',
      '../../imgs/gift2.png',
      '../../imgs/gift3.png'
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    article: [],
    article_length: 0
  },
  //事件处理函数
  bindItemTap: function() {
    wx.navigateTo({
      url: '../answer/answer'
    })
  },
  bindQueTap: function() {
    wx.navigateTo({
      url: '../question/question'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    this.refresh();
  },
  upper: function () {
    wx.showNavigationBarLoading()
    this.refresh();
    console.log("upper");
    setTimeout(function(){wx.hideNavigationBarLoading();wx.stopPullDownRefresh();}, 2000);
  },
  lower: function (e) {
    wx.showNavigationBarLoading();
    var that = this;
    setTimeout(function(){wx.hideNavigationBarLoading();that.nextLoad();}, 1000);
    console.log("lower")
  },
  switchTab: function(e){
    this.setData({
      currentNavtab: e.currentTarget.dataset.idx
    });
  },
  //scroll: function (e) {
  //  console.log("scroll")
  //},

  //网络请求数据, 实现首页刷新
  refresh0: function(){
    var index_api = '';
    util.getData(index_api)
        .then(function(data){
          //this.setData({
          //
          //});
          console.log(data);
        });
  },

  //使用本地 fake 数据实现刷新效果
  refresh: function(){
    var article = util.getData2();
    console.log("loaddata");
    var article_data = article.data;
    this.setData({
      article:article_data,
      article_length: article_data.length
    });
  },

  //使用本地 fake 数据实现继续加载效果
  nextLoad: function(){
    var next = util.getNext();
    console.log("continueload");
    var next_data = next.data;
    this.setData({
      article: this.data.article.concat(next_data),
      article_length: this.data.feed_length + next_data.length
    });
  }


})