uni-app实现表情包发送, vue实现思路直接使用grideview网格布局加载emoj表情包即可实现,很简单,但是nvue稍微复杂,这里采用的方案是nvue提供的组件list
看效果
文章来源:https://www.toymoban.com/news/detail-586402.html
代码文章来源地址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模板网!