返回顶部
首页 > 资讯 > 移动开发 >疑难杂症之——小程序样式动态修改
  • 153
分享到

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

小程序前端javascript 2023-09-12 13:09:43 153人浏览 薄情痞子
摘要

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

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

 在方法中更改

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

在data中的声明:

 在方法中修改样式:

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

最后总结:还有一种方法可以实现,小程序动态样式更换,跟h5绑定ref 一样,只是 需要把 需要绑定ref 的代码块写成组件形式,将ref 绑定在组件上,通过相似的H5操作 也可以实现 动态样式的切换

来源地址:https://blog.csdn.net/m0_71071511/article/details/131642245

--结束END--

本文标题: 疑难杂症之——小程序样式动态修改

本文链接: https://lsjlt.com/news/404553.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作