快应用信息流列表组件

recommend组件

<import name="com-large" src="./list/large.ux"></import>
<import name="com-single" src="./list/single.ux"></import>
<import name="com-three" src="./list/three.ux"></import>

<template>
  <div class="list-wraper">
    <list id="list" class="list-content" onscrollbottom="loadMoreData">
      <block for="(index, item) in listData">
        <list-item type="item2" class="list-content list-padding" if="{{item.cover_mode === 1}}">
          <com-large onnav-fun="navFun" item-data="{{item}}" item-index="{{index}}"></com-large>
        </list-item>
        <list-item type="item3" class="list-content list-padding" if="{{item.cover_mode === 2}}">
          <com-three onnav-fun="navFun" item-data="{{item}}" item-index="{{index}}"></com-three>
        </list-item>
        <list-item type="item4" class="list-content list-padding" if="{{item.cover_mode === 3}}">
          <com-single onnav-fun="navFun" item-data="{{item}}" item-index="{{index}}"></com-single>
        </list-item>
      </block>
      <list-item type="loadMore" class="load-more" if="{{loadingFlag}}">
        <progress type="circular"></progress>
        <text>正在努力加载</text>
      </list-item>
    </list>
  </div>
</template>

<style lang="less">
.list-wraper {
   100%;
  flex: 1;
  flex-direction: column;
  .easeIn {
    animation-name: In;
    animation-duration: 500ms;
    animation-timing-function: ease-in;
  }
  .easeOut {
    animation-name: Out;
    animation-duration: 1200ms;

    animation-timing-function: ease-in-out;
  }
  .refresh-tips-wraper {
    flex-direction: row;
    justify-content: center;
    align-items: center;
     100%;
    height: 70px;
    background-color: rgba(247, 248, 250, 1);
    .loading-img {
       35px;
      height: 35px;
      margin-right: 20px;
    }
    .refreh-text {
      height: 70px;
      text-align: center;
      font-size: 25px;
    }
    .default {
      color: #999999;
    }
    .active {
      color: rgba(54, 151, 255, 1);
    }
  }
  .list-content {
     100%;
    flex: 1;
    border-bottom- 0.5px;
    border-bottom-color: #eeeeee;
    .refreh-text {
       100%;
      height: 70px;
      text-align: center;
      font-size: 25px;
      background-color: rgba(247, 248, 250, 1);
    }
    .active {
      color: rgba(54, 151, 255, 1);
    }
  }
  .list-padding {
    padding-left: 24px;
    padding-right: 24px;
  }
  .load-more {
    justify-content: center;
    align-items: center;
    height: 100px;
  }
}
@keyframes In {
  from {
    height: 0px;
  }
  to {
    height: 70px;
  }
}
@keyframes Out {
  from {
    height: 70px;
  }
  to {
    height: 0px;
  }
}
</style>

<script>

