如图,在默认情况下评论栏为一种样式
首先我们先写两个底部
<view class="bottom" v-if="hidden == true">
<view class="top-review" @click="review">
<view class="review">
<image src="../../static/detais-05.png"></image>
<text>写评论</text>
</view>
</view>
<view class="bottom-img" @click="discuss">
<image src="/static/image_04.png"></image>
<text>评论</text>
</view>
<view class="bottom-img" @tap="zan">
<image src="/static/image_04.png"></image>
<text>点赞</text>
</view>
<view class="bottom-img" @tap="click">
<image src="/static/image_03.png"></image>
<text>分享</text>
</view>
</view>
<view class="bot" v-else="hideen == false">
<view class="bot-input">
<input placeholder="优质评论将会优先展示" focus placeholder-class="color:#EEE" @blur="blurInput" />
</view>
<button class="bot-btn">发布</button>
</view>
通过v-if来判断它们什么时候显示,在data里设一个默认显示的值hidden:true(hidden的值是什么自己定义)
data() {
return {
hidden: true,
},
给它一个点击事件review
点击的时候显示评论框
/**
* 显示评论框
*/
review() {
this.hidden = false
},
输入框别忘了
属性focus(获取焦点,键盘才会弹起来)
@blur失去焦点触发
<view class="bot-input">
<input placeholder="优质评论将会优先展示" focus placeholder-class="color:#EEE" @blur="blurInput" />
</view>
/**
* 显示评论框
*/
review() {
this.hidden = false
},
/**
* 评论框失去焦点是隐藏
*/
blurInput(){
this.hidden = true
},
到这里就没有了哦~~~