我想要实现的是进入页面后点击表情（emoji.png)按钮可以弹出表情选择框发送表情，再次点击可以关闭表情选择框，该功能在浏览器上能预期实现，但是在微信小程序上则是：一进入页面就打开了表情选择框，再次点击也无法关闭，检查过代码，应该没有问题，这是什么原因？

<template>

<scroll-view scroll-y="true" class="container">

<!-- 聊天列表 -->

<view class="chat-body">

<view v-for="(item, index) in chatList" :key="index">

<view class="chat-one" v-if="!item.isMe">

<image class="chat-face" src="@/static/faces/1.png" />

<view class="chat-box">

<view class="chat-sender">安若熙</view>

<view class="chat-content" v-if="item.type === 'txt'">{{ item.content }}</view>

<image class="chat-img" v-if="item.type === 'img'" :src="item.content" mode="widthFix" />

</view>

</view>

<view v-else class="chat-one chat-one-mine">

<view class="chat-box">

<view class="chat-content" v-if="item.type === 'txt'">{{ item.content }}</view>

<image class="chat-img" v-if="item.type === 'img'" :src="item.content" mode="widthFix" />

</view>

<image class="chat-face" src="@/static/faces/2.jpeg" />

</view>

</view>

</view>

<!-- 聊天输入 -->

<view class="chat-footer">

<input class="msg-input" type="text" cursor-spacing="16" v-model="myInput" placeholder="不能发送空白信息 " />

<image class="img-chose" src="@/static/imgchoose.png" @click="chooseImgAndSend" />

<image class="emoji-icon" src="@/static/emoji.png" @click="toggleEmojiPopup" />

<view class="send-btn" @click="sendMsg">发送</view>

</view>

<!-- 表情弹出窗口 -->

<view class="emoji-popup" v-show="showEmojiPopup">

    <image

        v-for="(emoji, index) in emojiList"

        :key="index"

        class="emoji-img"

        :src="emoji"

        @click="sendEmoji(emoji)"

    />

</view>

</scroll-view>

</template>

<script>

export default {

data() {

return {

chatList: [

{ isMe: false, type: 'txt', content: '今晚吃什么？' },

{ isMe: true, type: 'img', content: '/static/imgs/2.jpeg' },

{ isMe: false, type: 'img', content: '/static/imgs/3.png' },

{ isMe: true, type: 'txt', content: '哇，小姐姐好美啊！' }

],

myInput: "",

showEmojiPopup: false,

emojiList: [

            '/static/emojis/happy.png',

            '/static/emojis/sad.png',

            '/static/emojis/angry.png',

            '/static/emojis/laugh.png',

'/static/emojis/laugh tears.png'

        ]

};

},

onShow() {

if (uni.getStorageSync('chatList')) {

this.chatList = JSON.parse(uni.getStorageSync('chatList'));

}

},

methods: {

sendMsg() {

if (!this.myInput) return;

const txtMsg = {

isMe: true,

type: "txt",

content: this.myInput

};

this.chatList.push(txtMsg);

uni.setStorageSync('chatList', JSON.stringify(this.chatList));

this.myInput = "";

setTimeout(() => {

uni.pageScrollTo({

scrollTop: 99999,

duration: 100

});

}, 100);

},

chooseImgAndSend() {

uni.chooseImage({

count: 1,

sizeType: ['original', 'compressed'],

sourceType: ['album', 'camera'],

success: res => {

const imgPath = res.tempFilePaths[0];

const sendMsg = { isMe: true, type: "img", content: imgPath };

this.chatList.push(sendMsg);

// 模拟小姐姐回复同样的图片

const resMsg = { isMe: false, type: "img", content: imgPath };

this.chatList.push(resMsg);

uni.pageScrollTo({

scrollTop: 999999,

duration: 0

});

uni.setStorageSync('chatList', JSON.stringify(this.chatList));

}

});

},

toggleEmojiPopup() {

this.showEmojiPopup = !this.showEmojiPopup;

},

sendEmoji(emojiPath) {

const emojiMsg = { isMe: true, type: "img", content: emojiPath };

this.chatList.push(emojiMsg);

this.showEmojiPopup = false;

uni.setStorageSync('chatList', JSON.stringify(this.chatList));

setTimeout(() => {

uni.pageScrollTo({

scrollTop: 999999,

duration: 100

});

}, 100);

}

}

};

</script>

<style lang="scss" scoped>

.container {

background-color: #f1f1f1;

min-height: 100vh;

}

.chat-body {

padding-bottom: 178upx;

}

.chat-one {

display: flex;

flex-direction: row;

justify-content: flex-start;

align-items: flex-start;

padding: 20upx 0;

}

.chat-one-mine {

justify-content: flex-end;

}

.chat-face {

width: 84upx;

height: 84upx;

border-radius: 10upx;

margin-left: 40upx;

}

.chat-one-mine .chat-face {

margin-left: 0;

margin-right: 40upx;

}

.chat-box {

max-width: calc(100% - 290upx);

margin-left: 20upx;

font-size: 30upx;

}

.chat-one-mine .chat-box {

margin-right: 20upx;

}

.chat-sender {

color: #888;

font-size: 28upx;

margin-top: -8upx;

margin-bottom: 10upx;

}

.chat-content {

background-color: #fff;

border-radius: 5px;

padding: 10px;

}

.chat-img {

float: left;

max-width: 60%;

border-radius: 5px;

}

.chat-one-mine .chat-img {

float: right;

}

.chat-footer {

width: 680upx;

padding: 0 40upx;

height: 120upx;

position: fixed;

bottom: 0;

left: 0;

margin-bottom: 0upx;

background-color: #f1f1f1;

display: flex;

flex-direction: row;

justify-content: space-between;

align-items: center;

border-top: 1upx solid #ddd;

}

.msg-input {

background-color: #fff;

width: calc(100% - 300upx);

height: 70upx;

line-height: 70upx;

font-size: 30upx;

border-radius: 10upx;

padding: 0 20upx;

}

.img-chose {

height: 60upx;

width: 60upx;

}

.send-btn {

border: 1px solid #e5e5e5;

border-radius: 6px;

padding: 10upx 20upx;

background-color: rgb(149, 236, 105);

margin-left: 10upx;

cursor: pointer;

flex-shrink: 0;

}

.emoji-icon {

width: 60upx;

height: 60upx;

margin-right: 5upx;

cursor: pointer;

}

.emoji-popup {

position: fixed;

bottom: 120upx;

left: 0;

width: 100%;

background-color: #fff;

padding: 20upx;

border-top: 1upx solid #ddd;

display: flex;

flex-wrap: wrap;

justify-content: flex-start;

}

.emoji-img {

width: 60upx;

height: 60upx;

margin: 10upx;

cursor: pointer;

}

</style>