uni-app实现emoj表情包发送【手搓有效】

本文实现了在uniapp项目开发中和小程序，详细的使用emoji表情包，Emoji 表情大全

上代码！！！！
html结构
 

<template>
	<view style="margin-right: 10rpx; margin-left: 20rpx; height: 446rpx;">
		<swiper :current="swiperIndex" style="height: 100%;" @change="swiperChange" :indicator-dots="true">
			<swiper-item v-for="(items, index) in emojData" :key="index">
				<view class="emoj-container">
					<view class="emoj-row">
						<view class="emoj-parent" v-for="(item, i) in items" :key="i" hover-class="checkActive"
							hover-stay-time="100" @click="tuchEmoj(item)">
							<text class="emoj-conn">{{ item }}</text>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

js结构
 

<script>
	export default {
		data() {
			return {
				emojData: [
					['😁', '😀', '😃', '😄', '😁', '😆', '😀', '😃', '😄', '😁', '😆', '😀',
						'😃', '😄', '😁', '😆', '😀', '😃', '😄', '😁', '😆', '😀', '😃', '😄', '😁', '😆', '😀', '😃',
						'😄', '😁', '😆', '😆'
					],
					['😁', '😀', '😃', '😄', '😁', '😆', '😀', '😃', '😄', '😁', '😆', '😀',
						'😃', '😄', '😁', '😆', '😀', '😃', '😄', '😁', '😆', '😀', '😃', '😄', '😁', '😆', '😀', '😃',
						'😄', '😁', '😆', '😆'
					],
					['😁', '😀', '😃', '😄', '😁', '😆', '😀', '😃', '😄', '😁', '😆', '😀',
						'😃', '😄', '😁', '😆', '😀', '😃', '😄', '😁', '😆', '😀', '😃', '😄', '😁', '😆', '😀', '😃',
						'😄', '😁', '😆', '😆'
					],
					['😁', '😀', '😃', '😄', '😁', '😆', '😀', '😃', '😄', '😁', '😆', '😀',
						'😃', '😄', '😁', '😆', '😀', '😃', '😄', '😁', '😆', '😀', '😃', '😄', '😁', '😆', '😀', '😃',
						'😄', '😁', '😆', '😆'
					],
					['😁', '😀', '😃', '😄', '😁', '😆', '😀', '😃', '😄', '😁', '😆', '😀',
						'😃', '😄', '😁', '😆', '😀', '😃', '😄', '😁', '😆', '😀', '😃', '😄', '😁', '😆', '😀', '😃',
						'😄', '😁', '😆', '😆'
					],
				],
				swiperIndex: 0, // 初始 swiper 索引
				selectedEmoji: null, // 用于保存用户选择的表情
			};
		},
		methods: {
			tuchEmoj(item) {
				this.selectedEmoji = item;
				this.$emit('swiperChange', item);
			},
			swiperChange(e) {
				this.swiperIndex = e.detail.current;
			},
		},
	};
</script>

样式
 

<style>
	.emoj-container {
		display: flex;
		flex-direction: column;
	}

	.emoj-row {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.emoj-parent {
		margin-left: 8rpx;
		margin-bottom: 5rpx;
		align-items: center;
		margin-top: 8rpx;
		padding-top: 5rpx;
		padding-bottom: 5rpx;
	}

	.checkActive {
		background-color: #e8e8e8 !important;
	}

	.emoj-conn {
		width: 80rpx;
		font-size: 56rpx;
		text-align: center;
	}
</style>

大多数都是用组件化较多的，大家可以通过组件的方式去传递
 

<template>
	<view>
		<emoji-selector @swiperChange="handleEmojiChange"></emoji-selector>
		<view>
			<text>用户选择的表情：</text>
			<text>{{ selectedEmoji }}</text>
		</view>
	</view>
</template>

<script>
	import EmojiSelector from '../components/EmojiSelector.vue';
	export default {
		components: {
			EmojiSelector,
		},
		data() {
			return {
				selectedEmoji: null, // 用于保存用户选择的表情
			};
		},
		methods: {
			handleEmojiChange(emoji) {
				this.selectedEmoji = emoji;
				console.log('用户选择的表情已更新：', emoji);
			},
		},
	};
</script>

<style>

</style>

如果有帮助到你们的 麻烦点个赞谢谢了！