更新记录
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>
<code class="language-javascript">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 。在线求打扰~