uniapp小程序端使用计算属性动态绑定style样式踩坑

已于 2024-02-20 10:51:42 修改
阅读量1.3k 收藏 10
点赞数 9
分类专栏： uniapp 文章标签： uni-app 小程序 前端
于 2024-02-07 10:48:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53339757/article/details/136066370
版权
本文讲述了在uniapp开发中，如何正确使用计算属性动态绑定小程序端的复杂style，强调了返回值必须为json字符串，而非对象，以确保功能正常运行。作者还分享了一个封装的个性化tab组件示例。
摘要由CSDN通过智能技术生成

踩坑点:

        使用uniapp编译小程序端动态绑定复杂style使用计算属性方式，return必须返回json字符串格式，不能返回object，否则会不起作用。

代码总览

视图层

逻辑层（注意这里是使用的计算属性哈）

这里我封装成了一个个性化tab组件，支持APP端和微信小程序端，详细可去插件市场直接调入到项目即可sevenq-tab个性化tab组件

效果图如下

爱池鱼的酱酱仔
关注
  • 9
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
style 对象 微信小程序_微信小程序①_JavaScript 进阶路 - SegmentFault 思否
weixin_39778106的博客
12-21 257
写一个微信小程序系列的开发关键点小程序基本架构微信开发者工具工程目录关于小程序的工程架构, 文件目录, 已经有很多coder发表过相关资料. 这里不做更多解释, 留存一篇留待翻阅:小程序工程目录结构介绍小程序DOM布局小程序可以使用行内样式, 可以使用class样式style 实现行内样式:{{motto }}双括号实现动态样式// .wxml{{motto }}// .jsvar PARAM =...
小说阅读uniapp小程序
06-27
【标题】"小说阅读uniapp小程序"所涉及的知识点主要集中在使用uniapp框架开发微信小程序，为用户提供在线阅读小说的功能。uniapp是一个基于Vue.js的多端开发框架，支持快速构建跨平台的应用，包括微信小程序、H5、...
微信小程序 动态绑定样式
PrimaryColor
08-05 3327
使用三目运算符，左边的表达式成立，执行一个样式，否则另一个样式。 <view> <view class="{{active===0?'a':''}}">分类</view> <view class="{{active===1?'a':''}}">排行</view> </view>
在 uni-app 中，可以通过几种不同的方式来动态地绑定 CSS 样式?
最新发布
baifangfang521的博客
05-27 721
在 uni-app 中，你可以通过几种不同的方式来动态地绑定 CSS 样式。这通常涉及到使用 JavaScript 来计算或改变样式，并将这些样式应用到组件上。
微信小程序动态绑定style样式
热门推荐
海贼王某人的博客
03-23 3万+
微信小程序动态绑定style样式，homeOutObj.color是你js文件里面设置的颜色，可以根据用户操作改变值，达到动态渲染效果，如果样式比较复杂的话建议绑定动态class 传送门：绑定动态class
关于微信小程序style动态绑定问题
m0_45953836的博客
04-12 5135
直接书写,报红但是生效 <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
vue、uniapp中动态添加绑定style、class 9种方法实现
一步一个脚印，踏实努力，向着目标前进
08-31 8751
使用场景：当class和style属性是固定不变的时候，可以直接在模板中写死。优点：简单直接，没有额外的计算和逻辑。缺点：无法根据条件动态修改class和style。使用场景：当class和style属性需要根据组件的data或props属性动态变化时，可以使用v-bind来动态绑定。优点：可以根据条件动态修改class和style。缺点：需要在模板中写表达式，有一定的复杂度。使用场景：当class和style属性的计算逻辑比较复杂时，可以使用计算属性来生成class和style对象。
uniapp vue 小程序动态style和class的用法
qq_45716607的博客
12-12 2321
https://blog.csdn.net/Shids_/article/details/117531088 vue 1.1 绑定单个class <div :class="{'active':isActive}"></div> data() { return { isActive: true }; } 渲染结果 <div class="active"></div> 1.2 绑定多个class <div class="
微信小程序 动态绑定事件并实现事件修改样式
08-30
在微信小程序中，动态绑定事件和根据事件修改样式是实现用户交互的重要手段。本文将详细介绍如何在微信小程序中实现这一功能，并提供一个具体的实例代码。 首先，动态绑定事件是通过在WXML（微信小程序的结构层）...
微信小程序uniapp银行卡卡片样式组件
05-09
2. **数据绑定**：利用uniapp的Vue.js语法，将后台获取的银行卡信息动态绑定到组件上，如卡号、姓名等，确保数据的实时更新。 3. **图片处理**：银行Logo需要适配不同尺寸和格式，可能需要使用CSS背景图或者引入...
vue计算属性+vue中class与style绑定(推荐)
10-15
本文将重点探讨Vue中的两个核心特性：计算属性（Computed Properties）以及如何在模板中绑定类（Class）和样式（Style）。这些特性极大地提升了Vue应用的可维护性和表现力。 ### Vue计算属性 计算属性是Vue中用于...
uniapp 微信小程序 时间段选择组件
07-24
总之，`uniapp`微信小程序的时间段选择组件涉及到了`uni-app`的基础知识，如组件化开发、数据绑定、事件处理等，同时也涵盖了微信小程序的特定API和自定义样式设计。通过学习和实践，开发者可以构建出符合业务需求、...
uni-app微信小程序通过data动态绑定style(:style)语法
LordYuchen的博客
10-16 996
uniapp开发微信小程序 的:style语法
uniapp动态修改样式，使用style动态修改样式，避坑
我乃世间蓬蒿人
08-17 4422
这里我是写微信小程序，按照uniapp写法应该用upx，但是这里写upx无效，所以应该是根据平台使用对应的像素单位。微信小程序用的rpx，用px也能生效。不知道为什么无效，upx换车px，rpx也无效。所以打算根据计算数据条数修改图表高度。有更好解决办法的希望能留言互相学习。使用echarts做柱状图套嵌在。中，将xy轴颠倒后，不会自动撑大。经过查询后找到以对象的方式放入。下面找到一种，将对象直接写到。...
疑难杂症之——小程序样式动态修改
m0_71071511的博客
07-10 4875
动态更新小程序部分组件样式
vue：动态绑定样式（style及class）
a11222335658945的博客
05-18 1567
1.style动态样式。2.class动态样式。
【Uni-App社区小程序】013-Class 与 Style 绑定
訾博（ZiBo）的博客
11-07 307
目录 一、官方文档 1、地址 2、内容 用在组件上： 二、应用 1、默认实现 代码： 运行结果： 2、绑定Class 代码： 运行结果： 3、条件绑定Class（选择） 代码： 运行结果： 4、条件绑定Class（是否绑定） 代码： 运行结果： 5、绑定Style（与Class类似） 代码： 运行结果： 一、官方文档 1、地址 https://uniapp.dcloud.net.cn/use?id=class-%e4%b8%8e-style-%e7%bb%91%
uni-app对动态class和动态style的处理
qq_35323539的博客
09-05 1186
css针对动态class和style的处理
uniapp动态style发布到微信小程序报错 WXML 文件编译错误
zhangyu_98的博客
06-27 652
uniapp开发动态style发布到小程序段报错，但是h5段是好的 ，看了小程序端编译的代码发现转换有问题小程序报错 ：控制台报错页面报错。
uniapp小程序echarts使用
08-13
在uniapp小程序中使用echarts，可以按照以下步骤进行操作： 1. 下载EchartsForWx插件，这个插件可以在uniapp中使用echarts图表库。 2. 在你的uniapp项目中引入EchartsForWx插件，并按照插件文档中的指引进行配置。 3. 在需要使用echarts的页面或组件中，引入echarts的相关代码和样式表。 4. 根据echarts的文档和示例，使用echarts的API来绘制所需的图表。 5. 在uniapp中，可以使用vue的语法和数据绑定来动态更新图表的数据和样式。 需要注意的是，在uniapp中使用echarts可能会遇到一些兼容性问题，特别是在不同小程序平台（如微信、支付宝、百度等）上的兼容性。如果需要考虑兼容性问题，可以考虑使用uchart，它是专门为多个小程序平台兼容设计的图表库，虽然样式不如echarts丰富，但可以解决兼容性的问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [UNIAPP微信小程序使用Echarts](https://blog.csdn.net/qq_35921773/article/details/127536926)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [uniapp小程序使用原生echarts非第三方封装 小程序使用echarts 图表 可视化](https://blog.csdn.net/weixin_49855711/article/details/127960136)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱池鱼的酱酱仔

您的鼓励是我前进的动力哦~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值