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

这篇具有很好参考价值的文章主要介绍了uni-app实现emoj表情包发送(nvue版)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

看效果

uni-app实现emoj表情包发送(nvue版),uni-app,uni-app,vue.js,前端

 

代码文章来源地址https://www.toymoban.com/news/detail-586402.html

<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>

到了这里,关于uni-app实现emoj表情包发送(nvue版)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue.js uni-app 混合模式原生App webview与H5的交互

    在现代移动应用开发中,原生App与H5页面之间的交互已经成为一个常见的需求。本文将介绍如何在Vue.js框架中实现原生App与H5页面之间的数据传递和方法调用。我们将通过一个简单的示例来展示如何实现这一功能。 效果图如下: 首先,我们需要在Vue.js项目中引入原生App与H5页面

    2024年02月16日
    浏览(72)
  • uni-app基于vue实现商城小程序

    目录 一、前言 二、功能效果图 1.首页 2.分类 ​3.活动 4.我的 ​5.商品详情 6.购物车 三、代码实现 1.项目结构截图 uni-app,Hbuilder 2.首页源码 3.数据模拟通讯 四、总结 参考“网易严选”小程序 项目采用传统vue项目结构,即uni-app打包和运行成小程序,使用HBuilder开发工具开发项

    2024年02月03日
    浏览(54)
  • uni-app(Vue3/Vite) + vant UI(Vue3版本)+ js 按需引入的项目搭建

            因为要完成软件工程的项目,要做一个nativeApp,看了很多的技术文档以后决定使用多端兼容的uni-app来开发。组件方面的话最后决定使用目前比较火的Vant UI。但是看了CSDN和掘金上面的很多文章,似乎没有一篇是关于uni-app中使用Vite对vant组件进行按需引入(可能这个

    2023年04月09日
    浏览(68)
  • uni-app 使用@escookrequest-miniprogram请求发送

    前言 在使用uni-app开发小程序时候发现axios添加请求头时在实际网络请求时并没有添加进去 后面发现是有第三方包@escookrequest-miniprogram代替axios发送请求的,请求头也添加正常。 注意是这个包也是在外层包了一层data,但好像并不能统一处理掉。 代码实现 1.下包@escookrequest-min

    2024年02月13日
    浏览(44)
  • uni-app map路线轨迹回放功能及turf.js实现缓冲区渲染(微信小程序)

    使用uni-app中 map组件实现路线轨迹回放功能。  1、通过接口获取返回的轨迹点。 2、地图的坐标系与轨迹点的坐标系要保持一致,否则轨迹有偏差。点经纬度转换,wgs84togcj02 =》js工具类合集(utils.js) 3、绘制开始结束点,设置地图经纬度。 4、polyline,绘制路线点,属性:[

    2024年02月11日
    浏览(66)
  • uni-app 使用uni.request封装发送api请求文档服务器请求导航守卫

    前言 刚刚接触uni-app时候想着直接使用axios发请求,可以发送成功但是请求头有点问题 后面发现教程都是使用@escookrequest-miniprogram三方包发送请求-(浏览器环境发送不了请求,不兼容) 为什么不直接用uni.request()发送请求,是因为每次请求都要写一次添加请求头不合理 后面

    2024年02月16日
    浏览(57)
  • 前后端分离项目,vue+uni-app+php+mysql订座预约小程序系统设计与实现

    【后台功能】 广告管理:设置小程序首页轮播图广告和链接 留言列表:所有用户留言信息列表,支持删除 会员列表:查看所有注册会员信息,支持删除 录入资讯:录入资讯标题、内容等信息 管理资讯:查看已录入资讯列表,支持删除和修改 座位分类设置:设置开放的座位

    2024年02月07日
    浏览(39)
  • uni-app -- - - - 小程序如何向后端发送Form Data格式的数据

    接口请 求方式 传参方式 ,肯定不是一成不变的,当遇到如题需求的时候,要知道, 小程序是没有FormData对象 的,那么该怎么操作呢??? 直接上代码: 效果如图: 如上所示,这样写起来功能实现了,但是看起来这代码太不美观了 效果如图: 参考文章: 使用wx.request发送

    2024年02月08日
    浏览(43)
  • 微信小程序外卖跑腿点餐(订餐)系统(uni-app+SpringBoot后端+Vue管理端技术实现)

    自从计算机发展开始,计算机软硬件相关技术的发展速度越来越快,在信息化高速发展的今天,计算机应用技术似乎已经应用到了各个领域。 在餐饮行业,除了外卖以外就是到店里就餐,在店里就餐如果需要等待点餐的话,用户的体验度就会急剧下降,很多餐饮店也开始开发

    2024年04月11日
    浏览(58)
  • WebStorm开发uni-app ,用vue2实现手机APP(apk) + 微信小程序多端项目开发方案

    我们主要分析了如下小程序开发框架,主要包括: 框架 技术栈 案例 微信小程序 支付宝小程序 百度小程序 头条小程序 H5 App uni-app Vue 丰富 ⭕ ⭕️ ⭕️ ⭕ ⭕️ ⭕ Taro React 丰富 ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ wepy Vue 丰富 ⭕ ❌ ❌ ❌ ❌ ❌ mpvue Vue 丰富 ⭕ ❌ ❌ ❌ ⭕️ ❌  首先,就要排

    2024年02月08日
    浏览(81)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包