export default {
  props: {
    listData: {
      type: Array,
      default: [
        {
          "req_id": "3731bb2f88adab88d1117239288421a03b2fdfc7",
          "group_id": "df_190916003937667",
          "item_id": "df_190916003937667",
          "video_id": null,
          "tag": "娱乐",
          "title": "王者荣耀：为什么主播不能点投降？看完原因后，网友：太不容易了",
          "source": "",
          "article_url": "https://mini.eastday.com/mobile/190916003937667.html?qid=qid11192&dp=JnJlc29sdXRpb249NzUwJmltZWk9ODY5MTU4MDIwNTI3NTE3Jm5ldD1XSUZJJm9wZXJhdG9ydHlwZT1udWxsJm1vZGVsPUVWQS1BTDAwJm9zdmVyPTYuMA==",
          "publisher": "大视角",
          "publish_time": 1568565540000,
          "behot_time": 0,
          "n_abstract": null,
          "share_url": "https://mini.eastday.com/mobile/190916003937667.html&dp=JnJlc29sdXRpb249NzUwJmltZWk9ODY5MTU4MDIwNTI3NTE3Jm5ldD1XSUZJJm9wZXJhdG9ydHlwZT1udWxsJm1vZGVsPUVWQS1BTDAwJm9zdmVyPTYuMA==",
          "has_video": false,
          "video_watch_count": 0,
          "video_duration": 0,
          "play_url": "",
          "video_width": 0,
          "video_height": 0,
          "content": null,
          "detailStyle": "1",
          "detailSource": "0",
          "adModule": null,
          "cover_mode": 2,
          "cover_image_list": [{
            "url": "http://04imgmini.eastday.com/mobile/20190916/20190916003937_d2fc01f529745c90fc872d9ca7b58da2_1_mwpm_03200403.jpg",
            "uri": "",
            "width": 280,
            "height": 210,
            "url_list": [],
            "md5": null,
            "type": 0
          }, {
            "url": "http://04imgmini.eastday.com/mobile/20190916/20190916003937_d2fc01f529745c90fc872d9ca7b58da2_4_mwpm_03200403.jpg",
            "uri": "",
            "width": 280,
            "height": 210,
            "url_list": [],
            "md5": null,
            "type": 0
          }, {
            "url": "http://04imgmini.eastday.com/mobile/20190916/20190916003937_d2fc01f529745c90fc872d9ca7b58da2_3_mwpm_03200403.jpg",
            "uri": "",
            "width": 280,
            "height": 210,
            "url_list": [],
            "md5": null,
            "type": 0
          }],
          "filter_words": [
            "王者荣耀",
            "英雄"
          ],
          "ad_id": null,
          "ad_type": 0,
          "ad_btntxt": null,
          "show_ad_sponsor": false,
          "dpLink": null,
          "t": 1568601692815,
          "track_event": [],
          "download_url": null,
          "log_extra": null,
          "is_stick": false,
          "bid": "995a5ea0681ee5d2f6e06ad0d0477e84",
          "exp_ids": "kyytt_list,gn_list_common,dp_24,ad_1_6,ad_1_6_i_1",
          "adspace_id": null,
          "refresh_interval": 900000,
          "show_rate": 20
        }, {
          "req_id": null,
          "group_id": null,
          "item_id": null,
          "video_id": null,
          "tag": null,
          "title": "抢红包领福利",
          "source": "",
          "article_url": "https://engine.lvehaisen.com/index/activity?appKey=2enLdwBJQXXZB2FRRRo2KbLY3zDX&adslotId=293881",
          "publisher": "广告",
          "publish_time": 0,
          "behot_time": 0,
          "n_abstract": "",
          "share_url": null,
          "has_video": false,
          "video_watch_count": 0,
          "video_duration": 0,
          "play_url": null,
          "video_width": 0,
          "video_height": 0,
          "content": null,
          "detailStyle": null,
          "detailSource": null,
          "adModule": null,
          "cover_mode": 1,
          "cover_image_list": [{
            "url": "http://d.xm.antuzhi.com/dsp.1561011361276upload_21eca27f_46cd_46b9_9afe_1560548008b4_00001269.jpg",
            "uri": null,
            "width": 720,
            "height": 360,
            "url_list": null,
            "md5": "d8a32d629f45e47634fd266a84f293f5",
            "type": 1
          }],
          "filter_words": null,
          "ad_id": "1153064634837327872",
          "ad_type": 2,
          "ad_btntxt": "点击查看",
          "show_ad_sponsor": false,
          "dpLink": null,
          "t": 0,
          "track_event": [{
            "event_type": "0",
            "notify_url": "http://hyt.antuzhi.com/api/report.do?adChannel=MjkzODgx&adId=1153064634837327872&adSpaceId=726&adSpaceType=4&adSrc=1&adTypeStr=1&adproxyId=0&appId=164&bid=995a5ea0681ee5d2f6e06ad0d0477e84&brand=&channel_id=&cpc=0.001&detail_download_rate=0&detail_open_rate=0&deviceChannel=&deviceModel=HUAWEIEVA-AL00&down_x=__DOWN_X__&down_y=__DOWN_Y__&dspAdId=&dspInnerUser=1&dspName=&dspSpaceId=&dspUserId=2&etype=__EVENTTYPE__&geoId=&gtm=1568601693114&height=__HEIGHT__&idFromAdSrc=1153064634837327872&imei=aad3c431179dcfd12830a7ed8fe40fd5&index=0&installPkgName=__INSTALL_PKGNAME__&network=1&nodeId=0&operators=0&osType=2&osVersion=6.0&price=1&prov=1.0&rankScore=0.008931&recId=gbdt_with_ctr&rt=0&sdkVersionCode=0&self_policy_id=Default&settleMode=6&settlementCompany=5p2t5bee5o6o5ZWK572R57uc56eR5oqA5pyJ6ZmQ5YWs5Y-4&sid=d8bf83603f279320931d9ecf0c3e9d1d&sign=666457301dc7ce9f74bf4233fab54b247f24de76deeee5eff5dfc9ae582bae04&sip=119.137.52.209&uid=aad3c431179dcfd12830a7ed8fe40fd5&up_x=__UP_X__&up_y=__UP_Y__&version=201080&width=__WIDTH__",
            "plat": "UNKNOW",
            "url_type": 0,
            "notify_data": null
          }],
          "download_url": null,
          "log_extra": {
            "adAppId": "164",
            "adAppKey": "ldsxHDu6KoYvaklzNet6uVsqnPUx7zh9",
            "interaction_type": 2,
            "url_type": 0,
            "admType": 3,
            "open_type": 0
          },
          "is_stick": false,
          "bid": "995a5ea0681ee5d2f6e06ad0d0477e84",
          "exp_ids": "ad_1_6,ad_1_6_i_1",
          "adspace_id": "726",
          "refresh_interval": 900000,
          "show_rate": 20
        }, {
          "req_id": "3731bb2f88adab88d1117239288421a03b2fdfc7",
          "group_id": "df_190916095238163",
          "item_id": "df_190916095238163",
          "video_id": null,
          "tag": "汽车",
          "title": "19万奥迪Q2L测试预防碰撞系统，本想提高人气，结果“打脸”",
          "source": "",
          "article_url": "https://mini.eastday.com/mobile/190916095238163.html?qid=qid11192&dp=JnJlc29sdXRpb249NzUwJmltZWk9ODY5MTU4MDIwNTI3NTE3Jm5ldD1XSUZJJm9wZXJhdG9ydHlwZT1udWxsJm1vZGVsPUVWQS1BTDAwJm9zdmVyPTYuMA==",
          "publisher": "雪樱谈车",
          "publish_time": 1568598720000,
          "behot_time": 0,
          "n_abstract": null,
          "share_url": "https://mini.eastday.com/mobile/190916095238163.html&dp=JnJlc29sdXRpb249NzUwJmltZWk9ODY5MTU4MDIwNTI3NTE3Jm5ldD1XSUZJJm9wZXJhdG9ydHlwZT1udWxsJm1vZGVsPUVWQS1BTDAwJm9zdmVyPTYuMA==",
          "has_video": false,
          "video_watch_count": 0,
          "video_duration": 0,
          "play_url": "",
          "video_width": 0,
          "video_height": 0,
          "content": null,
          "detailStyle": "1",
          "detailSource": "0",
          "adModule": null,
          "cover_mode": 2,
          "cover_image_list": [{
            "url": "http://08imgmini.eastday.com/mobile/20190916/2019091609_163ee95a369a4db281fa4a49514beb37_9283_mwpm_03200403.jpg",
            "uri": "",
            "width": 320,
            "height": 240,
            "url_list": [],
            "md5": null,
            "type": 0
          }, {
            "url": "http://08imgmini.eastday.com/mobile/20190916/2019091609_c86cd420151f4e558efabe6792de8009_1656_mwpm_03200403.jpg",
            "uri": "",
            "width": 320,
            "height": 240,
            "url_list": [],
            "md5": null,
            "type": 0
          }, {
            "url": "http://08imgmini.eastday.com/mobile/20190916/2019091609_9f006bfeeacb43ae8767d0ecc7ece736_7140_mwpm_03200403.jpg",
            "uri": "",
            "width": 320,
            "height": 240,
            "url_list": [],
            "md5": null,
            "type": 0
          }],
          "filter_words": [
            "奥迪",
            "suv车型",
            "涡轮增压",
            "经销商",
            "汽车安全设计"
          ],
          "ad_id": null,
          "ad_type": 0,
          "ad_btntxt": null,
          "show_ad_sponsor": false,
          "dpLink": null,
          "t": 1568601692815,
          "track_event": [],
          "download_url": null,
          "log_extra": null,
          "is_stick": false,
          "bid": "995a5ea0681ee5d2f6e06ad0d0477e84",
          "exp_ids": "kyytt_list,gn_list_common,dp_24,ad_1_6,ad_1_6_i_1",
          "adspace_id": null,
          "refresh_interval": 900000,
          "show_rate": 20
        }, {
          "req_id": "3731bb2f88adab88d1117239288421a03b2fdfc7",
          "group_id": "df_190916000513340",
          "item_id": "df_190916000513340",
          "video_id": null,
          "tag": "科技",
          "title": "新闻早餐：马云刚退休 马化腾就要“狙击”支付宝",
          "source": "",
          "article_url": "https://mini.eastday.com/mobile/190916000513340.html?qid=qid11192&dp=JnJlc29sdXRpb249NzUwJmltZWk9ODY5MTU4MDIwNTI3NTE3Jm5ldD1XSUZJJm9wZXJhdG9ydHlwZT1udWxsJm1vZGVsPUVWQS1BTDAwJm9zdmVyPTYuMA==",
          "publisher": "新闻早餐",
          "publish_time": 1568563500000,
          "behot_time": 0,
          "n_abstract": null,
          "share_url": "https://mini.eastday.com/mobile/190916000513340.html&dp=JnJlc29sdXRpb249NzUwJmltZWk9ODY5MTU4MDIwNTI3NTE3Jm5ldD1XSUZJJm9wZXJhdG9ydHlwZT1udWxsJm1vZGVsPUVWQS1BTDAwJm9zdmVyPTYuMA==",
          "has_video": false,
          "video_watch_count": 0,
          "video_duration": 0,
          "play_url": "",
          "video_width": 0,
          "video_height": 0,
          "content": null,
          "detailStyle": "1",
          "detailSource": "0",
          "adModule": null,
          "cover_mode": 2,
          "cover_image_list": [{
            "url": "http://00imgmini.eastday.com/mobile/20190916/2019091600_58085f55506642dab8685ca19dae1e5c_1580_mwpm_03200403.jpg",
            "uri": "",
            "width": 320,
            "height": 240,
            "url_list": [],
            "md5": null,
            "type": 0
          }, {
            "url": "http://00imgmini.eastday.com/mobile/20190916/2019091600_a0522a4c67a34a4e806d23c8076d2c4b_1785_mwpm_03200403.jpg",
            "uri": "",
            "width": 320,
            "height": 240,
            "url_list": [],
            "md5": null,
            "type": 0
          }, {
            "url": "http://00imgmini.eastday.com/mobile/20190916/2019091600_ca5e58dd068047b9ba6361803a9e3962_7109_mwpm_03200403.jpg",
            "uri": "",
            "width": 320,
            "height": 240,
            "url_list": [],
            "md5": null,
            "type": 0
          }],
          "filter_words": [
            "微信支付",
            "马云",
            "支付宝"
          ],
          "ad_id": null,
          "ad_type": 0,
          "ad_btntxt": null,
          "show_ad_sponsor": false,
          "dpLink": null,
          "t": 1568601692815,
          "track_event": [],
          "download_url": null,
          "log_extra": null,
          "is_stick": false,
          "bid": "995a5ea0681ee5d2f6e06ad0d0477e84",
          "exp_ids": "kyytt_list,gn_list_common,dp_24,ad_1_6,ad_1_6_i_1",
          "adspace_id": null,
          "refresh_interval": 900000,
          "show_rate": 20
        }, {
          "req_id": "3731bb2f88adab88d1117239288421a03b2fdfc7",
          "group_id": "df_190916083310694",
          "item_id": "df_190916083310694",
          "video_id": null,
          "tag": "时尚",
          "title": "美女街拍：曼妙多姿的打底裤小姐姐，呈现出女神的甜美感",
          "source": "",
          "article_url": "https://mini.eastday.com/mobile/190916083310694.html?qid=qid11192&dp=JnJlc29sdXRpb249NzUwJmltZWk9ODY5MTU4MDIwNTI3NTE3Jm5ldD1XSUZJJm9wZXJhdG9ydHlwZT1udWxsJm1vZGVsPUVWQS1BTDAwJm9zdmVyPTYuMA==",
          "publisher": "剧场轮番看",
          "publish_time": 1568593980000,
          "behot_time": 0,
          "n_abstract": null,
          "share_url": "https://mini.eastday.com/mobile/190916083310694.html&dp=JnJlc29sdXRpb249NzUwJmltZWk9ODY5MTU4MDIwNTI3NTE3Jm5ldD1XSUZJJm9wZXJhdG9ydHlwZT1udWxsJm1vZGVsPUVWQS1BTDAwJm9zdmVyPTYuMA==",
          "has_video": false,
          "video_watch_count": 0,
          "video_duration": 0,
          "play_url": "",
          "video_width": 0,
          "video_height": 0,
          "content": null,
          "detailStyle": "1",
          "detailSource": "0",
          "adModule": null,
          "cover_mode": 2,
          "cover_image_list": [{
            "url": "http://00imgmini.eastday.com/mobile/20190916/2019091509_77b50817542b4dbb976bcfe39df7aed8_5899_cover_mwpm_03200403.jpg",
            "uri": "",
            "width": 225,
            "height": 169,
            "url_list": [],
            "md5": null,
            "type": 0
          }, {
            "url": "http://00imgmini.eastday.com/mobile/20190916/2019091509_38e307c18bcd4b308e88c560a5e888d6_7057_cover_mwpm_03200403.jpg",
            "uri": "",
            "width": 225,
            "height": 169,
            "url_list": [],
            "md5": null,
            "type": 0
          }, {
            "url": "http://00imgmini.eastday.com/mobile/20190916/2019091509_64b6ec11c32c4510b32157cbc8c08049_1686_cover_mwpm_03200403.jpg",
            "uri": "",
            "width": 225,
            "height": 169,
            "url_list": [],
            "md5": null,
            "type": 0
          }],
          "filter_words": [
            "打底裤",
            "街拍",
            "女神",
            "搭配",
            "穿搭"
          ],
          "ad_id": null,
          "ad_type": 0,
          "ad_btntxt": null,
          "show_ad_sponsor": false,
          "dpLink": null,
          "t": 1568601692815,
          "track_event": [],
          "download_url": null,
          "log_extra": null,
          "is_stick": false,
          "bid": "995a5ea0681ee5d2f6e06ad0d0477e84",
          "exp_ids": "kyytt_list,gn_list_common,dp_24,ad_1_6,ad_1_6_i_1",
          "adspace_id": null,
          "refresh_interval": 900000,
          "show_rate": 20
        }, {
          "req_id": "3731bb2f88adab88d1117239288421a03b2fdfc7",
          "group_id": "df_190915120121919",
          "item_id": "df_190915120121919",
          "video_id": null,
          "tag": "军事",
          "title": "印军再次越境对峙 已迅速派遣增援部队 专家：不可掉以轻心",
          "source": "",
          "article_url": "https://mini.eastday.com/mobile/190915120121919.html?qid=qid11192&dp=JnJlc29sdXRpb249NzUwJmltZWk9ODY5MTU4MDIwNTI3NTE3Jm5ldD1XSUZJJm9wZXJhdG9ydHlwZT1udWxsJm1vZGVsPUVWQS1BTDAwJm9zdmVyPTYuMA==",
          "publisher": "东方头条  张殿成军情观察",
          "publish_time": 1568520060000,
          "behot_time": 0,
          "n_abstract": null,
          "share_url": "https://mini.eastday.com/mobile/190915120121919.html&dp=JnJlc29sdXRpb249NzUwJmltZWk9ODY5MTU4MDIwNTI3NTE3Jm5ldD1XSUZJJm9wZXJhdG9ydHlwZT1udWxsJm1vZGVsPUVWQS1BTDAwJm9zdmVyPTYuMA==",
          "has_video": false,
          "video_watch_count": 0,
          "video_duration": 0,
          "play_url": "",
          "video_width": 0,
          "video_height": 0,
          "content": null,
          "detailStyle": "1",
          "detailSource": "0",
          "adModule": null,
          "cover_mode": 3,
          "cover_image_list": [{
            "url": "http://07imgmini.eastday.com/mobile/20190915/2019091512_215d0e40bb98424bae42b6b7040d5f32_1285_cover_mwpm_03200403.jpg",
            "uri": "",
            "width": 320,
            "height": 240,
            "url_list": [],
            "md5": null,
            "type": 0
          }],
          "filter_words": [
            "印度",
            "环球军情"
          ],
          "ad_id": null,
          "ad_type": 0,
          "ad_btntxt": null,
          "show_ad_sponsor": false,
          "dpLink": null,
          "t": 1568601692815,
          "track_event": [],
          "download_url": null,
          "log_extra": null,
          "is_stick": false,
          "bid": "995a5ea0681ee5d2f6e06ad0d0477e84",
          "exp_ids": "kyytt_list,gn_list_common,dp_24,ad_1_6,ad_1_6_i_1",
          "adspace_id": null,
          "refresh_interval": 900000,
          "show_rate": 20
        }, {
          "req_id": "3731bb2f88adab88d1117239288421a03b2fdfc7",
          "group_id": "df_190915225713065",
          "item_id": "df_190915225713065",
          "video_id": null,
          "tag": "健康",
          "title": "口舌溃疡、干咳无痰、口干口苦，说到底都是上火了，4个方法降火",
          "source": "",
          "article_url": "https://mini.eastday.com/mobile/190915225713065.html?qid=qid11192&dp=JnJlc29sdXRpb249NzUwJmltZWk9ODY5MTU4MDIwNTI3NTE3Jm5ldD1XSUZJJm9wZXJhdG9ydHlwZT1udWxsJm1vZGVsPUVWQS1BTDAwJm9zdmVyPTYuMA==",
          "publisher": "健康医典",
          "publish_time": 1568559420000,
          "behot_time": 0,
          "n_abstract": null,
          "share_url": "https://mini.eastday.com/mobile/190915225713065.html&dp=JnJlc29sdXRpb249NzUwJmltZWk9ODY5MTU4MDIwNTI3NTE3Jm5ldD1XSUZJJm9wZXJhdG9ydHlwZT1udWxsJm1vZGVsPUVWQS1BTDAwJm9zdmVyPTYuMA==",
          "has_video": false,
          "video_watch_count": 0,
          "video_duration": 0,
          "play_url": "",
          "video_width": 0,
          "video_height": 0,
          "content": null,
          "detailStyle": "1",
          "detailSource": "0",
          "adModule": null,
          "cover_mode": 2,
          "cover_image_list": [{
            "url": "http://06imgmini.eastday.com/mobile/20190915/20190915225713_fe6e139e41bf40d8298dec8975aa7123_1_mwpm_03200403.jpg",
            "uri": "",
            "width": 320,
            "height": 240,
            "url_list": [],
            "md5": null,
            "type": 0
          }, {
            "url": "http://06imgmini.eastday.com/mobile/20190915/20190915225713_fe6e139e41bf40d8298dec8975aa7123_6_mwpm_03200403.jpg",
            "uri": "",
            "width": 320,
            "height": 240,
            "url_list": [],
            "md5": null,
            "type": 0
          }, {
            "url": "http://06imgmini.eastday.com/mobile/20190915/20190915225713_fe6e139e41bf40d8298dec8975aa7123_3_mwpm_03200403.jpg",
            "uri": "",
            "width": 320,
            "height": 240,
            "url_list": [],
            "md5": null,
            "type": 0
          }],
          "filter_words": [
            "口苦",
            "口干",
            "溃疡",
            "心火",
            "胃"
          ],
          "ad_id": null,
          "ad_type": 0,
          "ad_btntxt": null,
          "show_ad_sponsor": false,
          "dpLink": null,
          "t": 1568601692815,
          "track_event": [],
          "download_url": null,
          "log_extra": null,
          "is_stick": false,
          "bid": "995a5ea0681ee5d2f6e06ad0d0477e84",
          "exp_ids": "kyytt_list,gn_list_common,dp_24,ad_1_6,ad_1_6_i_1",
          "adspace_id": null,
          "refresh_interval": 900000,
          "show_rate": 20
        }, {
          "req_id": "3731bb2f88adab88d1117239288421a03b2fdfc7",
          "group_id": "df_190916045432874",
          "item_id": "df_190916045432874",
          "video_id": null,
          "tag": "游戏",
          "title": "自瞄流守约火了，二技能命中率百分百，实战效果完美",
          "source": "",
          "article_url": "https://mini.eastday.com/mobile/190916045432874.html?qid=qid11192&dp=JnJlc29sdXRpb249NzUwJmltZWk9ODY5MTU4MDIwNTI3NTE3Jm5ldD1XSUZJJm9wZXJhdG9ydHlwZT1udWxsJm1vZGVsPUVWQS1BTDAwJm9zdmVyPTYuMA==",
          "publisher": "小双爱游戏",
          "publish_time": 1568580840000,
          "behot_time": 0,
          "n_abstract": null,
          "share_url": "https://mini.eastday.com/mobile/190916045432874.html&dp=JnJlc29sdXRpb249NzUwJmltZWk9ODY5MTU4MDIwNTI3NTE3Jm5ldD1XSUZJJm9wZXJhdG9ydHlwZT1udWxsJm1vZGVsPUVWQS1BTDAwJm9zdmVyPTYuMA==",
          "has_video": false,
          "video_watch_count": 0,
          "video_duration": 0,
          "play_url": "",
          "video_width": 0,
          "video_height": 0,
          "content": null,
          "detailStyle": "1",
          "detailSource": "0",
          "adModule": null,
          "cover_mode": 2,
          "cover_image_list": [{
            "url": "http://03imgmini.eastday.com/mobile/20190916/20190916045432_c2e038f7ca8fcbef852c8be662fdb6e5_1_mwpm_03200403.jpg",
            "uri": "",
            "width": 320,
            "height": 240,
            "url_list": [],
            "md5": null,
            "type": 0
          }, {
            "url": "http://03imgmini.eastday.com/mobile/20190916/20190916045432_c2e038f7ca8fcbef852c8be662fdb6e5_3_mwpm_03200403.jpg",
            "uri": "",
            "width": 320,
            "height": 240,
            "url_list": [],
            "md5": null,
            "type": 0
          }, {
            "url": "http://03imgmini.eastday.com/mobile/20190916/20190916045432_c2e038f7ca8fcbef852c8be662fdb6e5_2_mwpm_03200403.jpg",
            "uri": "",
            "width": 320,
            "height": 240,
            "url_list": [],
            "md5": null,
            "type": 0
          }],
          "filter_words": [
            "百里守约",
            "王者荣耀"
          ],
          "ad_id": null,
          "ad_type": 0,
          "ad_btntxt": null,
          "show_ad_sponsor": false,
          "dpLink": null,
          "t": 1568601692815,
          "track_event": [],
          "download_url": null,
          "log_extra": null,
          "is_stick": false,
          "bid": "995a5ea0681ee5d2f6e06ad0d0477e84",
          "exp_ids": "kyytt_list,gn_list_common,dp_24,ad_1_6,ad_1_6_i_1",
          "adspace_id": null,
          "refresh_interval": 900000,
          "show_rate": 20
        }, {
          "req_id": "3731bb2f88adab88d1117239288421a03b2fdfc7",
          "group_id": "df_190915231020487",
          "item_id": "df_190915231020487",
          "video_id": null,
          "tag": "娱乐",
          "title": "五大“收视女王”，孙俪上榜，杨幂第三，第一实至名归",
          "source": "",
          "article_url": "https://mini.eastday.com/mobile/190915231020487.html?qid=qid11192&dp=JnJlc29sdXRpb249NzUwJmltZWk9ODY5MTU4MDIwNTI3NTE3Jm5ldD1XSUZJJm9wZXJhdG9ydHlwZT1udWxsJm1vZGVsPUVWQS1BTDAwJm9zdmVyPTYuMA==",
          "publisher": "阿客",
          "publish_time": 1568560200000,
          "behot_time": 0,
          "n_abstract": null,
          "share_url": "https://mini.eastday.com/mobile/190915231020487.html&dp=JnJlc29sdXRpb249NzUwJmltZWk9ODY5MTU4MDIwNTI3NTE3Jm5ldD1XSUZJJm9wZXJhdG9ydHlwZT1udWxsJm1vZGVsPUVWQS1BTDAwJm9zdmVyPTYuMA==",
          "has_video": false,
          "video_watch_count": 0,
          "video_duration": 0,
          "play_url": "",
          "video_width": 0,
          "video_height": 0,
          "content": null,
          "detailStyle": "1",
          "detailSource": "0",
          "adModule": null,
          "cover_mode": 2,
          "cover_image_list": [{
            "url": "http://00imgmini.eastday.com/mobile/20190915/2019091523_3bf48d3af5e444249382accb2b3872f7_4784_cover_mwpm_03200403.jpg",
            "uri": "",
            "width": 320,
            "height": 240,
            "url_list": [],
            "md5": null,
            "type": 0
          }, {
            "url": "http://00imgmini.eastday.com/mobile/20190915/2019091523_7838c7e2433a4177bac5b5cab74547fd_8794_cover_mwpm_03200403.jpg",
            "uri": "",
            "width": 320,
            "height": 240,
            "url_list": [],
            "md5": null,
            "type": 0
          }, {
            "url": "http://00imgmini.eastday.com/mobile/20190915/2019091523_f859950922194360ace9c3c221739d1d_5534_cover_mwpm_03200403.jpg",
            "uri": "",
            "width": 320,
            "height": 240,
            "url_list": [],
            "md5": null,
            "type": 0
          }],
          "filter_words": [
            "孙俪",
            "杨紫",
            "杨幂"
          ],
          "ad_id": null,
          "ad_type": 0,
          "ad_btntxt": null,
          "show_ad_sponsor": false,
          "dpLink": null,
          "t": 1568601692815,
          "track_event": [],
          "download_url": null,
          "log_extra": null,
          "is_stick": false,
          "bid": "995a5ea0681ee5d2f6e06ad0d0477e84",
          "exp_ids": "kyytt_list,gn_list_common,dp_24,ad_1_6,ad_1_6_i_1",
          "adspace_id": null,
          "refresh_interval": 900000,
          "show_rate": 20
        }, {
          "req_id": "3731bb2f88adab88d1117239288421a03b2fdfc7",
          "group_id": "df_190916080720406",
          "item_id": "df_190916080720406",
          "video_id": null,
          "tag": "汽车",
          "title": "被遗忘的硬汉重出江湖，网友：这车出来还有霸道什么事？",
          "source": "",
          "article_url": "https://mini.eastday.com/mobile/190916080720406.html?qid=qid11192&dp=JnJlc29sdXRpb249NzUwJmltZWk9ODY5MTU4MDIwNTI3NTE3Jm5ldD1XSUZJJm9wZXJhdG9ydHlwZT1udWxsJm1vZGVsPUVWQS1BTDAwJm9zdmVyPTYuMA==",
          "publisher": "买车家",
          "publish_time": 1568592420000,
          "behot_time": 0,
          "n_abstract": null,
          "share_url": "https://mini.eastday.com/mobile/190916080720406.html&dp=JnJlc29sdXRpb249NzUwJmltZWk9ODY5MTU4MDIwNTI3NTE3Jm5ldD1XSUZJJm9wZXJhdG9ydHlwZT1udWxsJm1vZGVsPUVWQS1BTDAwJm9zdmVyPTYuMA==",
          "has_video": false,
          "video_watch_count": 0,
          "video_duration": 0,
          "play_url": "",
          "video_width": 0,
          "video_height": 0,
          "content": null,
          "detailStyle": "1",
          "detailSource": "0",
          "adModule": null,
          "cover_mode": 2,
          "cover_image_list": [{
            "url": "http://00imgmini.eastday.com/mobile/20190916/20190916080720_97707dcff9c5f2b57875f3fca350d10d_3_mwpm_03200403.jpg",
            "uri": "",
            "width": 320,
            "height": 240,
            "url_list": [],
            "md5": null,
            "type": 0
          }, {
            "url": "http://00imgmini.eastday.com/mobile/20190916/20190916080720_97707dcff9c5f2b57875f3fca350d10d_2_mwpm_03200403.jpg",
            "uri": "",
            "width": 320,
            "height": 240,
            "url_list": [],
            "md5": null,
            "type": 0
          }, {
            "url": "http://00imgmini.eastday.com/mobile/20190916/20190916080720_97707dcff9c5f2b57875f3fca350d10d_4_mwpm_03200403.jpg",
            "uri": "",
            "width": 320,
            "height": 240,
            "url_list": [],
            "md5": null,
            "type": 0
          }],
          "filter_words": [
            "起亚",
            "新车",
            "suv车型",
            "汽车车展静态评测"
          ],
          "ad_id": null,
          "ad_type": 0,
          "ad_btntxt": null,
          "show_ad_sponsor": false,
          "dpLink": null,
          "t": 1568601692815,
          "track_event": [],
          "download_url": null,
          "log_extra": null,
          "is_stick": false,
          "bid": "995a5ea0681ee5d2f6e06ad0d0477e84",
          "exp_ids": "kyytt_list,gn_list_common,dp_24,ad_1_6,ad_1_6_i_1",
          "adspace_id": null,
          "refresh_interval": 900000,
          "show_rate": 20
        }, {
          "req_id": "3731bb2f88adab88d1117239288421a03b2fdfc7",
          "group_id": "df_190915155805705",
          "item_id": "df_190915155805705",
          "video_id": null,
          "tag": "时尚",
          "title": "街拍：可爱迷人的小姐姐，搭配清爽小吊带，甜美中带有一丝性感",
          "source": "",
          "article_url": "https://mini.eastday.com/mobile/190915155805705.html?qid=qid11192&dp=JnJlc29sdXRpb249NzUwJmltZWk9ODY5MTU4MDIwNTI3NTE3Jm5ldD1XSUZJJm9wZXJhdG9ydHlwZT1udWxsJm1vZGVsPUVWQS1BTDAwJm9zdmVyPTYuMA==",
          "publisher": "EdgarJiang",
          "publish_time": 1568534280000,
          "behot_time": 0,
          "n_abstract": null,
          "share_url": "https://mini.eastday.com/mobile/190915155805705.html&dp=JnJlc29sdXRpb249NzUwJmltZWk9ODY5MTU4MDIwNTI3NTE3Jm5ldD1XSUZJJm9wZXJhdG9ydHlwZT1udWxsJm1vZGVsPUVWQS1BTDAwJm9zdmVyPTYuMA==",
          "has_video": false,
          "video_watch_count": 0,
          "video_duration": 0,
          "play_url": "",
          "video_width": 0,
          "video_height": 0,
          "content": null,
          "detailStyle": "1",
          "detailSource": "0",
          "adModule": null,
          "cover_mode": 2,
          "cover_image_list": [{
            "url": "http://07imgmini.eastday.com/mobile/20190915/2019091515_6de9525f062e484db91aaad3a3ca9271_1135_cover_mwpm_03200403.jpg",
            "uri": "",
            "width": 320,
            "height": 240,
            "url_list": [],
            "md5": null,
            "type": 0
          }, {
            "url": "http://07imgmini.eastday.com/mobile/20190915/2019091515_f66447f255fd4dd58f10cea78cc5346d_4476_cover_mwpm_03200403.jpg",
            "uri": "",
            "width": 320,
            "height": 240,
            "url_list": [],
            "md5": null,
            "type": 0
          }, {
            "url": "http://07imgmini.eastday.com/mobile/20190915/2019091515_57c3d1b785c245458690b5db051f9172_4491_cover_mwpm_03200403.jpg",
            "uri": "",
            "width": 320,
            "height": 240,
            "url_list": [],
            "md5": null,
            "type": 0
          }],
          "filter_words": [
            "穿搭",
            "吊带",
            "街拍",
            "搭配",
            "小短裙"
          ],
          "ad_id": null,
          "ad_type": 0,
          "ad_btntxt": null,
          "show_ad_sponsor": false,
          "dpLink": null,
          "t": 1568601692815,
          "track_event": [],
          "download_url": null,
          "log_extra": null,
          "is_stick": false,
          "bid": "995a5ea0681ee5d2f6e06ad0d0477e84",
          "exp_ids": "kyytt_list,gn_list_common,dp_24,ad_1_6,ad_1_6_i_1",
          "adspace_id": null,
          "refresh_interval": 900000,
          "show_rate": 20
        }]
    }
  },
  data: {
    loadingFlag: false,
  },
  onInit() { },

  navFun(item) {
    this.$emit('navFun', item.detail)
  },

  loadMoreData() {
    this.$emit('loadMore')
  },
}
</script>

