思路:
1.编辑和退出是两个状态,首先要根据{{ action }}判断状态 (if)
2.展示{{ action }}对应的状态(v-show)
效果图
源码:
<template>
<view>
<!--uview 自定义导航 -->
<u-navbar title-color="#fff" back-icon-color="#fff" :is-fixed="isFixed" :is-back="true" :background="background"
:title="title" :back-icon-name="backIconName" :back-text="backText">
<view class="navbar-right" slot="right" v-if="slotRight">
<view class="message-box right-item">
<view class="city-img">
<!--根据action的值判断,显示那个页面-->
<view class="nav_admin" @tap="changeAction">{{action}}</view>
</view>
</view>
</view>
</u-navbar>
<!-- 显示状态 == 编辑的内容 -->
<view v-show="action=='编辑'">
</view>
<!-- 显示状态 == 退出的内容 -->
<view v-show="action=='退出'">
</view>
</view>
<template>
export default {
data() {
return {
action: '编辑', // 切换编辑还是退出
// 自定义导航栏
title: '通讯状态',
slotRight: true,
backText: '',
backIconName: 'nav-back',
right: false,
showAction: false,
rightSlot: false,
useSlot: false,
background: {
background: '#2E95FF'
},
isBack: true,
search: false,
custom: false,
isFixed: true,
keyword: '',
// #ifdef MP
slotRight: false,
// #endif
// #ifndef MP
slotRight: true,
// #endif
//自定义导航栏结束
}
},
methods: {
// 切换编辑还是退出
changeAction() {
if (this.action == "编辑") {
this.action = "退出"
} else {
this.action = "编辑"
}
},
}
}