uniapp开发时需要评论是需要一个表情功能，找了很久没找到合适了，只能找个类似的改改拿来用。
代码
<template>
<view class="flex-col section_1s">
<view class="justify-center group">
<text>999条评论</text>
<image @click="goclose" src="/static/remote/c018bfc6cd310830396944f22f884359.png" class="image_1" />
</view>
<scroll-view id="scrollview" class="list" :scroll-top="scrollTop" :class="{list2:emojiList.lenth>0}" scroll-y
scroll-with-animation>
<view id="msglistview">
<view class="list-item flex-col group_1" v-for="(item,index) in list" :key="index">
<view class="flex-row">
<image src="/static/remote/c16429791f74c40fc976c296c58a6a32.png" class="image_2" />
<view class="center-group flex-col">
<text class="text_1">{{item.user}}</text>
<text class="text_3">{{item.desc}}</text>
</view>
<view @click="getlike(index)" class="flex-col right-group">
<u-icon size="20" v-if="item.like" color="yellow" name="heart-fill"></u-icon>
<u-icon size="20" v-else color="#919398" name="heart-fill"></u-icon>
<text class="text_5">{{item.num}}</text>
</view>
</view>
<view class="bottom-group flex-row">
<text class="text_7">{{item.time}}</text>
<text class="text_9">回复</text>
</view>
</view>
</view>
</scroll-view>
<div class="group_7">
<view class="flex-row">
<view class="justify-between section_2">
<textarea v-model="textareaVal" :hideDoneButton="true" @keyboard="keyboardInput" ref="textareaRef"
:autofocus="false" @linechange="texTlinechange" class="textarea_input" @focus="textareaFocus"
@blur="textareaBlur" type="text" :adjust-position="true" />
<image @click="clickEmoj('clickEmoj',0)"
src="/static/remote/4132fbb6296b0f11005adebb8854dbc3.png" class="image_9" />
</view>
<image @click="fasong" src="/static/16393946315914918049.png" class="image_10" />
</view>
<div class="emojis" v-if="emojiList.length>0 && keyboardHeightFlg">
<emoji-box @setEmoj="setEmoj" :emojiList="emojiList"></emoji-box>
</div>
</div>
</view>
</template>
<script>
import emojiBox from "@/components/emoj/components/emoj.vue"
import chats from "@/components/emoj/mixins/chat.js"
import moment from 'moment'
export default {
components: {
emojiBox,
},
mixins: [chats],
data() {
return {
scrollTop: 0,
list: [{
'user': 'Jonas gegw',
'desc': '路边摊买的，你根本就不知道它是什么牌子，我对品牌也不是很了解，根本就不知道什么所谓的爱马仕',
'num': 90,
'time': '2021-12-12 18:16:23',
'like': true
}, {
'user': 'Jonas gegw',
'desc': '路边摊买的，你根本就不知道它是什么牌子，我对品牌也不是很了解，根本就不知道什么所谓的爱马仕',
'num': 90,
'time': '2021-12-12 18:16:23',
'like': true
}, {
'user': 'Jonas gegw',
'desc': '路边摊买的，你根本就不知道它是什么牌子，我对品牌也不是很了解，根本就不知道什么所谓的爱马仕',
'num': 90,
'time': '2021-12-12 18:16:23',
'like': true
}, {
'user': 'Jonas gegw',
'desc': '路边摊买的，你根本就不知道它是什么牌子，我对品牌也不是很了解，根本就不知道什么所谓的爱马仕',
'num': 90,
'time': '2021-12-12 18:16:23',
'like': true
}, {
'user': 'Jonas gegw',
'desc': '路边摊买的，你根本就不知道它是什么牌子，我对品牌也不是很了解，根本就不知道什么所谓的爱马仕',
'num': 90,
'time': '2021-12-12 18:16:23',
'like': true
}, {
'user': 'Jonas gegw',
'desc': '路边摊买的，你根本就不知道它是什么牌子，我对品牌也不是很了解，根本就不知道什么所谓的爱马仕',
'num': 90,
'time': '2021-12-12 18:16:23',
'like': true
}, {
'user': 'Jonas gegw',
'desc': '路边摊买的，你根本就不知道它是什么牌子，我对品牌也不是很了解，根本就不知道什么所谓的爱马仕',
'num': 90,
'time': '2021-12-12 18:16:23',
'like': true
}, {
'user': 'Jonas gegw',
'desc': '路边摊买的，你根本就不知道它是什么牌子，我对品牌也不是很了解，根本就不知道什么所谓的爱马仕',
'num': 90,
'time': '2021-12-12 18:16:23',
'like': true
}, {
'user': 'Jonas gegw',
'desc': '路边摊买的，你根本就不知道它是什么牌子，我对品牌也不是很了解，根本就不知道什么所谓的爱马仕',
'num': 90,
'time': '2021-12-12 18:16:23',
'like': true
}, {
'user': 'Jonas gegw',
'desc': '路边摊买的，你根本就不知道它是什么牌子，我对品牌也不是很了解，根本就不知道什么所谓的爱马仕',
'num': 90,
'time': '2021-12-12 18:16:23',
'like': true
}, {
'user': 'Jonas gegw',
'desc': '路边摊买的，你根本就不知道它是什么牌子，我对品牌也不是很了解，根本就不知道什么所谓的爱马仕',
'num': 90,
'time': '2021-12-12 18:16:23',
'like': true
}, {
'user': 'Jonas gegw',
'desc': '路边摊买的，你根本就不知道它是什么牌子，我对品牌也不是很了解，根本就不知道什么所谓的爱马仕',
'num': 90,
'time': '2021-12-12 18:16:23',
'like': true
}, {
'user': 'Jonas gegw',
'desc': '路边摊买的，你根本就不知道它是什么牌子，我对品牌也不是很了解，根本就不知道什么所谓的爱马仕',
'num': 90,
'time': '2021-12-12 18:16:23',
'like': true
}, ]
};
},
mounted() {
},
methods: {
scrollToBottom() {
let that = this
let query = uni.createSelectorQuery()
query.select('#scrollview').boundingClientRect()
query.select('#msglistview').boundingClientRect()
query.exec((res) => {
// console.log(res)
console.log(res)
//获取所有内部子元素的高度
//判断子元素高度是否大于显示高度
if (res[1].height > res[0].height) {
// 用子元素的高度减去显示的高度就获益获得滚动的高度
that.scrollTop = res[1].height - res[0].height
}
})
},
goclose() {
this.$emit('gethide', 0)
},
fasong() {
var data = {
'user': 'Jonas gegw',
'desc': '',
'num': 90,
'time': moment().format("YYYY-MM-DD HH:mm:ss"),
'like': false
}
data.desc = this.textareaVal
this.list.push(data)
this.textareaVal = ''
this.$nextTick(() => {
this.scrollToBottom()
})
},
getlike(index) {
this.list[index].like = !this.list[index].like
this.$forceUpdate()
},
clickMsg(e) {
console.log(e)
}
}
};
</script>
<style lang="scss" scoped>
.section_1s {
padding: 42rpx 20rpx 48rpx 49rpx;
border-radius: 0px;
background-color: rgb(255, 255, 255);
left: 0;
width: 750rpx;
right: 0;
.group {
padding: 0 31rpx 3rpx;
color: rgb(34, 34, 34);
font-size: 26rpx;
line-height: 26rpx;
white-space: nowrap;
position: relative;
.image_1 {
position: absolute;
right: 31rpx;
top: 50%;
transform: translateY(-50%);
width: 29rpx;
height: 29rpx;
}
}
.list2 {
height: 200rpx;
}
.list {
margin-top: 71rpx;
padding-bottom: 50rpx;
height: 500rpx;
.list-item {
margin-top: 58rpx;
.bottom-group {
margin-top: 37rpx;
padding: 0 119rpx;
.text_7 {
margin: 3rpx 0;
color: rgb(153, 153, 153);
font-size: 24rpx;
line-height: 19rpx;
white-space: nowrap;
}
.text_9 {
margin-left: 24rpx;
color: rgb(153, 153, 153);
font-size: 24rpx;
line-height: 25rpx;
white-space: nowrap;
}
}
.image_2 {
width: 97rpx;
height: 97rpx;
}
.center-group {
margin-left: 20rpx;
margin-top: 9rpx;
flex: 1 1 auto;
.text_1 {
color: rgb(153, 153, 153);
font-size: 26rpx;
line-height: 27rpx;
white-space: nowrap;
}
.text_3 {
margin-top: 10rpx;
color: rgb(0, 0, 0);
font-size: 20rpx;
line-height: 24rpx;
}
}
.right-group {
margin-left: 40rpx;
margin-top: 47rpx;
color: rgb(153, 153, 153);
font-size: 24rpx;
line-height: 18rpx;
white-space: nowrap;
width: 65rpx;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: column;
.icon_1 {
width: 35rpx;
height: 30rpx;
}
.text_5 {
margin-left: 5rpx;
margin-top: 13rpx;
}
}
}
.group_1 {
margin-top: initial;
}
.group_5 {
margin-top: 57rpx;
}
}
.group_7 {
color: rgb(153, 153, 153);
font-size: 24rpx;
line-height: 24rpx;
// position: absolute;
// bottom: 0rpx;
padding-bottom: 20rpx;
width: 750rpx;
background: #fff;
.section_2 {
padding: 27rpx 26rpx 24rpx 45rpx;
width: 563rpx;
background-color: rgb(255, 255, 255);
border-radius: 50rpx;
height: 102rpx;
border: solid 2rpx rgb(24, 24, 24);
.text_21 {
align-self: center;
}
.image_9 {
width: 47rpx;
height: 47rpx;
}
}
.image_10 {
margin-left: 37rpx;
align-self: center;
width: 80rpx;
height: 80rpx;
}
}
}
.emojis {
background: #fff;
width: 750rpx;
}
.textarea_input {
height: 50rpx;
color: #000;
}
</style>
组件下载
链接:组件下载
