更新记录

2.0.0（2021-04-03）下载此版本

更新了原链接模块

1.0.0（2021-04-03）下载此版本

1.0.0

平台兼容性

Vue2	Vue3
√	×

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
HBuilderX 3.1.0 app-vue app-nvue	√	√	√	√	√	√

钉钉小程序	快手小程序	飞书小程序	京东小程序
×	×	×	×

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
√	√	√	√	√	√	√	√	√

微头条动态卡片

说明

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

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

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

基本用法

在template中使用组件

<qizai9527-dynamic v-for="(item,index) in list" :key="item.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"

    :sourceShow="true"
    :sourceTitle="sourceTitle"
    :sourceImg="sourceImg"
    :sourceAuthor="sourceAuthor"

    @clickDynamic="clickDynamic(index)"
    @clickUser="clickUser(item.id)"
    @clickFocus="clickFocus(index)"
    @clickThumbsup="clickThumbsup(item.id)"
    @clickGiveReward="clickGiveReward(item.id)"
    @clickChat="clickChat(item.id)"
    @clickSource="clickSource(id)>
</qizai9527-dynamic>

export default {
    data() {
        return {
            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,

                    sourceShow:true,
                    sourceTitle:'中国外交官这样讽加拿大总理，算不算骂？该不该骂？',
                    sourceAuthor:'哇妈妈',
                    sourceImg:'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1976832114,2993359804&fm=26&gp=0.jpg',

                },

                {
                    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');
        },
        // 点击原连接
        clickSource(e){
            console.log(e);
        },
    }
}

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	是否不显示操作信息。
sourceShow	Boolean	null	是否显示原链接
sourceTitle	String	null	原链接标题
sourceImg	String	null	原链接图片
sourceAuthor	String	null	原链接作者

事件说明

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

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

微头条动态卡片朋友圈 动态 说说 微头条 卡片

更新记录

2.0.0（2021-04-03）下载此版本

1.0.0（2021-04-03）下载此版本

平台兼容性

微头条动态卡片

说明

基本用法

API

隐私、权限声明

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

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

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

许可协议

MIT协议

微头条动态卡片，类似朋友圈，qq说说，微头条，实现多张图片自适应排列布局

微头条动态卡片

评论输入框（带记忆功能）

评论列表

双列瀑布卡片列表

微头条动态卡片 朋友圈 动态 说说 微头条 卡片

更新记录

2.0.0（2021-04-03） 下载此版本

1.0.0（2021-04-03） 下载此版本

平台兼容性

微头条动态卡片

说明

基本用法

API

隐私、权限声明

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

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

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

许可协议

MIT协议

微头条动态卡片，类似朋友圈，qq说说，微头条，实现多张图片自适应排列布局

微头条动态卡片

评论输入框（带记忆功能）

评论列表

双列瀑布卡片列表

Modal title

微头条动态卡片朋友圈动态说说微头条卡片

2.0.0（2021-04-03）下载此版本

1.0.0（2021-04-03）下载此版本