tijiao
This commit is contained in:
541
components/qizai-dynamic/Dynamic.vue
Normal file
541
components/qizai-dynamic/Dynamic.vue
Normal file
@@ -0,0 +1,541 @@
|
||||
<template>
|
||||
<view class="dynamic" @click="clickDynamic()">
|
||||
<view class="user__container">
|
||||
<view class="user__header-warp">
|
||||
<!-- 头像组 -->
|
||||
<view class="user__header" @click.stop="clickUser()">
|
||||
<image
|
||||
v-if="avatar"
|
||||
:src="avatar"
|
||||
mode="aspectFill"
|
||||
class="user__header-image"
|
||||
></image>
|
||||
<image v-else
|
||||
src="/static/icon/noIcon.png"
|
||||
mode="aspectFill"
|
||||
class="user__header-image"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="user__content">
|
||||
<view class="user__content-main">
|
||||
<text
|
||||
class="user__content-title uni-ellipsis"
|
||||
@click.stop="clickUser()"
|
||||
>{{ name }}</text
|
||||
>
|
||||
<view style="display: flex; align-items: center"
|
||||
><text class="user__content-note uni-ellipsis">{{
|
||||
createTime
|
||||
}}</text>
|
||||
<view style="display: flex; align-items: center; color: #808080"
|
||||
><uni-icons
|
||||
type="eye"
|
||||
size="22"
|
||||
style="color: #808080; margin: 0 10rpx 0 30rpx"
|
||||
></uni-icons
|
||||
>{{ readCount }}</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<view class="user__content-extra">
|
||||
<!-- <slot>
|
||||
<text :class="isFocusOn?'user__focus-on':'user__focus-off'" @click.stop="clickFocus()">{{isFocusOn?'关注':'已关注' }}</text>
|
||||
</slot> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="padding: 0rpx 30rpx"
|
||||
>
|
||||
|
||||
<u-read-more showHeight="284" :toggle="true" color="#5a6988">
|
||||
<view class="title" style="text-indent: 0 !important;">{{ title }}</view>
|
||||
<rich-text
|
||||
:nodes="content"
|
||||
style="
|
||||
height: auto;
|
||||
color: #4b4b4b;
|
||||
margin-bottom: 40rpx;
|
||||
" /></u-read-more
|
||||
></view>
|
||||
|
||||
<view class="allImage">
|
||||
<view class="imgList">
|
||||
<view
|
||||
class="images"
|
||||
:class="`${imgList.length > 4 ? 'images3' : ''}`"
|
||||
v-for="(item, index) in imgList"
|
||||
:key="index"
|
||||
>
|
||||
<image
|
||||
@click.stop="previewImg(index)"
|
||||
class="oneimg"
|
||||
:src="item"
|
||||
mode="aspectFill"
|
||||
:style="{ width: imgWidth + 'px', 'max-height': imgHeight + 'px' }"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="likeList" v-if="likeList.length > 0" style="color: #5188e5" @click.stop="clickThumbsup('likeList')">
|
||||
|
||||
<uni-icons
|
||||
type="heart"
|
||||
size="20"
|
||||
style="color: #5188e5; margin-right: 10rpx"
|
||||
></uni-icons
|
||||
>
|
||||
<view class="hidden2">{{ likeList.map(item => item.user.nickname?item.user.nickname:'普通用户').join(' , ') }}</view>
|
||||
|
||||
|
||||
</view>
|
||||
<view class="operate" style="width: 100%">
|
||||
<view
|
||||
@click.stop="clickThumbsup('like')"
|
||||
style="display: flex; align-items: center; color: #9a9a9a"
|
||||
>
|
||||
<uni-icons
|
||||
type="hand-up-filled"
|
||||
size="24"
|
||||
style="color: #9a9a9a; margin-right: 10rpx"
|
||||
:style="{ color: thumbsupColor }"
|
||||
></uni-icons
|
||||
>{{ likeCount ? likeCount : "0" }}
|
||||
</view>
|
||||
<view
|
||||
style="display: flex; align-items: center; color: #9a9a9a"
|
||||
@click.stop="clickThumbsup('pinglun')"
|
||||
><uni-icons
|
||||
type="chat-filled"
|
||||
size="24"
|
||||
style="color: #9a9a9a; margin-right: 10rpx"
|
||||
></uni-icons
|
||||
>{{ commentCount ? commentCount : "0" }}</view
|
||||
>
|
||||
|
||||
<view
|
||||
@click.stop="clickThumbsup()"
|
||||
style="display: flex; align-items: center; color: #5188e5"
|
||||
>
|
||||
<uni-icons
|
||||
type="redo-filled"
|
||||
size="24"
|
||||
style="color: #5188e5; margin-right: 10rpx"
|
||||
></uni-icons
|
||||
>分享
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom-line"></view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
props: {
|
||||
avatar: {
|
||||
type: String,
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
},
|
||||
createTime: {
|
||||
type: String,
|
||||
},
|
||||
isFocusOn: {
|
||||
type: Boolean,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
},
|
||||
imgList: {
|
||||
type: Array,
|
||||
},
|
||||
isLike: {
|
||||
type: Number,
|
||||
},
|
||||
isGiveReward: {
|
||||
type: Boolean,
|
||||
},
|
||||
likeCount: {
|
||||
type: Number,
|
||||
},
|
||||
readCount: {
|
||||
type: Number,
|
||||
},
|
||||
giveRewardNumber: {
|
||||
type: Number,
|
||||
},
|
||||
commentCount: {
|
||||
type: Number,
|
||||
},
|
||||
userNoShow: {
|
||||
type: Boolean,
|
||||
},
|
||||
operateNoShow: {
|
||||
type: Boolean,
|
||||
},
|
||||
likeList: {
|
||||
type: Array,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
isLike(newVal, oldVal) {
|
||||
console.log("newVal at line 163:", newVal);
|
||||
this.initOperate();
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
emptyAvatar: "/static/icon/noIcon.png",
|
||||
windowWidth: 0, //屏幕可用宽度
|
||||
windowHeight: 0, //屏幕可用高度
|
||||
imgWidth: 0, //图片宽度
|
||||
imgHeight: 0, //图片高度
|
||||
thumbsupColor: "#9a9a9a",
|
||||
heartColor: "#9a9a9a",
|
||||
userDisplay: "block",
|
||||
operateDisplay: "block",
|
||||
shadowStyle: {
|
||||
// #ifndef APP-NVUE
|
||||
backgroundImage:
|
||||
"linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
// nvue上不支持设置复杂的backgroundImage属性
|
||||
backgroundImage:
|
||||
"linear-gradient(to top, #fff, rgba(255, 255, 255, 0.5))",
|
||||
// #endif
|
||||
paddingTop: "100px",
|
||||
marginTop: "-100px",
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const res = uni.getSystemInfoSync();
|
||||
this.windowHeight = res.windowHeight;
|
||||
this.windowWidth = res.windowWidth;
|
||||
|
||||
if (this.userNoShow) {
|
||||
this.userDisplay = "none";
|
||||
}
|
||||
console.log(this.operateNoShow);
|
||||
if (this.operateNoShow) {
|
||||
this.operateDisplay = "none";
|
||||
}
|
||||
|
||||
this.judgeImg();
|
||||
this.initOperate();
|
||||
},
|
||||
methods: {
|
||||
// 预览图片
|
||||
previewImg(index) {
|
||||
uni.previewImage({
|
||||
urls: this.imgList,
|
||||
// longPressActions: {
|
||||
// itemList: ["保存图片"],
|
||||
// },
|
||||
current: index, // 设置当前预览的图片索引
|
||||
});
|
||||
},
|
||||
initOperate() {
|
||||
this.thumbsupColor = this.isLike ? "#fd514f" : "#9a9a9a";
|
||||
if (this.isGiveReward) this.heartColor = "#fd514f";
|
||||
},
|
||||
// 自适应判断
|
||||
judgeImg() {
|
||||
if (this.imgList.length == 1) {
|
||||
this.imgWidth = (this.windowWidth * 2) / 3;
|
||||
this.imgHeight = (this.windowHeight * 3) / 5;
|
||||
} else if (this.imgList.length == 4) {
|
||||
this.imgWidth = this.windowWidth / 3.3;
|
||||
this.imgHeight = this.imgWidth;
|
||||
} else {
|
||||
this.imgWidth = this.windowWidth / 3.4;
|
||||
this.imgHeight = this.imgWidth;
|
||||
}
|
||||
},
|
||||
timestampFormat(timestamp) {
|
||||
if (!timestamp) return "";
|
||||
function zeroize(num) {
|
||||
return (String(num).length == 1 ? "0" : "") + num;
|
||||
}
|
||||
|
||||
var curTimestamp = parseInt(new Date().getTime() / 1000); //当前时间戳
|
||||
var timestampDiff = curTimestamp - timestamp; // 参数时间戳与当前时间戳相差秒数
|
||||
|
||||
var curDate = new Date(curTimestamp * 1000); // 当前时间日期对象
|
||||
var tmDate = new Date(timestamp * 1000); // 参数时间戳转换成的日期对象
|
||||
|
||||
var Y = tmDate.getFullYear(),
|
||||
m = tmDate.getMonth() + 1,
|
||||
d = tmDate.getDate();
|
||||
var H = tmDate.getHours(),
|
||||
i = tmDate.getMinutes(),
|
||||
s = tmDate.getSeconds();
|
||||
|
||||
if (timestampDiff < 60) {
|
||||
// 一分钟以内
|
||||
return "刚刚";
|
||||
} else if (timestampDiff < 3600) {
|
||||
// 一小时前之内
|
||||
return Math.floor(timestampDiff / 60) + "分钟前";
|
||||
} else if (
|
||||
curDate.getFullYear() == Y &&
|
||||
curDate.getMonth() + 1 == m &&
|
||||
curDate.getDate() == d
|
||||
) {
|
||||
return "今天" + zeroize(H) + ":" + zeroize(i);
|
||||
} else {
|
||||
var newDate = new Date((curTimestamp - 86400) * 1000); // 参数中的时间戳加一天转换成的日期对象
|
||||
if (
|
||||
newDate.getFullYear() == Y &&
|
||||
newDate.getMonth() + 1 == m &&
|
||||
newDate.getDate() == d
|
||||
) {
|
||||
return "昨天" + zeroize(H) + ":" + zeroize(i);
|
||||
} else if (curDate.getFullYear() == Y) {
|
||||
return (
|
||||
zeroize(m) +
|
||||
"月" +
|
||||
zeroize(d) +
|
||||
"日 " +
|
||||
zeroize(H) +
|
||||
":" +
|
||||
zeroize(i)
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
Y +
|
||||
"年" +
|
||||
zeroize(m) +
|
||||
"月" +
|
||||
zeroize(d) +
|
||||
"日 " +
|
||||
zeroize(H) +
|
||||
":" +
|
||||
zeroize(i)
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/** 触发父级事件 */
|
||||
// 点击动态
|
||||
clickDynamic() {
|
||||
this.$emit("clickDynamic");
|
||||
},
|
||||
// 点击用户信息
|
||||
clickUser() {
|
||||
this.$emit("clickUser");
|
||||
},
|
||||
// 点击关注
|
||||
clickFocus() {
|
||||
this.$emit("clickFocus");
|
||||
},
|
||||
// 点赞
|
||||
clickThumbsup(type) {
|
||||
this.$emit("clickThumbsup", type);
|
||||
},
|
||||
// 点击打赏
|
||||
clickGiveReward() {
|
||||
this.$emit("clickGiveReward");
|
||||
},
|
||||
// 点击聊天
|
||||
clickChat() {
|
||||
this.$emit("clickChat");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 想法图片排列样式 */
|
||||
.uni-list-chat__content-extra-text {
|
||||
color: #007aff;
|
||||
}
|
||||
.dynamic {
|
||||
width: 100%;
|
||||
}
|
||||
.allImage {
|
||||
display: flex;
|
||||
margin-top: 10rpx;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.imgList {
|
||||
margin: 20rpx 30rpx;
|
||||
}
|
||||
.images:not(:nth-child(3n)) {
|
||||
/* margin-right: 10rpx; */
|
||||
}
|
||||
.text {
|
||||
margin: 1% 3% 2%;
|
||||
}
|
||||
.images {
|
||||
margin-right: 10rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
.images3:nth-child(3n) {
|
||||
margin-right: 0rpx;
|
||||
}
|
||||
.operate {
|
||||
width: 94%;
|
||||
padding: 10rpx 0;
|
||||
margin-top: 10rpx;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #e9f0ff73;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.chat-custom-right {
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.chat-custom-text {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
.bottom-line {
|
||||
border-bottom: 4px solid #efefef;
|
||||
}
|
||||
|
||||
.user__container {
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
/* -webkit-flex-direction: row; */
|
||||
flex-direction: row;
|
||||
-webkit-box-flex: 1;
|
||||
/* -webkit-flex: 1; */
|
||||
flex: 1;
|
||||
padding: 10px 15px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.user__header {
|
||||
display: flex;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
|
||||
overflow: hidden;
|
||||
border-radius: 120rpx;
|
||||
}
|
||||
.user__header-image {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
flex-direction: row;
|
||||
-webkit-box-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap-reverse;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 100rpx;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
.user__content {
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
flex-direction: row;
|
||||
-webkit-box-flex: 1;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding: 2px 0;
|
||||
}
|
||||
.user__content-main {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
padding-left: 20rpx;
|
||||
padding-top: 6rpx;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.user__content-note {
|
||||
margin-top: 3px;
|
||||
color: #aaacab;
|
||||
font-size: 26rpx;
|
||||
letter-spacing: 1rpx;
|
||||
font-weight: normal;
|
||||
overflow: hidden;
|
||||
}
|
||||
.user__focus-on {
|
||||
padding: 3px 10px;
|
||||
border: 1px solid #fb5f5f;
|
||||
color: #fb5f5f;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.user__focus-off {
|
||||
padding: 3px;
|
||||
color: gray;
|
||||
font-size: 14px;
|
||||
}
|
||||
.title {
|
||||
text-align: justify;
|
||||
color: #292929;
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.user__content-title {
|
||||
color: #5a6988;
|
||||
font-weight: 600;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
::v-deep rich-text {
|
||||
text-align: justify;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
::v-deep rich-text p {
|
||||
text-indent: 0 !important;
|
||||
}
|
||||
.likeList{
|
||||
background: #f7f7f7;
|
||||
border-radius: 4rpx;
|
||||
padding: 8rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
margin: 20rpx 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.hidden2{
|
||||
line-height: 24px;
|
||||
max-height: 120px;
|
||||
-webkit-line-clamp: 5;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
212
components/qizai-dynamic/license.md
Normal file
212
components/qizai-dynamic/license.md
Normal file
@@ -0,0 +1,212 @@
|
||||
# 微头条动态卡片
|
||||
|
||||
## 说明
|
||||
|
||||
本组件仿写今日头条的微头条，适用于朋友圈，朋友圈动态，空间说说，微头条等。
|
||||
|
||||
组件主要包含三部分
|
||||
1.头像，名称，发布时间
|
||||
2.文字内容，图片内容
|
||||
3.对微头条的操作样式，包含数字显示，高亮显示。
|
||||
|
||||
图片说明：本组件根据可用屏幕高宽度自动排列布局，可适应各种屏幕，多张图片布局和。
|
||||
|
||||
|
||||
## 基本用法
|
||||
|
||||
组件引用了uniapp部分组件，所以得先导入uniapp组件,如果用不到该功能可不导入
|
||||
[Grid 宫格](https://ext.dcloud.net.cn/plugin?id=27)
|
||||
[Icons 图标](https://ext.dcloud.net.cn/plugin?id=28)
|
||||
|
||||
在template中使用组件
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
|
||||
|
||||
```javascript
|
||||
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,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 | 点击评论触发 | null | 按传参原值返回 |
|
||||
|
||||
|
||||
补充：有任何问题联系wx：chwlzgz 。在线求打扰~
|
||||
Reference in New Issue
Block a user