yogaApp/components/emoji/emoji.vue

<template>
	<view class="emoji" :style="{height:height+'px'}">
		<view class="emoji-line" v-for="(line,i) in emoji" :key="i">
			<view class="emoji-line-item" v-for="(item,index) in line" :key="index" @tap="clickEmoji(item)">{{item}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			height:{
				type:Number,
				default:260
			}
		},
		name: "emoji",
		data() {
			return {
				emoji: [
					['😀', '😁', '😂', '🤣', '😃', '😃', '😅'],
					['😄', '😆', '😉', '😊', '😋', '😎', '😍'],
					['😎', '😘', '😗', '😙', '🙂', '🤗', '😑'],
					['😏', '😣', '😥', '😮', '🤐', '😯', '😶'],
					['😪', '😫', '😴', '😌', '😛', '🤤', '🙄'],
					['😒', '😓', '😕', '🙃', '🤑', '🙁', '😚'],
					['😖', '😤', '😭', '😨', '😰', '😬', '😵'],
					['😱', '😡', '😷', '💀', '👻', '💍', '💄'],
					['💩', '👑', '🎓', '👀', '💪🏻', '☝🏻', '✌🏼'],
					['🤘🏻', '🤙🏼', '👌🏻', '✊🏻', '👍🏼', '👎🏻', '👏🏻'],
					['🙏🏻', '🤝', '🍖', '🍲', '🍦', '🍰'] //'🍔',
				],
				emojiindex: [
					[11, 12, 13, 14, 15, 16,17],
					[21, 22, 23, 24, 25, 26, 27],
					[31, '😘', '😗', '😙', '🙂', '🤗', '😑'],
					[41, '😣', '😥', '😮', '🤐', '😯', '😶'],
					[51, '😫', '😴', '😌', '😛', '🤤', '🙄'],
					[61, '😓', '😕', '🙃', '🤑', '🙁', '😚'],
					[71, '😤', '😭', '😨', '😰', '😬', '😵'],
					[81, '😡', '😷', '💀', '👻', '💍', '💄'],
					[91, '👑', '🎓', '👀', '💪🏻', '☝🏻', '✌🏼'],
					['🤘🏻', '🤙🏼', '👌🏻', '✊🏻', '👍🏼', '👎🏻', '👏🏻'],
					['🙏🏻', '🤝', '🍖', '🍲', '🍦', '🍰'] //'🍔',
				]
			};
		},
		methods: {
			clickEmoji(e) {
				this.$emit('emotion', e)
			}
		}
	}
</script>

<style lang="scss">
	.emoji {
		width: 100%;
		// height: 460rpx;
		padding: 16rpx 10rpx 130rpx 10rpx;
		box-sizing: border-box;
		overflow: hidden;
		overflow-y: auto;

		.emoji-line{
			display: flex;

			.emoji-line-item {
				flex: 1;
				text-align: center;
				font-size: 44rpx;
				line-height: 140rpx;
			}
		}
	}
</style>