利用动易SF制作资讯类小程序(2)

小程序部分，先看一下文章列表页效果图：

文章列表页

可以上拉加载更多

wxml代码：

<view class="page">
<swiper vertical='{{false}}' indicator-dots='ture' autoplay='true' interval='2000'>
    <swiper-item>
      <image src='/images/ban1.jpg'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/ban2.jpg'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/ban3.jpg'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/ban4.jpg'></image>
    </swiper-item>    
</swiper>
<view class="page__bd">
<view class="weui-panel__bd">
<block wx:for="{{articlelist}}" wx:key="key" wx:for-index="id">
<navigator url="../2newsdetail/2newsdetail?id={{item.id}}" open-type="navigate">
<view class="weui-media-box weui-media-box_appmsg">
    <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
      <image class="weui-media-box__thumb" src="{{item.defaultpic}}" style="width: 60px; height: 60px;"/>
    </view>  
    <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
          <view class="weui-media-box__title">{{item.title}}</view>
          <view class="weui-media-box__desc">{{item.date}}</view>
    </view>
</view> 
</navigator>
</block> 

<view wx:if='{{!isRefreshing}}' class="weui-loadmore">
  <view wx:if='{{isLoadingMoreData}}'>
    <view class="weui-loading"></view>
    <view class="weui-loadmore-tips">正在加载更多...</view>
  </view>
  <view wx:elif='{{hasMoreData}}'>
    <view class="weui-loadmore-tips line" bindtap='onReachBottom'>上拉加载更多报告</view>
  </view>
  <view wx:else>
    <view class="weui-loadmore-tips line">已经加载全部报告</view>
  </view>
</view>

</view>
</view>
<view class="weui-footer">
<view class="weui-footer__text">{{copyright}}</view>
</view>
</view>

js代码：

const app = getApp()
Page({
  data: {
    duration: 2000,
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    loading: false,
    plain: false,
    page:1,
    pages:1,
    hasMoreData: true,
    isRefreshing: false,
    isLoadingMoreData: false,
    copyright: app.globalData.copyright
  },
  onLoad: function () {
    var that = this//不要漏了这句，很重要
    wx.request({
      url: 'https://www.xxx.com/Category_4/Index.aspx',
      headers: {
        'Content-Type': 'application/json'
      },
      success: function (res) {
        //将获取到的json数据，存在名字叫zhihu的这个数组中
        console.log(res.data.pages)
        that.setData({
          articlelist: res.data.articles,
          pages:res.data.pages
        })
        //console.log(that.data.zhihu)
      }
    })
  },
  onReachBottom: function () {
    var that = this
    //if (this.data.isRefreshing || this.data.isLoadingMoreData || !this.data.hasMoreData) {
     // return
    //}
    if (that.data.page < that.data.pages) { 
    that.setData({
      isLoadingMoreData: true
    })
    var page = that.data.page + 1;
    wx.request({
      url: 'https://www.xxx.com/Category.aspx?id=4&page='+page,
      headers: {
        'Content-Type': 'application/json'
      },
      success: function (res) {
        // 回调函数
        var artlist = that.data.articlelist;
        for (var i = 0; i < res.data.articles.length; i++) {
          artlist.push(res.data.articles[i]);
        }
        // 设置数据
        that.setData({
          articlelist: artlist,
          page:page
        })
    }
    })
  }
  else{
      that.setData({
        isRefreshing:false,
        isLoadingMoreData:false,        
        hasMoreData: false
      })
  }
  }
})

wxss代码：

swiper{
  height: 400rpx;
}
image{
  width: 100%;
  height: 400rpx;
}

.weui-loadmore {
  width: 100%;
  height: 100rpx;
  font-size: 30rpx;
  text-align: center;
  margin-top: 30rpx;
}

.weui-loading {
  width: 50rpx;
  height: 50rpx;
  display: inline-block;
  vertical-align: middle;
  -webkit-animation: weuiLoading 1s steps(12, end) infinite;
  animation: weuiLoading 1s steps(12, end) infinite;
  background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
  background-size: 100%;
}

.weui-loadmore-tips {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
}
.line:before,.line:after{content: "";width: 80px;border-top: 1px #ccc solid; display: inline-block;
vertical-align: middle;}
.line:before{margin-right: 10px;}
.line:after{margin-left: 10px;}