快应用信息流列表组件

淡淡的烟草味﹌ 2023-07-16 03:36 22阅读 0赞

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 { 
      width: 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;
        width: 100%;
        height: 70px;
        background-color: rgba(247, 248, 250, 1);
        .loading-img { 
          width: 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 { 
        width: 100%;
        flex: 1;
        border-bottom-width: 0.5px;
        border-bottom-color: #eeeeee;
        .refreh-text { 
          width: 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 { 
      width: 100%;
      flex: 1;
      flex-direction: column;
      padding-top: 15px;
      padding-bottom: 20px;
      .three_item_title { 
        width: 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 { 
        width: 100%;
        height: 385px;
        margin-bottom: 15px;
        justify-content: space-between;
        .three_imgs { 
          width: 100%;
          height: 385px;
          border-radius: 10px;
        }
        .default-bg { 
          background-color: rgba(0, 0, 0, 0.2);
        }
      }
      .three_item_footer { 
        width: 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-width: 1px;
            color: rgba(153, 153, 153, 1);
          }
          .active { 
            border-color: rgba(54, 151, 255, 1);
            border-width: 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 { 
          width: 48px;
          height: 34px;
          .close_img { 
            width: 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 { 
      width: 100%;
      flex: 1;
      flex-direction: row;
      justify-content: space-between;
      padding-top: 20px;
      padding-bottom: 20px;
      .news_single_title { 
        width: 435px;
        flex-direction: column;
        justify-content: space-between;
        .head { 
          width: 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-width: 1px;
              color: rgba(153, 153, 153, 1);
            }
            .active { 
              border-color: rgba(54, 151, 255, 1);
              border-width: 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 { 
            width: 48px;
            height: 34px;
            .close_img { 
              width: 48px;
              height: 34px;
            }
          }
        }
      }
      .news_single_img { 
        width: 225px;
        height: 150px;
        .single_img { 
          width: 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 { 
      width: 100%;
      flex: 1;
      flex-direction: column;
      padding-top: 15px;
      padding-bottom: 20px;
      /* 多图样式 */
      .three_item_title { 
        width: 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 { 
        width: 100%;
        height: 150px;
        margin-bottom: 15px;
        justify-content: space-between;
        .three_imgs { 
          width: 225px;
          height: 150px;
          border-radius: 6px;
        }
        .default-bg { 
          background-color: rgba(0, 0, 0, 0.2);
        }
      }
      .three_item_footer { 
        width: 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-width: 1px;
            color: rgba(153, 153, 153, 1);
          }
          .active { 
            border-color: rgba(54, 151, 255, 1);
            border-width: 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 { 
          width: 48px;
          height: 34px;
          .close_img { 
            width: 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>