小程序
小游戏
企业微信
微信支付
扫描小程序码分享
每个租户都需要不同颜色的图片，包括底部的tabbar也需要跟随主题颜色变化，有没大神知道这个需求怎么实现吗
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
1、自定义tabbar；
2、第三方平台的extConfig.json配置。
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
<view class="tabbar" wx:if="{{ showTabBar }}">
<view class="tabbar-container">
<block wx:for="{{actives}}" wx:key="id">
<view class="tabbar-item" data-item="{{item}}" style="color: {{activeIndex === item.id ? mainColor : '#999999'}}" bind:tap="changeIndex">
<view>
<text class="{{item.iconPath}}"></text>
</view>
<text class="item-title">{{item.name}}</text>
</block>
Component({
properties: {
},
data: {
actives: [{
iconPath: 'iconfont icon-a-Frame1',
name: '首页',
pagePath: '/pages/index/index',
id: 0
{
iconPath: 'iconfont icon-a-Frame2',
name: '卡券',
pagePath: '/pages/ticket/index',
id: 1
iconPath: 'iconfont icon-a-Frame3',
name: '我的',
pagePath: '/pages/mine/index',
id: 2
],
activeIndex: 0,
mainColor: getApp().globalData.mainColor,
showTabBar: true
methods: {
changeIndex(e) {
const item = e.currentTarget.dataset.item;
this.setData({
activeIndex: item.id
})
wx.switchTab({ url:item.pagePath });
}
appid每个小程序只能有一个，除非你是服务商授权模式给不同的小程序发布模板。
如果是一个小程序内要实现不同主题的话自己想办法，tabbar弄成自定义组件，用官方的默认配置无法动态调整颜色。
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
1、自定义tabbar；
2、第三方平台的extConfig.json配置。
<view class="tabbar" wx:if="{{ showTabBar }}"><view class="tabbar-container"><block wx:for="{{actives}}" wx:key="id"><view class="tabbar-item" data-item="{{item}}" style="color: {{activeIndex === item.id ? mainColor : '#999999'}}" bind:tap="changeIndex"><view><text class="{{item.iconPath}}"></text></view><text class="item-title">{{item.name}}</text></view></block></view></view>Component({properties: {},data: {actives: [{iconPath: 'iconfont icon-a-Frame1',name: '首页',pagePath: '/pages/index/index',id: 0},{iconPath: 'iconfont icon-a-Frame2',name: '卡券',pagePath: '/pages/ticket/index',id: 1},{iconPath: 'iconfont icon-a-Frame3',name: '我的',pagePath: '/pages/mine/index',id: 2},],activeIndex: 0,mainColor: getApp().globalData.mainColor,showTabBar: true},methods: {changeIndex(e) {const item = e.currentTarget.dataset.item;this.setData({activeIndex: item.id})wx.switchTab({ url:item.pagePath });},}})appid每个小程序只能有一个，除非你是服务商授权模式给不同的小程序发布模板。
如果是一个小程序内要实现不同主题的话自己想办法，tabbar弄成自定义组件，用官方的默认配置无法动态调整颜色。
<view class="tabbar" wx:if="{{ showTabBar }}"><view class="tabbar-container"><block wx:for="{{actives}}" wx:key="id"><view class="tabbar-item" data-item="{{item}}" style="color: {{activeIndex === item.id ? mainColor : '#999999'}}" bind:tap="changeIndex"><view><text class="{{item.iconPath}}"></text></view><text class="item-title">{{item.name}}</text></view></block></view></view>Component({properties: {},data: {actives: [{iconPath: 'iconfont icon-a-Frame1',name: '首页',pagePath: '/pages/index/index',id: 0},{Component({properties: {},data: {actives: [{iconPath: 'iconfont icon-a-Frame1',name: '首页',pagePath: '/pages/index/index',id: 0},{iconPath: 'iconfont icon-a-Frame2',name: '卡券',pagePath: '/pages/ticket/index',id: 1},{iconPath: 'iconfont icon-a-Frame3',name: '我的',pagePath: '/pages/mine/index',id: 2},],activeIndex: 0,mainColor: getApp().globalData.mainColor,showTabBar: true},methods: {changeIndex(e) {const item = e.currentTarget.dataset.item;this.setData({activeIndex: item.id})wx.switchTab({ url:item.pagePath });},}})