小程序如何动态设置背景色

原创 已于 2025-02-12 15:50:25 修改 · 157 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序 #前端

于 2025-02-12 15:49:43 首次发布

话不多说，直接上代码：

<view :style="[sss]"></view>

onLoad() {
     this.changeStyle()
},

methods: {
     changeStyle(){
         this.sss = {
             'background-color': '#fec024'
         }
     }
}

PS：在小程序中不能直接使用dom元素哦！~

核动力驴_
关注
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
08-28
本文详细介绍了微信小程序实现点击按钮修改view标签背景颜色功能的相关知识点，包括微信小程序事件响应、数据绑定及样式设置、逻辑文件设置背景属性初始值、点击按钮修改背景属性值、数值运算实现动态设置背景色样式...
Android小程序实现切换背景颜色
01-03
本文实例为大家分享了Android实现切换背景颜色的具体代码，供大家参考，具体内容如下 （1）首先打开界面布局文件，添加两个Button xmlns:tools=http://schemas.android.com/tools android:layout_width=fill_...
微信小程序 JS动态修改样式的实现代码
10-20
主要介绍了微信小程序 JS动态修改样式的实现代码,原理是绑定数据，然后动态的修改数据，从而实现动态样式的改变而已,需要的朋友可以参考下
微信小程序-语法
软工二班秦同学的博客
04-07 725
基本语法
微信小程序js如何动态设置css
weixin_38120360的博客
03-14 5369
在上面的例子中，我们在onLoad()方法中使用setData()方法设置了myClassStyle属性的值为'color: red;'，这样就动态设置了my-class样式类的CSS样式。微信小程序中可以使用setData()方法动态设置CSS样式。这样就可以动态设置CSS样式了。
微信小程序动态设置style
m0_55881852的博客
04-03 268
【代码】微信小程序动态设置style。
微信小程序动态绑定style样式
热门推荐
海贼王某人的博客
03-23 3万+
微信小程序动态绑定style样式，homeOutObj.color是你js文件里面设置的颜色，可以根据用户操作改变值，达到动态渲染效果，如果样式比较复杂的话建议绑定动态class 传送门：绑定动态class
小程序中使用css var变量(使js可以动态设置css样式属性)
10-15
在微信小程序中，CSS变量的使用提供了一种动态管理样式的机制，使得JavaScript可以间接修改CSS样式。在小程序中直接修改样式较为复杂，因为小程序的原生组件不支持CSS的语法，但通过CSS变量，我们可以解决这个问题。...
微信小程序-页面配置-顶部导航栏背景色渐变
11-29
本主题主要聚焦于“微信小程序-页面配置-顶部导航栏背景色渐变”，旨在实现自定义tabBar页面的顶部导航栏，同时确保该导航栏与其它tabBar页面的导航栏风格保持一致，特别是导航栏标题的文字排版。 微信小程序提供了...
小程序scroll-view与css左右滑动超出部分背景颜色不显示的解决方法
01-04
4. **微信小程序的特殊性**：微信小程序自身的渲染机制可能对背景颜色处理有所限制。 针对这些问题，我们可以采取以下解决方案： 1. **检查样式覆盖**：确保`scroll-view`的背景颜色设置没有被其他更具体的CSS规则...
微信小程序 动态设置 page 样式
旸君颜的博客
08-08 230
可以使用 wx.setPageStyle 函数设置 page 的样式，特色样式使用 css Text。
Web前端之微信小程序动态绑定Style与class
优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/
03-22 5802
Web前端之微信小程序动态绑定Style与class
微信小程序动态样式绑定
qq_40287084的博客
08-15 652
微信小程序动态样式绑定
微信小程序中的列表渲染，动态设置class类 ,style样式，在元素上绑定数据
yinge0508的博客
03-15 3044
微信小程序——列表渲染wx:for <view wx:for="{{array}}"> {{index}}: {{item.message}} </view> Page({ data: { array: [{ message: 'foo', }, { message: 'bar' }] } }) 也可以使...
关于微信小程序style动态绑定问题
m0_45953836的博客
04-12 5708
直接书写,报红但是生效 <view class="action border-custom" wx:if="{{isCustom}}" style="width:{{Custom.width}}px;height:{{Custom.height}}px;margin-left:calc(750rpx - {{Custom.right}}px)"> <text class="icon-back" bindtap="BackPage"></text> <tex
UniApp 微信小程序绑定动态样式 :style 避坑指南
每天都要努力学习哦~~
05-14 2158
平台H5✅ 正常✅ 正常App✅ 正常✅ 正常微信小程序❌ 无法解析✅ 正常所以建议在任何平台统一使用的形式，既能保证跨端兼容，又能避免微信小程序中的 bug。
微信小程序动态添加class样式
小傲哥哥的博客
03-02 1万+
<view class="tabs_title {{item.isActive?'active':''}}" wx:for="{{tab}}" wx:key="id" >{{item.value}}</view> 如上面例子所示，在原有的class样式类 tabs_title 的基础上再给元素添加一个act...
uniapp 微信小程序配置全局主题色、实现动态修改主题色
wolf艺术人生
03-28 1万+
本文的实现目标是全局配置小程序的整体主题色，包括本地图标的色调。第一步实现在本地可以统一修改整体的主题色以及本地图标的颜色；第二步实现通过后台接口动态调整小程序前端的整体主题色以及本地图标颜色。本地图标的主题色调整需要使用svg格式的图片，关于svg图片颜色修改可以参考文章。
微信小程序动态绑定style报错(已解决)！！！
weixin_48070278的博客
03-31 675
今天因为小程序用vscode启动了一次，页面上动态绑定的style样式一直报错，苦苦找寻了一个小时终于解决！这时我们找到根目录.vscode文件夹下的settings.json把html改为xml完美解决。下面是wxml文件动态绑定的style和js代码。不多说，直接上代码！
uniapp微信小程序动态设置背景色
最新发布
09-24
在uniapp开发的微信小程序中，动态设置背景色可以通过不同场景来实现。 ### 动态设置导航栏背景色 可以在页面的`onLoad`生命周期函数中使用`uni.setNavigationBarColor`方法来动态设置导航栏的背景色。示例代码如下： ```javascript onLoad() { uni.setNavigationBarColor({ frontColor: '#000000', // 设置前景颜色为黑色 backgroundColor: '#FFFFFF', // 设置导航栏背景颜色为白色 animation: { duration: 400, timingFunc: 'easeIn' } }); } ``` 这里的`backgroundColor`参数可以根据需求动态修改，实现导航栏背景色的动态设置。此方法在引用[3]中有相关体现。 ### 动态设置页面背景色 在页面的样式中，可以通过数据绑定的方式动态设置页面的背景色。 ```vue <template> <view :style="{ backgroundColor: bgColor }"> <!-- 页面内容 --> </view> </template> <script> export default { data() { return { bgColor: '#FFFFFF' }; }, methods: { changeBgColor() { this.bgColor = '#FF0000'; } } }; </script> ``` 在上述代码中，通过`data`中的`bgColor`变量绑定到`view`的`backgroundColor`样式上，然后在方法中可以动态修改`bgColor`的值，从而实现页面背景色的动态设置。 ### 动态设置全局背景色 可以通过修改`pages.json`中的`globalStyle`里的`backgroundColor`来设置全局背景色。不过要动态修改，需要结合本地存储等方式。例如，在某个事件触发时修改本地存储的值，然后在程序启动时读取该值并设置全局背景色。 ```javascript // 修改本地存储的值 uni.setStorageSync('bgColor', '#FF0000'); // 在App.vue中读取并设置全局背景色 onLaunch() { const bgColor = uni.getStorageSync('bgColor'); if (bgColor) { uni.setNavigationBarColor({ frontColor: '#000000', backgroundColor: bgColor }); } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值