窗口打开关闭功能在浏览器端运行能实现预期效果,但在小程序上不行?
[图片] 我想要实现的是进入页面后点击表情(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>