引入的large.ux组件

<template>
  <div class="large-wraper" onclick="navFun(itemData)">
    <div class="three_item_title">
      <text class="font {{itemData.isClicked ? 'active' : 'default'}}" if="{{itemData.title}}">{{itemData.title}}</text>
    </div>
    <div class="three_item_imgs" if="{{itemData.cover_image_list}}">
      <block for="(newIndex, newItem) in itemData.cover_image_list">
        <image class="three_imgs {{!netFlag ? 'default-bg' : ''}}" src="{{newItem.url}}"></image>
      </block>
    </div>
    <div class="three_item_footer">
      <div class="item_footer_left">
        <text class="tags default" if="{{currentTag}}">{{currentTag}}</text>
        <text class="source" if="{{itemData.publisher}}">{{itemData.publisher}}</text>
        <text class="time" if="{{itemData.loadedTime && itemData.ad_id === null}}">{{itemData.loadedTime ? itemData.loadedTime : '刚刚'}}</text>
      </div>
      <div class="item_footer_right" onclick="showMask(itemData)" if="{{itemData.ad_id === null}}">
        <image src="/Component/images/close-icon.png" class="close_img"></image>
      </div>
    </div>
  </div>
</template>

<style lang="less">
.large-wraper {
   100%;
  flex: 1;
  flex-direction: column;
  padding-top: 15px;
  padding-bottom: 20px;
  .three_item_title {
     100%;
    margin-bottom: 15px;
    .font {
      font-size: 35px;
      lines: 3;
      text-overflow: ellipsis;
    }
    .active {
      color: rgba(153, 153, 153, 1);
    }
    .default {
      color: rgba(34, 34, 34, 1);
    }
  }
  .three_item_imgs {
     100%;
    height: 385px;
    margin-bottom: 15px;
    justify-content: space-between;
    .three_imgs {
       100%;
      height: 385px;
      border-radius: 10px;
    }
    .default-bg {
      background-color: rgba(0, 0, 0, 0.2);
    }
  }
  .three_item_footer {
     100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .item_footer_left {
      flex-direction: row;
      .tags {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 21px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 4px;
        margin-right: 10px;
      }
      .default {
        border-color: rgba(221, 221, 221, 1);
        border- 1px;
        color: rgba(153, 153, 153, 1);
      }
      .active {
        border-color: rgba(54, 151, 255, 1);
        border- 1px;
        color: rgba(54, 151, 255, 1);
      }
      .source {
        font-size: 25px;
        color: rgba(153, 153, 153, 1);
        margin-right: 10px;
      }
      .time {
        font-size: 25px;
        color: rgba(153, 153, 153, 1);
      }
    }
    .item_footer_right {
       48px;
      height: 34px;
      .close_img {
         48px;
        height: 34px;
      }
    }
  }
}
</style>

