一个页面怎么设置两个@tap="gonavigate()"
时间: 2024-03-14 14:45:31 浏览: 26
可以使用以下代码示例来设置两个@tap="gonavigate()":
```html
<view @tap="gonavigate('page1')">跳转到页面1</view>
<view @tap="gonavigate('page2')">跳转到页面2</view>
```
在上面的代码中,我们使用了两个不同的参数来调用`gonavigate()`函数,以便在点击不同的视图时跳转到不同的页面。您可以根据实际情况修改参数名称和函数名称。
相关问题
一个页面怎么设置两个@tap="gonavigate()",详细
当一个页面需要设置多个 `@tap` 事件时,可以通过以下方式进行设置:
1. 在模板中,针对不同的元素分别设置不同的 `@tap` 事件
```html
<view @tap="gonavigateToPage1">跳转到页面1</view>
<view @tap="gonavigateToPage2">跳转到页面2</view>
```
2. 在 script 中,分别定义不同的 `gonavigateToPage1` 和 `gonavigateToPage2` 函数来处理不同元素的点击事件
```js
export default {
methods: {
gonavigateToPage1() {
// 跳转到页面1的逻辑
},
gonavigateToPage2() {
// 跳转到页面2的逻辑
}
}
}
```
在上面的代码中,我们分别在模板中设置了两个元素的 `@tap` 事件,并在 script 中定义了 `gonavigateToPage1` 和 `gonavigateToPage2` 函数来分别处理这两个事件。
需要注意的是,每个 `@tap` 事件所对应的函数名称必须不同,否则会导致函数被覆盖,从而出现意料之外的结果。
<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展现的超过两行的时候
可以使用一个计算属性来判断是否需要展示展开/收起的按钮。具体实现如下:
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。如果需要调整,可以根据实际情况修改。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![.zip](https://img-home.csdnimg.cn/images/20210720083646.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)