uni-app实现emoj表情包发送(nvue版)

uni-app实现表情包发送, vue实现思路直接使用grideview网格布局加载emoj表情包即可实现,很简单,但是nvue稍微复杂,这里采用的方案是nvue提供的组件list

看效果

代码

<template>
	<view style="margin-right: 10rpx;margin-left: 20rpx;height: 446rpx;">
		<!--列表-->
		<list :show-scrollbar='false'>
			<!-- 注意事项: 不能使用 index 作为 key 的唯一标识 -->
			<cell v-for="(items, index) in emojData" :key="items.id">
				<view style="display: flex;flex-direction: row;">
					<block v-for="(item, index) in items">
						<view class="emoj_parent" hover-class="checkActive" hover-stay-time="100"
							@click="tuchEmoj(item,index)">
							<text @click="tuchEmoj(item,index)" class="emoj_conn">{{item}}</text>
						</view>
					</block>
				</view>

			</cell>
		</list>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				emojData: [
					['🤞', '👍', '👏', '❤', '😁', '🖐', '😀', '😃'],
					['😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇'],
					['🙂', '🙃', '😉', '😌', '😍', '🥰', '😘', '😗'],
					['😙', '😚', '😋', '😛', '😝', '😜', '🤪', '🤨'],
					['🧐', '🤓', '😎', '🤩', '🥳', '😏', '😒', '😞'],
					['😔', '😟', '😕', '🙁', '😣', '😖', '😫', '😩'],
					['🥺', '😢', '😭', '😤', '😠', '😡', '🤬', '🤯'],
					['😳', '🥵', '🥶', '😱', '😨', '😰', '😥', '😓'],
					['🤗', '🤔', '🤭', '🤫', '🤥', '😶', '😐', '😑'],
					['😬', '🙄', '😯', '😦', '😧', '😮', '😲', '😴'],
					['🤤', '😪', '😵', '🤐', '🥴', '🤢', '🤮', '🤧'],
					['😷', '🤒', '🤕', '🤑', '🤠', '👻', '🐧']
				]
			}
		},
		methods: {
			tuchEmoj: function(item, index) {
				console.log("====tuchEmoj====" + JSON.stringify(index) + "===" + item)
			}
		}
	}
</script>

<style>
	.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>
相关推荐
逐·風23 分钟前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫1 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦1 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子2 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山2 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享3 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果3 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄3 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰4 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf5 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询