更新记录

1.0.1（2021-03-30）（2021-03-30） 下载此版本

首次提交

平台兼容性

Vue2 Vue3
√ ×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue app-nvue √ √ √ √ √ √
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
√ √ √ √ √ √ √ √ √

微头条动态卡片

说明

本组件仿写今日头条的微头条，适用于朋友圈，朋友圈动态，空间说说，微头条等。

组件主要包含三部分 1.头像，名称，发布时间 2.文字内容，图片内容 3.对微头条的操作样式，包含数字显示，高亮显示。

图片说明：本组件根据可用屏幕高宽度自动排列布局，可适应各种屏幕，多张图片布局和。

基本用法

组件引用了uniapp部分组件，所以得先导入uniapp组件,如果用不到该功能可不导入 Grid 宫格 Icons 图标

在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/qizai-dynamic/Dynamic.vue'
export default {
    components: {
        Dynamic
    },
    data() {
        return {
            title: 'Hello',
            list:[
                {
                    id:1,
                    avatar:'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1950846641,3729028697&fm=26&gp=0.jpg',
                    name:'小新',
                    publishTime:1617086756,
                    content:'中国外交官这样讽加拿大总理，算不算骂？该不该骂？',
                    imgList:[
                        'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1976832114,2993359804&fm=26&gp=0.jpg',
                        'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2369680151,826506100&fm=26&gp=0.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,175289127&fm=26&gp=0.jpg',
                    name:'小白',
                    publishTime:1617036656,
                    content:'  足不出户享国内核医学领域顶级专家云诊断，“中山-联影”分子影像远程互联融合创新中心揭牌 ',
                    imgList:[
                        'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2369680151,826506100&fm=26&gp=0.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,3729028697&fm=26&gp=0.jpg',
                    name:'小新',
                    publishTime:1617046556,
                    content:'  外交部：一小撮国家和个人编造所谓新疆“强迫劳动”的故事，其心何其毒也！ ',
                    imgList:[
                        'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1976832114,2993359804&fm=26&gp=0.jpg',
                        'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2369680151,826506100&fm=26&gp=0.jpg',
                        'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1976832114,2993359804&fm=26&gp=0.jpg',
                        'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1976832114,2993359804&fm=26&gp=0.jpg',
                        'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1976832114,2993359804&fm=26&gp=0.jpg',
                    ],
                    isLike:true,
                    isGiveReward:false,
                    likeNumber:4,
                    giveRewardNumber:22,
                    chatNumber:52,
                },
                {
                    id:4,
                    avatar:'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3717120934,3932520698&fm=26&gp=0.jpg',
                    name:'小龙马',
                    publishTime:1616086456,
                    content:'DCloud有800万开发者,uni统计手机端月活12亿。是开发者数量和案例最丰富的多端开发框架。 欢迎知名开发商提交案例或接入uni统计。 新冠抗疫专区案例 uni-app助力',
                    imgList:[
                        'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2369680151,826506100&fm=26&gp=0.jpg',
                        'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1976832114,2993359804&fm=26&gp=0.jpg',
                        'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2369680151,826506100&fm=26&gp=0.jpg',
                    ],
                    isLike:true,
                    isGiveReward:false,
                    likeNumber:25,
                    giveRewardNumber:0,
                    chatNumber:7,
                },
                {
                    id:5,
                    avatar:'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2590128318,632998727&fm=26&gp=0.jpg',
                    name:'风清扬',
                    publishTime:1607086356,
                    content:'划个水',
                    imgList:[
                        'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2369680151,826506100&fm=26&gp=0.jpg',
                        'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1976832114,2993359804&fm=26&gp=0.jpg',
                        'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2369680151,826506100&fm=26&gp=0.jpg',
                        'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1976832114,2993359804&fm=26&gp=0.jpg',
                    ],
                    isLike:true,
                    isGiveReward:true,
                    likeNumber:3,
                    giveRewardNumber:2,
                    chatNumber:2,
                }
        ]
        }
    },
    methods:{
        clickDynamic(e){
            console.log('childDynamic');
        },
        // 点击用户信息
        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');
        },
        // 点赞
        clickThumbsup(e){
            console.log(e);
            console.log('childThumbsup');
        },
        // 点击打赏
        clickGiveReward(e){
            console.log(e);
            console.log('clickGiveReward');
        },
        // 点击聊天
        clickChat(e){
            console.log(e);
            console.log('clickChat');
        }
    }
}

API

属性说明

属性名 类型 默认值 说明
avatar String null 头像路径
name String null 名称
publishTime Number null 发布时间
isFocusOn Boolean null 是否已关注。
content String null 内容
imgList Array null 显示的图片路径列表
isLike Boolean null 是否已点赞，已点赞会高亮显示
isGiveReward Boolean null 是否已打赏，已打赏会高亮显示
likeNumber Boolean null 点赞数
giveRewardNumber Number null 打赏数
chatNumber Number null 评论数
chatNumber Number null 评论数
userNoShow Boolean null 是否不显示用户信息。包括头像，名称，发布时间
operateNoShow Boolean null 是否不显示操作信息。

事件说明

事件名 说明 返回值
@clickDynamic 点击动态触发 按传参原值返回
@clickUser 点击用户信息触发。包括头像，名称 按传参原值返回
@clickFocus 点击关注触发 按传参原值返回
@clickThumbsup 点赞触发 按传参原值返回
@clickGiveReward 点击打赏触发 按传参原值返回
@clickChat 点击评论触发 按传参原值返回

补充：有任何问题联系wx：chwlzgz 。在线求打扰~

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...