<template>
<view>
<!-- 自定义导航 -->
<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 style="margin:5px 12px 0 0 ">
<image style="width:18.25px;height: 17.75px;" src="../../../../static/img/admin/search.png" mode=""
@click="toggle('center')">
</image>
</view>
</view>
</u-navbar>
<!-- 弹出层 -->
<uni-popup ref="popup" :animation="false">
<view class="popup-content" style="margin-top:-20px;">
<view class="popup-date">
<view class="pop-child-content">
</view>
<!-- 弹出框结束 -->
</view>
<!-- 操作按钮 -->
<view class="button-bottom">
<view class="popup-btn">
<button @click="dialogClose()">取消</button>
</view>
<view class="popup-btn popup-btn2">
<button>查询</button>
</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
// 自定义导航栏
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: {
// 打开基础内容
toggle(type) {
this.type = type
this.$refs.popup.open()
},
// 对话框取消按钮
dialogClose() {
this.msgType = 'info'
this.message = '点击了对话框的取消按钮'
this.$refs.popup.close()
},
}
}
</script>
<style>
.popup-date {
/* width: 630rpx; */
width: 100%;
height: 850rpx;
}
.popup-content {
background-color: #fff;
width: 630rpx;
height: 950rpx;
/* margin-top: 30px; */
}
.button-bottom {
width: 630rpx;
height: 100rpx;
display: flex;
justify-content: end;
align-items: flex-end;
background: #007AFF;
}
.popup-btn {
width: 100%;
height: 100rpx;
background: #007AFF;
}
.popup-btn button {
border-radius: 0px 0px 0px 0px;
height: 100rpx;
border: 1px solid #007AFF;
background: #ccc;
color: #FFFFFF;
border: none;
}
.popup-btn2 button {
border-radius: 0px 0px 0px 0px;
height: 100rpx;
border: 1px solid #007AFF;
background: #007AFF;
color: #FFFFFF;
border: none;
}
button {
border: none;
}
</style>
带弹出框的自定义导航页面
最新推荐文章于 2023-07-05 10:08:57 发布