微信小程序每个页面都要使用的一个公共头部组件,根据不同页面这个头部组件展示不同的样式,怎么实现,给出详细思路及示例代码
时间: 2024-10-13 11:05:01 浏览: 11
要在微信小程序中创建一个公共头部组件,并根据不同页面显示不同的样式,通常的做法是采用组件传参和条件渲染结合。首先,你需要创建一个头部组件,然后在每个需要该头部的页面上导入并传入所需的样式参数。
**步骤1:创建头部组件(header.wxml和header.wxss)**
header.wxml:
```html
<view class="{{headerClass}}"> <!-- headerClass由父组件传入 -->
<navigator url="{{to}}" open-type="navigate"> <!-- 这里可以添加自定义的标题或者其他内容 -->
<text>{{title}}</text>
</navigator>
</view>
```
header.wxss:
```css
.header-common { /* 公共样式 */
background-color: #fff;
}
.header-page1 {
color: red;
}
.header-page2 {
color: blue;
}
/* 添加更多页面样式的切换规则... */
```
**步骤2:在每个需要头部组件的页面中引入并传参**
在page1.js (或其他页面) 中的`onLoad`或`onReady`中做如下操作:
```javascript
// 定义头部样式和导航目标
const title = '首页';
let headerClass = 'header-common'; // 默认样式
if (this.data.isPage2) { // 检查是否是特定页面
headerClass = 'header-page2';
title = '页面2';
}
Page({
data: {
isPage2: false, // 初始状态,根据实际业务逻辑设置
},
onLoad: function () {
this.setData({ isPage2: true }); // 当前页面为页面2时,设置isPage2为true
this.renderHeader(); // 自定义方法用于渲染头部组件
},
renderHeader: function() {
const headerOption = {
to: '/page2', // 要跳转的页面路径
headerClass: headerClass,
title: title
};
// 将选项传递给头部组件
this.selectComponent('#header', headerOption);
}
})
```
在page1.wxml中引入头部组件:
```html
<import src="/components/header/header" />
<view>
<header id="header" :header-class="headerClass" :title="title"></header>
<!-- 页面主体内容 -->
</view>
```
注意:`selectComponent`和`:header-class`这样的语法是模拟了Vue或者React中的特性,实际上微信小程序并不支持动态绑定属性,所以这只是一个示例。在实际项目中,你需要将这些值作为单独的数据字段,然后在wxml中用`{{}}`语法绑定。