<view class="themes_container">
    <swiper indicator-dots="true" autoplay="true" interval="3000" duration="500">
        <block wx:for="{{tops}}" >
            <swiper-item>
            <image src="{{item.image}}" class="slide-image" bindtap="onTopClick" data-id="{{item.id}}" data-title="{{item.title}}"/>
            </swiper-item>
        </block>
    </swiper>
    <view class="list_item" wx:for="{{stories}}"  wx:for-index="idx" bindtap="onItemClick" data-idx="{{idx}}">
        <view class="list_top">
            <text class="list_item_text">{{item.title}}</text>
            <image class="list_item_icon" src="{{item.images[0]}}" wx-if="{{item.images.length>0}}"></image>
        </view>
        <!--<view class="line"></view>        -->
    </view>
</view>

.themes_container {
    display: flex;
    flex:1;
    width: 100%;
    flex-direction: column;
}
.slide-image {
    width: 100%;
    height: 350rpx;
}

.list {
    flex:1;
}
.list_item {
    display: flex; 
    flex:1;
    flex-direction: column;
}

.list_top {
    flex:1;
    display: flex;
    margin: 10rpx;
    padding: 10rpx;
    /*background: red;    */
    /*border-width:20rpx;
    border-color: blue;
    border-radius: 20rpx;*/

    border: 1rpx solid #eee;
    border-bottom: 1rpxpx solid #ccc;
    border-radius: 5rpx;
}

.list_item_text {
    flex: 1;
    display: flex;
    font-size: 40rpx;
}

.list_item_icon {
    width: 200rpx;
    height:200rpx;
}

.line {
    flex:1;
    display: flex;
    height:2rpx;
    background-color:black;
}

// hotnews.js
Page({
  data: {
    stories:[],
    tops:[]
  },
  onLoad: function () {
      console.log('hotnews.onLoad');

      var that = this;
      // 加载数据
      wx.request({
        url: 'http://news-at.zhihu.com/api/4/news/latest',
        header:{"Content-Type":"application/json","Cache-Control":"no-cache"},
        success: function(res) {
            var stories = res.data.stories;
            var tops = res.data.top_stories;
            console.log('data = '+JSON.stringify(res.data));
            that.setData({
              stories:stories,
              tops:tops
            });
        },
        fail:function(error) {
            console.log(error)
        }
    });
  },
  onItemClick:function(event){
    var idx = event.currentTarget.dataset.idx;
    var item = this.data.stories[idx];
    console.log('item = '+JSON.stringify(item))
    var url =  '../detail/detail?id='+item.id+'&title='+item.title;
    // url = 'http://daily.zhihu.com/story/'+item.id;
    console.log('url = '+url);
     wx.navigateTo({url:url});
  },
  onTopClick:function(event){
    var id = event.currentTarget.dataset.id;
    var title = event.currentTarget.dataset.title;
    console.log('id = '+id)
    var url =  '../detail/detail?id='+id+'&title='+title;
    console.log('url = '+url);
     wx.navigateTo({url:url});
  }
})