小程序_动态设置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接口怎么用 ...
最新文章
- hibernate中criteria的一些用法
- 遇见那个对的人,便是爱情
- 机器人能翻转汉堡肉饼 短暂上岗后将“休息”四天
- 原理篇 | 推荐系统之矩阵分解模型
- C语言求最大公约数和最小公倍数的几种算法
- python调用java方法_python调用Java方法传入HashMap ArrayList
- 做互联网项目一定要做可循环,可积累的事情
- 我优化多年的 C 语言竟然被 80 行 Haskell 打败了?
- python开根号函数图像_使用matplotlib / python的平方根刻度
- gog 中 git提交push到远程时出现error: RPC failed; HTTP 413 curl 22
- 树莓派安装rtl8192eu无线网卡驱动
- 基于51单片机的温湿度监测+定时报警系统(c51源码)
- nodeJS中利用第三方内置模块实现数字转大写功能
- 你真正理解什么是“财富自由吗”?
- 软件中的质量属性(二)
- MySQL插入emoji表情错误的2种解决方案,Incorrect string value: '\xF0\x9F\x98\x84'
- python3 实现自动生成入账记录表
- linux下dd工具,dd 工具使用
- google 云开启 ssh 账号密码登录
- var、let和const
热门文章
- 2023联考管综论说文阅卷标准及提分计划:附2010-2022年真题
- Qt5.6.3+VS2013环境搭建教程(最后支持XP系统的Qt版本)
- 百度paddlepaddle七天打卡之青你实战
- PHP实现对微信支付v3版本的订单查询
- 计算机毕业设计基于Android二手车交易网站系统app
- python统计分析书籍_Python数据分析入门书籍推荐
- 一个账号可登录多个微信
- 服务器ie不能打开购物网站,[Answers 分享]通过IE浏览器无法打开网上银行或者支付宝等加密安全站点...
- mac上Python版本不同时给指定的版本安装库
- 第5组 团队展示(组长)