Micro headline dynamic card

instructions

This component imitates Toutiao’s micro headlines, which is suitable for circle of friends, circle of friends’ dynamics, space talk, micro headlines, etc.

The component mainly consists of three parts: 1. Head picture, name, release time 2. Text content and picture content 3. Operation style of micro headlines, including digital display, highlighting.

This component automatically arranges the layout according to the available screen width. It can be adapted to various screens, multiple image layouts and.

The effect

Basic usage

Component reference UNIAPP part of the components, so have to lead into the UNIAPP component, if you do not use this function can import Grid Grid Icons icon

Use the component in the Template

    <Dynamic v-for="(item,index) in list" key="id" 
        :imgList="item.imgList" 
        :avatar="item.avatar"
        :name="item.name"
        :publishTime="item.publishTime"
        :content="item.content"
        :isLike="item.isLike"
        :isGiveReward="item.isGiveReward"
        :likeNumber="item.likeNumber"
        :giveRewardNumber="item.giveRewardNumber"
        :chatNumber="item.chatNumber"
        @clickDynamic="clickDynamic(index)"
        @clickUser="clickUser(item.id)"
        @clickFocus="clickFocus(index)"
        @clickThumbsup="clickThumbsup(item.id)"
        @clickGiveReward="clickGiveReward(item.id)"
        @clickChat="clickChat(item.id)">
    </Dynamic>

import Dynamic from '.. /.. /components/Dynamic/Dynamic.vue' export default { components: { Dynamic }, data() { return { title: 'Hello', list:[ { id:1, Avatar: 'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1950846641, & FM = 26 & gp = 0. 3729028697 JPG', name: "small new, PublishTime :1617086756 Content :' The Chinese diplomat mocked the Canadian Prime Minister, Is it cursing or not?" ImgList: [' https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1976832114, & FM = 26 & gp = 0. 2993359804 JPG ', 'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2369680151, & FM = 26 & gp = 0. 826506100 JPG',], isLike: true, isGiveReward:true, likeNumber:2, giveRewardNumber:2, chatNumber:2, isFocusOn:true, }, { id:2, Avatar: 'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2291332875, & FM = 26 & gp = 0. 175289127 JPG', name: 'white', PublishTime :1617036656, Content :' Cloud diagnosis by top experts in the field of nuclear medicine in China, "Zhongshan - Lianying" Molecular Imaging Remote Interconnection and Integration Innovation Center "inaugurated, ImgList: [' https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2369680151, & FM = 26 & gp = 0. 826506100 JPG ',]. isLike:false, isGiveReward:false, likeNumber:0, giveRewardNumber:0, chatNumber:2, isFocusOn:false, }, { id:3, Avatar: 'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1950846641, & FM = 26 & gp = 0. 3729028697 JPG', name: "small new, PublishTime :1617046556, Content :' Ministry of Foreign Affairs: A handful of countries and individuals fabricate stories about so-called "forced labor" in Xinjiang, The heart how poison also! ', imgList: [' https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1976832114, & FM = 26 & gp = 0. 2993359804 JPG ', 'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2369680151, & FM = 26 & gp = 0. 826506100 JPG', 'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1976832114, & FM = 26 & gp = 0. 2993359804 JPG', 'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1976832114, & FM = 26 & gp = 0. 2993359804 JPG', 'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1976832114, & FM = 26 & gp = 0. 2993359804 JPG',], isLike: true, isGiveReward:false, likeNumber:4, giveRewardNumber:22, chatNumber:52, }, { id:4, Avatar: 'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3717120934, & FM = 26 & gp = 0. 3932520698 JPG', name: 'little dragon horse, publishTime:1616086456, Content :' dCloud has 8 million developers, and UNI counts 1.2 billion monthly mobile users. It is a multi-terminal development framework with the largest number of developers and cases. Welcome well-known developers to submit cases or access UNI statistics. ImgList: [' https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2369680151, & FM = 26 & gp = 0. 826506100 JPG ', 'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1976832114, & FM = 26 & gp = 0. 2993359804 JPG', 'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2369680151, & FM = 26 & gp = 0. 826506100 JPG',], isLike: true, isGiveReward:false, likeNumber:25, giveRewardNumber:0, chatNumber:7, }, { id:5, Avatar: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2590128318, & FM = 26 & gp = 0. 632998727 JPG', name: "the breeze pure Yang", PublishTime :1607086356, Content :' Draw water ', ImgList: [' https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2369680151, & FM = 26 & gp = 0. 826506100 JPG ', 'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1976832114, & FM = 26 & gp = 0. 2993359804 JPG', 'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2369680151, & FM = 26 & gp = 0. 826506100 JPG', 'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1976832114, & FM = 26 & gp = 0. 2993359804 JPG',], isLike: true, isGiveReward:true, likeNumber:3, giveRewardNumber:2, chatNumber:2, } ] } }, methods:{ clickDynamic(e){ console.log('childDynamic'); }, // Click user info clickUser(e){console.log(e); console.log('childUser'); }, // ClickFocus (E){this.List [E]. IsFocusOn = this.List [E]. IsFocusOn? false : true; console.log(e); console.log('childUser'); }, // thumb up ClickThumbsup (e){console.log(e); console.log('childThumbsup'); }, // Click Rewarding ClickGiVereward (e){console.log(e); console.log('clickGiveReward'); }, // Click chat clickChat(e){console.log(e); console.log('clickChat'); }}}

API

Attributes that

Events that

The source file

Micro headline card

Supplement: If you have any questions, please contact wx: CHWLZGZ. Online for disturbing ~