快应用信息流列表组件
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=>m=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>