<script>
export default {
  props: {
    itemData: Object,
    itemIndex: Number,
    netFlag: Boolean,
  },
  data: {
    isStop: false,
  },
  onInit() {
  },
  navFun(item) {
    if (this.isStop) {
      this.isStop = false
      return
    }
    this.$emit('navFun', { itemData: item, itemIndex: this.itemIndex })
  },
  showMask(item) {
    this.isStop = true
    this.$emit('showMask', { itemData: item, itemIndex: this.itemIndex })
  },
}
</script>

引入的single.ux组件

<template>
  <div class="single-wraper" onclick="navFun(itemData)">
    <div class="news_single_title">
      <div class="head">
        <text class="font {{itemData.isClicked ? 'active' : 'default'}}" if="{{itemData.title}}">{{itemData.title}}</text>
      </div>
      <div class="footer">
        <div class="footer_left">
          <text class="tags default" if="{{currentTag}}">{{currentTag}}</text>
          <text class="source" if="{{itemData.publisher}}">{{itemData.publisher}}</text>
          <text class="time">{{itemData.loadedTime ? itemData.loadedTime : '刚刚'}}</text>
        </div>
        <div class="footer_right" onclick="showMask(itemData)" if="{{itemData.ad_id === null}}">
          <image src="/Component/images/close-icon.png" class="close_img"></image>
        </div>
      </div>
    </div>
    <div class="news_single_img" if="{{itemData.cover_image_list}}">
      <image class="single_img {{!netFlag ? 'default-bg' : ''}}" src="{{itemData.cover_image_list[0].url}}"></image>
    </div>
  </div>
