<scroll-view
  class="container"
  scroll-y="true"
  bindscrolltolower="scrolltolower"
  lower-threshold="300"
  style="height:100%;">
  <view class="up-list">
      <view class="up-list-item" wx:for="{{articles}}" wx:for-item="article" wx:key="aid">
        <navigator url="../article/article?id={{article.aid}}">
           <view class="item-desc-container">
              <!-- <text>{{index}}</text> -->
              <image class="item-img" src="{{article.thumb_image_url}}"></image>
              <view class="info-view">
                <text class="title">{{article.title}}</text>
                <view class="target-word">
                  <block wx:for="{{article.rendered_keywords}}" wx:key="index">
                    <text wx:if="{{index === 0}}" class="keyword">{{ item }}  </text>
                    <text wx:else>  {{ item }} </text>
                  </block>
                </view>
              </view>
           </view>
         </navigator>
     </view>
     <import src="../../common/loading.wxml"/>
     <template is="loading" data="{{done, text:'只有这些啦~'}}"/>
  </view>
</scroll-view>

.search-box{
  background-color: rgb(242,63,65);
}

/* 上部横条结构卡片 */
.up-list {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  background-color: #fff;
}

.up-list-item navigator {
  padding: 15px 15px 0 15px;
}

.item-desc-container {
  -webkit-flex: 1;
          flex: 1;
  display: -webkit-flex;
  display: flex;
  border-bottom: 1px rgb(237,237,237) solid;
  padding-bottom: 15px;
}

.item-img {
  width: 160rpx;
  height: 160rpx;
}

.info-view {
  -webkit-flex: 1;
          flex: 1;
  margin-left:15px;
  font-size: 12px;
  color:#999;
}

.title {
  font-size:28rpx;
  /*line-height: 1.45;*/
  height: 126rpx;
  color:#080808;
  /*margin-bottom: 10px;*/
  word-break: break-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: start;
  -webkit-line-clamp: 2;
}

.title, .price {
    -webkit-flex:1;
            flex:1;
    display: -webkit-flex;
    display: flex;
}

.target-word{
  margin-top: 6rpx;
}

.keyword{
  color: #ff685c;
}

.other-word{
  margin-left: 6px;
  color:#999;
}


/*.rectangle-bounce {
    text-align: center;
    height:50px;
}

.rectangle-bounce view {
    height: 100%;
    width: 7px;
    margin: 0 3px 0 0;
    background-color: #e60012;
    display: inline-block;
    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
    animation: stretchdelay 1.2s infinite ease-in-out
}

.rectangle-bounce .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s
}

.rectangle-bounce .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s
}

.rectangle-bounce .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s
}

.rectangle-bounce .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s
}

@-webkit-keyframes stretchdelay {
    0%, 40%, 100% {
        -webkit-transform: scaleY(0.4)
    }
    20% {
        -webkit-transform: scaleY(1)
    }
}

@keyframes stretchdelay {
    0%, 40%, 100% {
        transform: scaleY(0.4);
    }
    20% {
        transform: scaleY(1);
    }
}*/

import common from '../../common/app'
import category from '../../common/category'
const loadingLength = 20
const loadingStart = 0

let pageLength = loadingLength
let start = loadingStart
const page = {
  onLoad(options) {
    console.log(options);
    // 来自gotogo or viewall
    const key = options.key || 'allRaiders'
    console.log('all onload...');
    // 那次重启页面都重置初始条件，否则在手机上会缓存这两个变量的值
    // 下次进来时，会以上次设置的值作为初始值
    pageLength = loadingLength
    start = loadingStart
    wx.getStorage({
      key:key,
      success: (result) => {
        console.log('获取本地存储allRaiders的数据：', result)
        this.loadNewPage(result.data)
      },
      fail(result){
        console.log('获取本地存储allRaiders错误：', result)
      }
    })
  }
  ,scrolltolower(){
    this.loadNewPage()
  }
  // 滚动到底部事件监听 -start
 ,loadNewPage(allArticles = this.allArticles){
   if(!allArticles || allArticles.length === 0 ) return;
   const end = start + pageLength
   const alreadyDisplayArticles = this.data.articles || []
   const shouldLoadArticles = allArticles.slice(start, end)
   const articles = alreadyDisplayArticles.concat(shouldLoadArticles)
   console.log("articles.length:",articles.length);
   console.log("allArticles.length:",allArticles.length);
   if(articles.length === allArticles.length){
     setTimeout(() => {
       this.setData({ done: true })
     }, 120)
   }else{
     this.setData({ done: false })
   }
   this.setData({ articles })
   this.allArticles = allArticles
   start += pageLength
 }
 // 滚动到底部事件监听 -end
}
Object.assign(page, common)
Page(page)