快应用信息流列表组件

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 = falsereturn}this.$emit('navFun', { itemData: item, itemIndex: this.itemIndex })},showMask(item) {this.isStop = truethis.$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 = falsereturn}this.$emit('navFun', { itemData: item, itemIndex: this.itemIndex })},showMask(item) {this.isStop = truethis.$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 = falsereturn}this.$emit('navFun', { itemData: item, itemIndex: this.itemIndex })},showMask(item) {this.isStop = truethis.$emit('showMask', { itemData: item, itemIndex: this.itemIndex })}
}
</script>

快应用信息流列表组件相关推荐

.NET平台开源项目速览-最快的对象映射组件Tiny Mapper之项目实践
晚上浏览博客园看到一篇非常实用的博客:.NET平台开源项目速览(14)最快的对象映射组件Tiny Mapper,花了10分钟简单了解了一下. 看评论也是挺有价值,同时也看到许多新手同学问道在实际项目 ...
GitChat · 移动开发 | 征服React Native—列表组件
GitChat 作者:Li Luo 原文:征服React Native-列表组件关注公众号:GitChat 技术杂谈,一本正经的讲技术前言移动应用往往受限于屏幕大小,而数据内容长度的不确定性,在 ...
axure按钮切换颜色_如何用Axure画出Web产品的列表组件：基础画法
Web产品的列表组件在画原型的时候比较常见,所以PM有必要深入了解它的各种交互效果和对应的原型画法. 除了通过表格来画出简单列表之外,我们还可以通过中继器来画出列表,相应的原型效果请查看https:/ ...
Android精通：View与ViewGroup，LinearLayout线性布局，RelativeLayout相对布局，ListView列表组件...
UI的描述对于Android应用程序中,所有用户界面元素都是由View和ViewGroup对象构建的.View是绘制在屏幕上能与用户进行交互的一个对象.而对于ViewGroup来说,则是一个用于存放 ...
.NET平台开源项目速览(14)最快的对象映射组件Tiny Mapper
好久没有写文章,工作甚忙,但每日还是关注.NET领域的开源项目.五一休息,放松了一下之后,今天就给大家介绍一个轻量级的对象映射工具Tiny Mapper:号称是.NET平台最快的对象映射组件.那就一起 ...
java 列表组件_Jsp页面列表组件框架设计
一起学习 Jsp页面列表组件框架设计作者:李俊杰概述为了提高开发效率,减少重复的页面多次开发,提高系统的可配置性和代码的可复用性,也是为了展示struts.hibernate框架,设计原则是降低 ...
精通android布局,Android精通：View与ViewGroup，LinearLayout线性布局，RelativeLayout相对布局，ListView列表组件...
标题图 UI的描述对于Android应用程序中,所有用户界面元素都是由View和ViewGroup对象构建的.View是绘制在屏幕上能与用户进行交互的一个对象.而对于ViewGroup来说,则是一个 ...
树型列表结构宽度调整_如何用Axure画出Web产品的列表组件：基础画法
Web产品的列表组件在画原型的时候比较常见,所以PM有必要深入了解它的各种交互效果和对应的原型画法. 除了通过表格来画出简单列表之外,我们还可以通过中继器来画出列表,相应的原型效果请查看https:/ ...
MUI 列表组件：文字居左中右（排版） - 代码篇
MUI 列表组件:文字居 - 代码篇添加 .mui-text-left类,控制list:列表的文字居中排布问题. 效果图: 代码如下: <ul class="mui-table-vi ...

快应用信息流列表组件

快应用信息流列表组件相关推荐

最新文章

热门文章