（新手篇）长期记录微信小程序制作遇到的问题

目录

1.自定义导航栏

2.让子元素在父元素内居中

3.通过样式表制作返回箭头

4.properties和data的区别

properties

data

---

1.自定义导航栏

我制作的页面需要透明的导航栏+白色的标题+白色的返回键

由于很多页面都需要这样的导航栏，所以我选择把导航栏做成组件。

因为不是每个页面都这样，所以不把它作为全局变量。

1.1创建navBar组件

1.现在components下创建navBar文件夹

2. navBar.wxml

<view class="navbar" style="background:transparent;height:{{navbarHeight}}px">
  <view style="height:{{capsuleHeight}}px;top:{{capsuleTop}}px;" class="arrow-content">
    <view class="arrow" bindtap="handleGoToBack"></view>
  </view>
  <view class="text" style="height:{{capsuleHeight}}px;top:{{capsuleTop}}px">情绪创作</view>
</view>

navBar.wxss

.navbar{
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 99;
}
.arrow-content{
  position: absolute;
  left: 40rpx;
  z-index: 999;
  display: flex;
  align-items: center;
}
.arrow{
  width: 20rpx;
  height: 20rpx;
  border: 5rpx solid #FFFFFF;
  border-right-color:transparent;
  border-bottom-color:transparent;
  transform: rotate(-45deg);
}
.text{
  position: absolute;
  left: 0;
  right: 0;
  font-size: 32rpx;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

3.navBar.josn

{
  "component": true,
  "usingComponents": {}
}

4.隐藏原生的navigationBar

4.1如果需要需要全局设为自定义。
app.json里面window全局配置里有个参数：navigationStyle（导航栏样式），default=默认样式，custom=自定义样式。自定义需要配置为custom

 
"window": {
	"navigationStyle": "custom"
}

4.2如果需要指定页面设为自定义。
在需要使用自定义组件navBar的页面的json文件里面，设置navigationStyle为custom,并且引入组件

{
  "component": true,
  "navigationStyle": "custom",
  "usingComponents": {
    "navBar": "/components/navBar/navBar",
  }
}

5.在父组件引用navBar组件

index.wxml

index.js

2.让子元素在父元素内居中

在父元素内：

display: flex; /* 启用 Flexbox 布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */

3.通过样式表制作返回箭头

.arrow{
  width: 20rpx;
  height: 20rpx;
  border: 5rpx solid #FFFFFF;
  border-right-color:transparent;
  border-bottom-color:transparent;
  transform: rotate(-45deg);
}

4.properties和data的区别

起因是在自定义导航栏里 我在data里定义了title 希望可以动态绑定{{title}}，希望能在具体页面修改标题的值，但是发现修改不了

查了网上的教程得知，在组件navBar的json中，要在properties中定义

properties

• 作用: properties 用于定义组件对外提供的属性。这些属性可以从父组件或页面传递给当前组件。
• 用法: 在使用组件时，可以通过 properties 传递数据，如 <navBar title="绘画世界"></navBar> 中的 title 属性就是通过 properties 传递到 navBar 组件的。

示例代码:

• title 在 properties 中的作用:
  • 允许父组件或页面设置 title 的值
  • 在组件内部通过 this.data.title 访问
  • 默认值可以在 properties 中设置，但可以被外部传递的值覆盖

data

• 作用: data 用于存储组件内部的状态和数据。它是组件的私有数据，不能从外部页面直接修改。
• 用法: data 仅在组件内部使用，不能通过外部的 <navBar title="绘画世界"></navBar> 这种方式来设置或改变。

示例代码:

• title 在 data 中的作用:
  • 只能在组件内部使用，不能从外部页面传递或修改
  • 用于存储组件的内部状态或计算结果