微信小程序动态更换 UI 色及标题

2019-06-04    分类:后端    标签:微信小程序    阅读:906   


小程序动态修改界面颜色,提升用户体验度,以下十个简单的例子,供大家参考,后端代码不多说,主要是前段实现。

后端界面:

image.png

接口 PHP 代码:

	public function getSetup(){
		// 首页轮播
	    $resSetup=db('minwx_setup')->limit(1)->select();
	    return json(['code'=>200,'resSetup'=>$resSetup]);
	}

小程序 index.js 代码:

Page({
data: {
resSetup:[],
},
onLoad: function () {
this.setup();
},

setup:function(){
   // 公共样式
   var that = this
   wx.request({
    url: app.appUrl +'getSetup',
    success(res) {
    that.setData({
    resSetup: res.data.resSetup
})
//动态设置页面导航条颜色
wx.setNavigationBarColor({
    frontColor: res.data.resSetup[0]['color_tittle'],
    backgroundColor: res.data.resSetup[0]['color_tb'],
})
//动态设置 tabBar 的整体样式
    wx.setTabBarStyle({
    color: res.data.resSetup[0]['color_db_title'],
    selectedColor: res.data.resSetup[0]['color_db_sectitle'],
    backgroundColor: res.data.resSetup[0]['color_db']
    })
    }
})
//动态设置当前页面的标题
 wx.setNavigationBarTitle({
   title: res.data.resSetup[0]['title']
 })
},


【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年99元 618年中云钜惠大促,精选云产品1折起,助力新基建,618年中大促云服务器88元

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/adetail/136.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
头像

简忆博客
仕而优则学,学而优则仕。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×