uniapp 评论表情功能

uniapp yekong 1032℃

uniapp开发时需要评论是需要一个表情功能,找了很久没找到合适了,只能找个类似的改改拿来用。
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>

组件下载

链接:组件下载

源组件

改自:app聊天模版+发送语音+图片+文字+表情+无闪动下拉加载数据

喜欢 (0)