疑难杂症之——小程序样式动态修改

这篇具有很好参考价值的文章主要介绍了疑难杂症之——小程序样式动态修改。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在uniapp 开发中,习惯用ref 来获取dom 节点来修改dom样式,当你运行在H5 上面 没问题,会有样式变化,当你运行在小程序中,会发现样式没有改变,无法实现;
H5的实现:在view 上绑定ref 属性,在方法中使用$refs.绑定的ref值来获取dom节点,并实现动态更新

小程序动态样式,小程序,前端,javascript

 在方法中更改

小程序动态样式,小程序,前端,javascript

 上面是H5中更改
当运行在微信小程序中 需要通过 在view 属性中绑定style 来动态改变值;(这里需要注意的是,你可能会遇到 style绑定的动态变量,在小程序中也不生效,需要查看你的变量是否是字符串,style绑定的变量 只能是字符串才能被微信开发者工具识别,不能是复杂数据类型)
源码如下:在页面中绑定dataStyle[index] , (这里dataStyle[index] 的值是字符串,不是数组哦,注意 ,因为需要动态变化,所以需要数组来存储字符串)

小程序动态样式,小程序,前端,javascript

在data中的声明:

小程序动态样式,小程序,前端,javascript

 在方法中修改样式:

小程序动态样式,小程序,前端,javascript

 这样就可以实现 H5 和 小程序的样式的动态切换;

最后总结:还有一种方法可以实现,小程序动态样式更换,跟h5绑定ref 一样,只是 需要把 需要绑定ref 的代码块写成组件形式,将ref 绑定在组件上,通过相似的H5操作 也可以实现 动态样式的切换文章来源地址https://www.toymoban.com/news/detail-668928.html

到了这里,关于疑难杂症之——小程序样式动态修改的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 一种IDEA疑难杂症的解决办法

    针对于IDEA各种解析,运行时问题,但是无法通过搜索引擎得到答案的问题请试试此方法。 此文件夹为idea首次导入项目时根据项目情况自动生成的配置文件。方便idea下次更快的解析项目。但是某些情况,我们更新了项目结构,或者使用代码生成器生成了代码,但是idea不能及

    2024年02月11日
    浏览(37)
  • 解决电脑连接HC-06出现的疑难杂症

    1.HC-06接电信号灯不亮 一开始用面包板,32单片机给HC-06供电,发现HC-06信号灯不亮。 考虑到供电稳定性的问题,暂时用ST-LINK给HC-06供电,信号灯开始闪烁。 2.使用CH340接HC-O6发送AT指令没反应 波特率初始默认9600,连接后发送框不要打回车,清空后再敲入AT发送,即可收到回复。

    2024年04月26日
    浏览(41)
  • UE 各类疑难杂症/快捷键/细节/优化方式

    链接: link 链接: [link](https://blog.csdn.net/aoxuestudy/article/details/124902503?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166358838316800184178729%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257Drequest_id=166358838316800184178729biz_id=0utm_medium=distribute.pc_search_result.none-task-blog-2 all sobaiduend~default-1-124

    2024年02月04日
    浏览(65)
  • 使用git遇到的各种疑难杂症之解决办法

    git init 初始化本地git仓库,会生成.git/文件夹 git add . 添加文件到暂存区,文件开始被跟踪,文件修改后也要重新跟踪 git commit -m \\\'说明文字\\\'  将暂存区的文件,提交到本地仓库 以上两步,可以合成一步 git commit -a -m \\\'说明文字\\\' git log 查看日志,罗列所有提交过的历史记录,根据

    2024年04月29日
    浏览(39)
  • Toaster - Android 吐司框架,专治 Toast 各种疑难杂症

    https://github.com/getActivity/Toaster 想了解实现原理的可以点击此链接查看:Toaster 源码 如果你的项目 Gradle 配置是在 7.0 以下,需要在 build.gradle 文件中加入 如果你的 Gradle 配置是 7.0 及以上,则需要在 settings.gradle 文件中加入 配置完远程仓库后,在项目 app 模块下的 build.gradle 文件

    2024年02月07日
    浏览(48)
  • 【故障排查】10分钟解决Quartz重复调度的疑难杂症

    我司使用Apache DolphinScheduler作为调度框架很久了,感兴趣的小伙伴可以看看这些干货文章: 因为之前监控到会出现重复的调度的问题,所以此文记录排查重复调度问题的全过程,希望对社区其他的小伙伴能够起到抛砖引玉的作用! 注:本文使用的DolphinScheduler 3.1.1的版本。 数

    2024年03月18日
    浏览(44)
  • 值得深思的八个自动化测试疑难杂症

    去年有写过两篇博客,分别是浅谈UI自动化测试和浅谈接口自动化测试,都是一些基础的方法论的内容,今年转岗专门做自动化测试,有了很多新的发现,当然,也遇到了很多的挑战。 遂重开一篇博客,聊聊最近做自动化测试遇到的一些挑战,以及自己的解决方法和一些思考

    2024年02月11日
    浏览(47)
  • 手把手kubernetes本地化部署(含疑难杂症排查解析)

    公众号: MCNU云原生 ,文章首发地,欢迎微信搜索关注,更多干货,第一时间掌握! Kubernetes是一个容器编排系统,用于自动化应用程序部署、扩展和管理。本指南将介绍Kubernetes的基础知识,包括基本概念、安装部署和基础用法。 一、什么是Kubernetes? Kubernetes是Google开发的开

    2024年02月01日
    浏览(80)
  • Python爬虫-requests.exceptions.SSLError: HTTPSConnectionPool疑难杂症解决(1)

    前言 本文是该专栏的第7篇,后面会持续分享python爬虫案例干货,记得关注。 在爬虫项目开发中,偶尔可能会遇到SSL验证问题“ requests.exceptions.SSLError: HTTPSConnectionPool (host=\\\'www.xxxxxx.com\\\', port=443): Max retries exceeded with url ... ”。亦或是验证之后的提示警告“ InsecureRequestWarning: Un

    2024年02月05日
    浏览(43)
  • 你好visual studio 2019:关于vs2019的安装和疑难杂症

    目录 一.Visual Studio 2019安装方法 二.Visual Studio 2019的基础操作 ①.新建项目 ②.调整Visual Studio 主题颜色 ③.调整Visual Studio 字体 ④.Visual Studio 字体选择 三.关于#define_CRT_SECURE_NO_WARNINGS问  1.首先打开window自带的Microsoft Store Microsoft Store 也就是俗称的微软商城。 2.在Microsoft Store的搜

    2024年02月10日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包