小程序_动态设置tabBar主题皮肤

序：需要动态设置页面的一些背景、按钮状态、文字的颜色，图片、图标等等，包括tabBar的图标和文字的颜色，切换按钮统一设置，这个在页面上实现比较容易，按理说tabBar的设置也是简单的，确实是！只要你可以调用tabBar组件的方法即可实现切换主题皮肤，关键在于你会不会使用小程序的方法了。

效果图：

1、tabBar自定义

配置自定义tabBar的方法可以参考官方文档，这个就不用我累赘了，先熟悉这个，在言其他;

2、动态设置背景、按钮状态、文字的颜色，图片、图标等等

前提工作：主题样式文件 common/theme.wxss 和主题图片文件夹 /static/image/v1，/static/image/v2，如下图：

在每个需要主题替换样式 xxx.wxss 头部引入主题文件

@import "./../common/theme.wxss";

1）首先在 app.js 全局文件中设定一个主题参数

globalData: {theme: 1,  // 主题
}

2）然后在其他页面设定参数

data: {theme: 1,
},
onShow(){let that = this;that.setData({theme: app.globalData.theme,})
},

.wxml

<view class="limit_width theme_v{{theme}}"> ... </view>

3）最后在设置页面上的操作

setup.wxml

<view class="limit_width theme_v{{theme}}"><view class="item"><view class="theme_tle">设置主题：</view><view class="flex"><view bindtap="themeTab" class="theme_tab {{theme==1?'tab_bg_br':''}}" data-num="1">新绿(默认)</view><view bindtap="themeTab" class="theme_tab {{theme==2?'tab_bg_br':''}}" data-num="2">海蓝</view></view></view>
</view>

setup.js

data: {theme: 1,
},
onLoad(options) {this.setData({theme: app.globalData.theme,})
},
// 主题切换（逸曦穆泽）
themeTab(e){let num = parseInt(e.currentTarget.dataset.num);this.setData({theme: num});app.globalData.theme = num;   // 全局更新this.getTabBar().watchBack(); // （逸曦穆泽）调用自定义 tabbar 的方法// 保存到本地wx.setStorage({key: "themeSkin",data: num,})
},

3、动态设置tabBar

// （逸曦穆泽）custom-tab-bar/index.js
const app = getApp();
let themeColor = ["#515151","#515151","#000"];
let themeActiveColor = ["#94AC56","#94AC56","#185F95"];
Component({data: {theme: 1,selected: 1,color: "#515151",selectedColor: "#94AC56",list: [{"pagePath": "/pages/home/home","iconPath": "/static/image/nav_home.png","selectedIconPath": "/static/image/v1/nav_home.png","text": "首页"},{"pagePath": "/pages/setup/setup","iconPath": "/static/image/nav_setup.png","selectedIconPath": "/static/image/v1/nav_setup.png","text": "设置"}],},methods: {// （逸曦穆泽）监听并回调watchBack() {var that = this;let num = app.globalData.theme;let listUpd = [{"pagePath": "/pages/home/home","iconPath": "/static/image/nav_home.png","selectedIconPath": "/static/image/v"+num+"/nav_home.png","text": "首页"},{"pagePath": "/pages/setup/setup","iconPath": "/static/image/nav_setup.png","selectedIconPath": "/static/image/v"+num+"/nav_setup.png","text": "设置"}];that.setData({theme: num,color: themeColor[num],selectedColor: themeActiveColor[num],list: listUpd,})},switchTab(e){var that = this;const data = e.currentTarget.dataset;const url = data.url;wx.switchTab({ url });that.setData({selected: data.index});}},
})

.wxml

<view class="tabbar theme_v{{theme}}"> ... </view>

说简单呢，其实也很简单，只是使用了主题样式文件中的类层级样式，js 控制了 theme 参数；

难点在于 tabbar 的切换，怎么调用？肯定是调用 custom-tab-bar/index.js 下的方法，获取全局主题参数设置进去；还有一个主题回显的问题，可以自己去实现，这个也很简单，当然，实在需要的话去下面留言即可。

效果图就不贴了，这个涉及公司与客户的东西！

参考文章：

微信小程序动态设置tab-bar_今晚吃火锅耶的博客-CSDN博客_微信小程序动态tabbar

小程序_动态设置tabBar主题皮肤相关推荐

微信小程序开发动态设置tabbar
需求描述不同身份的用户登录后,动态更改底部导航栏,也就是 tabbar. 注意不是简单改变 tabbar item 的样式,而是需要更改 item 文字,icon, 关键是跳转链接 pagePat ...
微信小程序动态更改标题栏_微信小程序实现动态设置页面标题的方法【附源码下载】...
本文实例讲述了微信小程序实现动态设置页面标题的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① WXML文件标题1 标题2 标题3 还原 ② JS文件 Page({ // 设置 ...
新版微信不停跳转到小程序_如何设置跳转微信小程序
一.功能效果手机网站常用模块:文本.图片.按钮支持设置点击跳转微信小程序. 可实现手机微信端下,打开手机网站可与微信小程序的实现相互跳转. 二.注意事项 [版本]展示中级版及以上版本支持开通. [条 ...
微信小程序 setData动态设置数组中的数据
现在有一组死数据但是想在使用时动态修改其中的值在setData中不能直接设置,真想......,算了是这个和谐的社会救了那个工程师. 接下来,我们去征服她! 死数据: //地图上方控件contro ...
微信小程序动态设置 tabBar
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 使用微信提供的API wx.setTabBarItem(Object object) 动态设置 tabBar ...
微信小程序动态设置tab-bar
微信小程序动态设置tab-bar(自定义) 配置自定义tab-bar的方法这里省略,可以参考官方文档动态设置tab-bar 需求:根据权限判断底部tab-bar显示内容例如普通用户这里不显示赛事t ...
微信小程序view动态长度_微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】...
本文实例讲述了微信小程序实现动态改变view标签宽度和高度的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 >我是view标签,我现在的宽度是{{v ...
微信小程序view动态长度_微信小程序实现动态获取元素宽高的方法分析
本文实例讲述了微信小程序实现动态获取元素宽高的方法.分享给大家供大家参考,具体如下: 我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuer ...
微信小程序获取页面元素高度_微信小程序之动态获取元素宽高
我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用 ...

小程序_动态设置tabBar主题皮肤

1、tabBar自定义

2、动态设置背景、按钮状态、文字的颜色，图片、图标等等

3、动态设置tabBar

小程序_动态设置tabBar主题皮肤相关推荐

最新文章

热门文章