uniapp,仿照小红书评论界面,点击输入框,底部弹出输入框和键盘
时间: 2024-01-17 09:48:44 浏览: 59
实现这个功能需要用到uniapp的组件和事件。
首先,在页面中添加一个textarea组件,用于用户输入评论内容:
```
<template>
<view>
<textarea
class="comment-input"
v-model="comment"
placeholder="请输入评论内容"
@focus="showInputBox"
></textarea>
</view>
<view :class="['input-box', {show: showBox}]">
<textarea
class="input-textarea"
v-model="comment"
placeholder="请输入评论内容"
@blur="hideInputBox"
></textarea>
</view>
</template>
```
在组件中,使用v-model绑定comment变量,用于存储用户输入的评论内容。同时,在textarea的focus事件中调用showInputBox方法,显示底部的输入框。
```
<script>
export default {
data() {
return {
comment: '',
showBox: false
}
},
methods: {
showInputBox() {
this.showBox = true
},
hideInputBox() {
this.showBox = false
}
}
}
</script>
```
在showInputBox方法中,将showBox变量设置为true,用于显示底部的输入框。在hideInputBox方法中,将showBox变量设置为false,用于隐藏底部的输入框。
最后,在底部的输入框中也添加一个textarea组件,并在blur事件中调用hideInputBox方法,用于隐藏输入框。
同时,需要添加CSS样式,用于控制底部输入框的显示和隐藏:
```
<style>
.comment-input {
height: 100px;
border: none;
outline: none;
resize: none;
font-size: 28rpx;
padding: 20rpx;
}
.input-box {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 200rpx;
background-color: #fff;
transform: translateY(200rpx);
transition: transform 0.3s ease-in-out;
}
.input-box.show {
transform: translateY(0);
}
.input-textarea {
height: 160rpx;
border: none;
outline: none;
resize: none;
font-size: 28rpx;
padding: 20rpx;
}
</style>
```
这样,就实现了仿照小红书评论界面的功能,点击输入框时,底部弹出输入框和键盘。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)