<template>
<view>
<cu-custom :bgColor="bgColors" :isBack="false">
<!-- <block slot="backText">返回</block> -->
<block slot="content" style="color: #333">
<view class="navBar" :class="[bgColor == 'bg-white' ? 'whiteBar' : '', trans == true ? 'transp' : '']">
<u-icon v-if="!isWindow" name="arrow-left" :color="bgColor == 'bg-white' ? '#000' : '#fff'" size="19" @tap="back"></u-icon>
<u-line v-if="!isWindow" direction="column" color="#fff" :hairline="false" length="16" margin="0 10px"></u-line>
<view class="">
<u-icon name="list" :color="bgColor == 'bg-white' ? '#000' : '#fff'" size="19" @tap="show = !show"></u-icon>
<view class="listBox" v-if="show">
<view class="" @tap.stop="goTo('home')">首页</view>
<view class="" @tap.stop="goTo('supply')">大厅</view>
<view class="" @tap.stop="goTo('video')">视频</view>
<view class="" @tap.stop="goTo('news')">资讯</view>
</view>
<view class="mask" v-if="show" @touchstart="show = false"></view>
</view>
</view>
<view class="content">
{{ title }}
</view>
</block>
</cu-custom>
</view>
</template>
<script>
export default {
name: 'topNavbar',
props: {
bgColor: {
type: String,
default: 'transparent'
},
title: {
type: String,
default: ''
},
trans: {
type: Boolean,
default: false
}
},
data() {
return {
show: false,
isWindow: false, //是否是电脑打开小程序
bgColors: this.bgColor
};
},
created() {
wx.getSystemInfo({
success: (res) => {
// windows | mac为pc端
// android | ios为手机端
if (res.platform == 'windows' || res.platform == 'mac') {
this.isWindow = true;
console.log(this.isWindow);
uni.setNavigationBarColor({
frontColor: '#000000',
backgroundColor: '#ffffff',
animation: {
duration: 400,
timingFunc: 'easeIn'
}
});
}
console.log('getSystemInfo,', res.platform);
}
});
},
mounted() {
let that = this;
uni.$on('onPageScroll', function (data) {
that.handleScroll(data);
});
},
methods: {
handleScroll(data) {
const scrollTop = data;
if (scrollTop > 30) {
this.bgColors = 'bg-white'; // 背景色变为白色
} else {
this.bgColors = 'transparent'; // 背景色恢复透明
}
},
back() {
if (getCurrentPages().length < 2 && ' undefined' !== typeof __wxConfig) {
let url = '/' + __wxConfig.pages[0];
// return
uni.redirectTo({ url });
}
uni.navigateBack({ delta: 1 });
},
goTo(item) {
this.show = false;
let url = '';
switch (item) {
case 'home':
url = '/pages/index/index';
uni.reLaunch({ url });
break;
case 'video':
url = '/pages/video/index';
uni.navigateTo({ url });
break;
default:
url = `/pages/index/index?cur=${item}`;
uni.reLaunch({ url });
}
}
}
};
</script>
<style lang="scss">
.transp {
background-color: rgba(0, 0, 0, 0.2);
}
.content {
width: 320rpx;
overflow: hidden;
}
</style>
uniapp 开发小程序 自定义导航栏 电脑端小程序不展示返回按钮
最新推荐文章于 2025-03-27 10:23:04 发布