<view class="item_box" :class="{hide:iSinfo}"> <view class="item" v-for="(keyword, index) in oldKeywordList" @tap="searchClick(keyword)" :key="index">{{ keyword }} </view> </view> <text @tap="showinfo" v-show="oldKeywordList.length > 0 && !iSinfo">展开</text> <text @tap="showinfo" v-show="oldKeywordList.length > 0 && iSinfo" >收起</text>帮我把这个展开和收起的v-show的判断条件改成当item_box展现的超过两行的时候
时间: 2024-01-11 13:02:09 浏览: 100
微信小程序 视图容器组件的详解及实例代码
可以使用一个计算属性来判断是否需要展示展开/收起的按钮。具体实现如下:
1. 在data中添加一个变量`showButton`,初始值为false。
2. 在mounted钩子函数中,使用`wx.createSelectorQuery()`获取`item_box`元素的高度,判断是否超过两行,如果超过则将`showButton`设置为true。
3. 在template中,将原来的`v-show="oldKeywordList.length > 0 && !iSinfo"`和`v-show="oldKeywordList.length > 0 && iSinfo"`替换为`v-show="showButton"`。
4. 在methods中添加一个`toggleInfo()`方法,用于切换展开/收起状态,并修改`iSinfo`的值。
最终代码如下:
```
<view class="item_box" :class="{hide:iSinfo}">
<view class="item" v-for="(keyword, index) in oldKeywordList" @tap="searchClick(keyword)" :key="index">{{ keyword }}</view>
</view>
<text @tap="toggleInfo" v-show="showButton">{{ iSinfo ? '收起' : '展开' }}</text>
<script>
export default {
data() {
return {
iSinfo: false,
showButton: false,
oldKeywordList: ['关键词1', '关键词2', '关键词3', '关键词4']
}
},
mounted() {
// 获取item_box元素的高度
wx.createSelectorQuery().select('.item_box').boundingClientRect(rect => {
// 判断是否超过两行
if (rect.height > 2 * 24) {
this.showButton = true;
}
}).exec();
},
methods: {
toggleInfo() {
this.iSinfo = !this.iSinfo;
},
searchClick(keyword) {
console.log(keyword);
}
}
}
</script>
```
其中,`24`表示每个item的高度,这里假设item的高度为24rpx。如果需要调整,可以根据实际情况修改。
阅读全文