小程序之路

2<!--index.wxml-->
<view class="container">
  <swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" class="banners" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{banner}}">
      <swiper-item class="banner" >
          <image src="{{item.image}}"  data-id="{{item.id}}" bindtap="bindViewTap" class="banner-image" width="100%" height="100%"/>
          <text class="banner-title">{{item.title}}</text>
      </swiper-item>
    </block>
  </swiper>
  <view class="news-item-container">
    <block wx:for="{{list}}" wx:for-index="id">
      <text wx:if="{{item.header}}" class="sub-title">{{item.header}}</text>
      <navigator wx:else url="../detail/detail?id={{item.id}}">
        <view class="news-item" >
          <view class="news-item-left">
            <text class="news-item-title">{{item.title}}</text>
          </view>
          <view class="news-item-right">
            <image src="{{item.images[0]}}" class="news-image"/>
          </view>
        </view>
      </navigator>
    </block>
    <button type="primary" class="load-btn"  loading="{{loading}}" plain="{{plain}}" bindtap="loadMore"> 更多 </button>
  </view>
  
</view>

//index.js
//获取应用实例
var app = getApp()
var utils = require(‘../../utils/util.js‘)
Page({
  data: {
    list: [],
    duration: 2000,
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    loading: false,
    plain: false
  },
  //事件处理函数
  bindViewTap(e) {
    wx.navigateTo({
      url: ‘../detail/detail?id=‘ + e.target.dataset.id
    })
  },
  loadMore (e) {
    if (this.data.list.length === 0) return
    var date = this.getNextDate()
    var that = this
    that.setData({ loading: true })
    wx.request({
      url: ‘http://news.at.zhihu.com/api/4/news/before/‘ + (Number(utils.formatDate(date)) + 1),
      headers: {
        ‘Content-Type‘: ‘application/json‘
      },
      success (res) {
         that.setData({
           loading: false,
           list: that.data.list.concat([{ header: utils.formatDate(date, ‘-‘) }]).concat(res.data.stories)
         })
      }
    })
  },
  getNextDate (){
    const now = new Date()
    now.setDate(now.getDate() - this.index++)
    return now
  },
  onLoad () {
    let that = this
    wx.request({
      url: ‘http://news-at.zhihu.com/api/4/news/latest‘,
      headers: {
        ‘Content-Type‘: ‘application/json‘
      },
      success (res) {
         that.setData({
           banner: res.data.top_stories,
           list: [{ header: ‘今日热闻‘ }].concat(res.data.stories)
         })
      }
    })
    this.index = 1
  }
})