用微信小程序编写:ab栏背景色为白色、选中颜色为红色
时间: 2024-09-25 11:09:41 浏览: 28
在微信小程序中,如果你想让两个并列的选项卡(通常称为`view`组件,如`<navigator>`, `<tab-view>`中的标签项)ab栏分别默认背景色为白色,选中时变为红色,你可以通过设置它们的样式来实现。以下是一个基本的例子:
```html
<tab-view>
<tab-item wx:if="{{currentIndex === 0}}" value="0" selectedColor="#FF0000">
<text>选项A</text>
</tab-item>
<tab-item wx:if="{{currentIndex === 1}}" value="1" selectedColor="#FF0000">
<text>选项B</text>
</tab-item>
</tab-view>
<style>
.tab-bar {
background-color: white; /* 默认背景色 */
}
.tab-item.wx_selected {
background-color: red; /* 选中时背景色 */
}
</style>
```
在这个例子中,每个`tab-item`都有一个`selectedColor`属性,当你点击对应的项时,它的值会被设为`#FF0000`,表示红色。同时,你需要在`tab-view`的`currentItem`数据绑定上监听用户的切换动作,例如:
```javascript
Page({
data: {
currentIndex: 0,
},
onTap: function(item) {
this.setData({
currentIndex: item.value,
});
}
})
```
每当用户选择一个新的选项,`onTap`函数会更新`currentIndex`,从而改变当前选中的`tab-item`。