</template>

<style lang="less">
.single-wraper {
   100%;
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 20px;
  .news_single_title {
     435px;
    flex-direction: column;
    justify-content: space-between;
    .head {
       100%;
      .font {
        lines: 3;
        text-overflow: ellipsis;
        font-size: 35px;
      }
      .active {
        color: rgba(153, 153, 153, 1);
      }
      .default {
        color: rgba(34, 34, 34, 1);
      }
    }
    .footer {
      flex-direction: row;
      justify-content: space-between;
      margin-top: 16px;
      .footer_left {
        flex-direction: row;
        .tags {
          padding-left: 10px;
          padding-right: 10px;
          font-size: 21px;
          background-color: rgba(255, 255, 255, 1);
          border-radius: 4px;
          margin-right: 10px;
        }
        .default {
          border-color: rgba(221, 221, 221, 1);
          border- 1px;
          color: rgba(153, 153, 153, 1);
        }
        .active {
          border-color: rgba(54, 151, 255, 1);
          border- 1px;
          color: rgba(54, 151, 255, 1);
        }
        .source {
          font-size: 25px;
          color: rgba(153, 153, 153, 1);
          margin-right: 10px;
        }
        .time {
          font-size: 25px;
          color: rgba(153, 153, 153, 1);
        }
      }
      .footer_right {
         48px;
        height: 34px;
        .close_img {
           48px;
          height: 34px;
        }
      }
    }
  }
  .news_single_img {
     225px;
    height: 150px;
    .single_img {
       225px;
      height: 150px;
      border-radius: 6px;
    }
    .default-bg {
      background-color: rgba(0, 0, 0, 0.2);
    }
  }
}
</style>

