<!--lists.wxml-->
<view class="warp">

<!--文章列表模板 begin-->
<template name="itmes">
  <navigator url="../../pages/detail/detail?id={{id}}" hover-class="navigator-hover">   //跳转到指定id的页面
    <view class="imgs"><image src="{{img}}" class="in-img" background-size="cover" model="scaleToFill"></image></view>
    <view class="infos">
      <view class="title">{{title}}</view>
      <view class="date">{{cTime}}</view>
    </view>
  </navigator>
</template>
<!--文章列表模板 end-->

<!--循环输出列表 begin-->
<view wx:for="{{newsList}}" class="list">
  <template is="itmes" data="{{...item}}" />
</view>
<!--循环输出列表 end-->
<loading hidden="{{loadHidden}}" bindchange="loadChange">
    数据加载中...
</loading>
<!--bindtap 点击事件-->
<view bindtap="loadMore" data-lastid="{{lastid}}" data-isfrist="{{isfrist}}" class="loadMore" style="display:{{moreHidden}}">加载更多</view>
<toast hidden="{{toastHidden}}" bindchange="toastChange" duration="3000">{{msg}}</toast>
<modal title="温馨提示" no-cancel hidden="{{confirmHidden}}" confirm-text="明确" bindconfirm="modalChange">你当前不在在WIFI网格下下，会产生流量费用</modal>
</view>

// lists.wxss
.warp{
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20rpx;
}
navigator { overflow: hidden;}

.list {margin-bottom: 20rpx;height: 200rpx;position: relative;}
.imgs {float: left;}
.imgs image {display: block; width: 200rpx;height: 200rpx;}

.infos {float: left; width: 480rpx; height: 200rpx;padding: 20rpx 0 0 20rpx;}
.title {font-size: 20px;}
.date {font-size: 16px;color: #aaa; position: absolute;bottom: 0;}

.loadMore {text-align: center;margin: 30px;color: #aaa;font-size: 16px}

//lists.js
//获取应用实例
var app = getApp()
Page({
  data: {
    newsList: [],
    lastid:0,
    toastHidden:true,
    confirmHidden:true,
    isfrist:1,
    loadHidden:true,
    moreHidden:\'none\',
    msg:\'没有更多文章了\'
  },
  loadData: function (lastid){     //点击事件函数
    //显示出加载中的提示
    this.setData({loadHidden:false})

      var limit = 5
      var that = this

      wx.request({
          url: \'http://localhost/weicms/index.php?s=/addon/Cms/Cms/getList\',
          data: {lastid:lastid,limit:limit},
          header: {
              \'Content-Type\': \'application/json\'
          },
          success: function(res) {
               if(!res.data){
                    that.setData({ toastHidden:false }) 
                    that.setData({ moreHidden:\'none\' })
                    return false                
               }
                var len = res.data.length
                var oldLastid = lastid
                that.setData({ lastid: res.data[len-1].id})

                var dataArr = that.data.newsList
                var newData = dataArr.concat(res.data);

                if(oldLastid==0){
                     wx.setStorageSync(\'CmsList\', newData)
                }
                that.setData({ newsList:newData })     //列表循环的数组
                that.setData({ moreHidden:\'\' })
                console.log(\'data from url\');
          },
          fail: function(res){
                 if(lastid==0){
                     var newData = wx.getStorageSync(\'CmsList\')
                     if(!newData){
                        that.setData({ newsList:newData })
                        that.setData({ moreHidden:\'\' })

                          var len = newData.length
                          that.setData({ lastid: newData[len-1].id})
                     }
                     console.log(\'data from cache\');
                } else {
                    that.setData({ toastHidden:false, moreHidden:\'none\', msg:\'当前网格异常，请稍后再试\' }) 
                }          
          },
          complete: function(){
              //显示出加载中的提示
              that.setData({loadHidden:true})         
          }
      })
  },
  loadMore: function(event){
    var id = event.currentTarget.dataset.lastid
    var isfrist = event.currentTarget.dataset.isfrist
    var that = this

    wx.getNetworkType({
      success: function(res) {
        var networkType = res.networkType // 返回网络类型2g，3g，4g，wifi

        if(networkType!=\'wifi\' && isfrist==\'1\'){
           that.setData({confirmHidden:false})
        }
      }
    })

    this.setData({isfrist:0})
    this.loadData(id);
  },
  onLoad: function () {
    var that = this

    this.loadData(0);
  },

  toastChange: function(){
    this.setData({toastHidden:true})
  },
  modalChange: function(){
    console.log(\'abc\');
    this.setData({confirmHidden:true})
  }
})