自定义组件中的代码
wxml中:
<view class="headerBox">
<text class="header-item">IN-SHOOT</text>
<navigator class="header-item" url="../../pages/index/index">首页</navigator>
<navigator class="header-item" url="../../pages/discover/discover">发现</navigator>
</view>
js中:
Component({
options: {
// 表示在这个页面禁用 app.wxss ,同时,页面 wxss 样式会影响到他的自定义组件。
addGlobalClass: true,
}
})
父页面中
<view class="container">
<header ></header>
</view>
.headerBox{width: 100%; display: flex;height: 60rpx;line-height: 60rpx;padding-left: 20rpx;position: absolute;
top: 0;left: 0;z-index: 10;background-color: rgba(185, 181, 181, 0.3);color: #999999;}
.header-item{margin-right: 20rpx;font-size: 30rpx;}
第二种
在自定义组件中的js暴露出来class
Component({
externalClasses: ['headerBox','header-item']
})
父页面中
<view class="container">
<header headerBox="headerBox" header-item="header-item"></header>
</view>
.headerBox{width: 100%; display: flex;height: 60rpx;line-height: 60rpx;padding-left: 20rpx;position: absolute;
top: 0;left: 0;z-index: 10;background-color: rgba(185, 181, 181, 0.3);color: #999999;}
.header-item{margin-right: 20rpx;font-size: 30rpx;}
还有很多方法详情可以移步至官方文档
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
注意 如果你使用了上述方法还是无法实现
你可以真机调试运行一下。
例如 (编辑器和真机运行的效果会不一样!!!)