<script>
export default {
  props: {
    itemData: Object,
    itemIndex: Number,
    netFlag: Boolean,
  },
  data: {
    currentTag: '',
    isStop: false,
  },
  onInit() {
    if (this.itemData.ad_id !== null && this.itemData.ad_id) {
      this.currentTag = '广告'
    } else if (this.itemData.has_video) {
      this.currentTag = '视频'
    }
  },
  navFun(item) {
    if (this.isStop) {
      this.isStop = false
      return
    }
    this.$emit('navFun', { itemData: item, itemIndex: this.itemIndex })
  },
  showMask(item) {
    this.isStop = true
    this.$emit('showMask', { itemData: item, itemIndex: this.itemIndex })
  }
}
</script>

引入的three.ux组件

<template>
  <div class="three-wraper" onclick="navFun(itemData)">
    <div class="three_item_title">
      <text class="font {{itemData.isClicked ? 'active' : 'default'}}" if="{{itemData.title}}">{{itemData.title}}</text>
    </div>
    <div class="three_item_imgs" if="{{itemData.cover_image_list}}">
      <block for="(newIndex, newItem) in itemData.cover_image_list">
        <image class="three_imgs {{!netFlag ? 'default-bg' : ''}}" src="{{newItem.url}}"></image>
      </block>
    </div>
    <div class="three_item_footer">
      <div class="item_footer_left">
        <text class="tags default" if="{{currentTag}}">{{currentTag}}</text>
        <text class="source" if="{{itemData.publisher}}">{{itemData.publisher}}</text>
        <text class="time">{{itemData.loadedTime ? itemData.loadedTime : '刚刚'}}</text>
      </div>
      <div class="item_footer_right" onclick="showMask(itemData)" if="{{itemData.ad_id === null}}">
        <image src="/Component/images/close-icon.png" class="close_img"></image>
      </div>
    </div>
  </div>
