注释很详细,直接上代码
上一篇
新增内容:
1.组件属性变量的定义
2.组件属性变量的默认状态
3.组件属性变量的传递方法
解释一下为什么是父传子,因为组件是页面的一部分,数据是从页面传递到组件的,所以是父传子(以免和下一篇的子传父混淆)
源码:
myNav.js
//位于js的第一级中/*** 组件的属性列表*/properties: {//字段名back:{//类型type:Boolean,//值value:false}}
myNav.wxml
<view class="navigationBar custom-class" style="padding-top: {{test}}px;"><view class="navigationBarTitle title-class">//当back为真时才会出现“返回”//navigateBack可以实现返回上一级<navigator class="back" wx:if="{{back}}" open-type="navigateBack">返回</navigator>123</view>
</view>
myNav.wxss
.navigationBar{background-color: cornflowerblue;height: 80rpx;display: flex;justify-content: center;align-items: center;position: relative;
}.navigationBarTitle{font-weight: bold;
}
.back{//因为上一级已经设置居中,这样配置可以让选择出现的组件出现在左上角position: absolute;left: 20rpx;
}
form.wxml
//这里传值true
//注意传值的形式,如果是"false"则表示的是字符串
<myNav custom-class="color-pink" back="{{true}}">
</myNav>
效果演示: