笔记-uniapp-colorui返回上一页优化

返回上一页问题

colorui,如果跳页面直接进入是二级,在用colorui返回的时候修改colorui的头部定义,跳转回首页

<template>
<view>
	<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
		<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
		<view class="action" @tap="BackPage" v-if="isBack">
			<text class="cuIcon-back"></text>
			<slot name="backText"></slot>
		</view>
			<view class="content" :style="[{top:StatusBar + 'px'}]">
				<slot name="content"></slot>
			</view>
			<slot name="right"></slot>
		</view>
	</view>
</view>
</template>

<script>
export default {
data() {
return {
StatusBar: this.StatusBar,
CustomBar: this.CustomBar
};
},
name: 'cu-custom',
computed: {
style() {
var StatusBar= this.StatusBar;
var CustomBar= this.CustomBar;
var bgImage = this.bgImage;
var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
if (this.bgImage) {
style = `${style}background-image:url(${bgImage});`;
}
return style
}
},
props: {
bgColor: {
type: String,
default: ''
},
isBack: {
type: [Boolean, String],
default: false
},
bgImage: {
type: String,
default: ''
},
},
methods: {
BackPage() {
let back = getCurrentPages();  
if(back && back.length>1) {  
uni.navigateBack({  
  delta: 1  
});
} else {  
                                        //关闭当前页回到首页
uni.redirectTo({
url:'/pages/index/index'
}) 
}  
}
}
}
</script>

<style>

</style>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uniapp提供了`uni.$on`方法来监听自定义事件。该方法可以用于在一个页面中监听其他页面通过`uni.$emit`触发的事件。具体来说,当需要在当前页面返回一页并进行局部刷新时,可以通过以下步骤实现: 1. 在当前页面的`onLoad`生命周期函数中使用`uni.$on`方法监听自定义事件。例如,可以监听名为"refreshPage"的事件。 2. 在需要进行局部刷新的页面中,在合适的时机(比如点击某个按钮)使用`uni.$emit`方法触发自定义事件"refreshPage"。 3. 当返回到当前页面时,`uni.$on`监听的事件将被触发,可以在事件回调函数中执行局部刷新的操作。 请注意,`uni.$on`和`uni.$emit`方法是uniapp封装的全局事件监听和触发方法,用于实现跨页面的事件通信。同时,对于uniapp的页面跳转,返回一页可以使用`uni.navigateBack`方法,局部刷新可以根据具体需求在事件回调函数中实现。 参考文献: js uRequestuGetLocationuShowToastuShowLoadinguHideLoadinguShowModaluShowActionSheetuNavigateTouNavigateBackuRedirectTouStartPullDownRefreshuStopPullDownRefreshuLoginuShareuPay 应用生命周期(app.vue中) onLaunch当uni-app 初始化完成时触发(全局只触发一次)onShow当 uni-app 启动,或从后台进入前台显示onHide当 uni-app 从前台进入后台onError当 uni-app 报错时触发onUniNViewMessage对 nvue 页面发送的数据进行监听,可参考 nvue 向 vue 通讯onUnhandledRejection对未处理的 Promise 拒绝事件监听函数(暂时只支持 CLI 创建的项目使用 CLI 工程,更新 uni 相关版本到 2.0.0-alpha-28020200701003 即可支持 onShareTimeline) 建议使用onLoad代替created 调接口;使用onReady代替mounted 在任何页面均可以使用vue生命周期,组件中只能使用vue生命周期,页面中推荐小程序的生命周期监听app卸载可以在app.vue文件使用beforeDestroy()tabbar页面没有onUnload()卸载页面的方法,所以app打开之后主页面只会执行一次onLoad,只会执行onShow和onHide,所以如果需要刷新页面,在onShow里初始化或者下拉刷新,如果需要传参,只能使用uni.$emit()。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [uniapp笔记和坑](https://blog.csdn.net/weixin_43848576/article/details/107424925)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值