</template>

<style lang="less">
.three-wraper {
   100%;
  flex: 1;
  flex-direction: column;
  padding-top: 15px;
  padding-bottom: 20px;
  /* 多图样式 */
  .three_item_title {
     100%;
    margin-bottom: 15px;
    .font {
      font-size: 35px;
      lines: 3;
      text-overflow: ellipsis;
    }
    .active {
      color: rgba(153, 153, 153, 1);
    }
    .default {
      color: rgba(34, 34, 34, 1);
    }
  }
  .three_item_imgs {
     100%;
    height: 150px;
    margin-bottom: 15px;
    justify-content: space-between;
    .three_imgs {
       225px;
      height: 150px;
      border-radius: 6px;
    }
    .default-bg {
      background-color: rgba(0, 0, 0, 0.2);
    }
  }
  .three_item_footer {
     100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .item_footer_left {
      flex-direction: row;
      flex: 1;
      .tags {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 21px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 4px;
        margin-right: 10px;
      }
      .default {
        border-color: rgba(221, 221, 221, 1);
        border- 1px;
        color: rgba(153, 153, 153, 1);
      }
      .active {
        border-color: rgba(54, 151, 255, 1);
        border- 1px;
        color: rgba(54, 151, 255, 1);
      }
      .source {
        font-size: 25px;
        color: rgba(153, 153, 153, 1);
        margin-right: 10px;
      }
      .time {
        font-size: 25px;
        color: rgba(153, 153, 153, 1);
      }
    }
    .item_footer_right {
       48px;
      height: 34px;
      .close_img {
         48px;
        height: 34px;
      }
    }
  }
}
</style>

<script>
export default {
  props: {
    itemData: Object,
    itemIndex: Number,
    netFlag: Boolean,
  },
  data: {
    currentTag: '',
    isStop: false,
  },
  onInit() {
    if (this.itemData.ad_id !== null && this.itemData.ad_id) {
      this.currentTag = '广告'
    } else if (this.itemData.has_video) {
      this.currentTag = '视频'
    }
  },
  navFun(item) {
    if (this.isStop) {
      this.isStop = false
      return
    }
    this.$emit('navFun', { itemData: item, itemIndex: this.itemIndex })
  },
  showMask(item) {
    this.isStop = true
    this.$emit('showMask', { itemData: item, itemIndex: this.itemIndex })
  }
}
</script>