在微信小程序中如何实现修改view标签背景颜色

这篇文章主要介绍了微信小程序实现点击按钮修改view标签背景颜色功能,涉及微信小程序事件响应及数值运算实现动态设置view背景色样式的相关操作技巧,需要的朋友可以参考下

本文实例讲述了微信小程序实现点击按钮修改view标签背景颜色功能。分享给大家供大家参考,具体如下:

操作步骤:

① 数据绑定view样式背景属性值
② 通过逻辑文件设置该背景属性初始值
③ 通过点击按钮修改背景属性值

关键代码

index.wxml文件:

我是view标签

登录后复制

index.js文件:

var num=0;Page({  data:{    viewBg:'green'  },  changeBg(){    num++;    var result=num/2;    if(num%2==0){            this.setData({        viewBg:'green'      })    }else{      this.setData({        viewBg:'blue'      })    }    console.log(num)    console.log(result)  }})

登录后复制

代码中通过设置num递增数,再针对每次的事件响应进行取余运算判定num的奇偶数,进而实现设置style=”background:{{viewBg}};color:white;height:100px;”中viewBg背景色值在绿色与蓝色之间切换的效果。

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在mongoose中有关于更新对象的详细介绍

在JavaScript中如何实现AOP

使用nginx + node如何部署https

在mongoose中有关于更新对象的详细介绍

在JS函数中有关setTimeout详细介绍

以上就是在微信小程序中如何实现修改view标签背景颜色的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2749446.html

(0)
上一篇 2025年3月8日 05:01:26
下一篇 2025年3月1日 17:33:24

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 在微信小程序中如何修改文字大小

    这篇文章主要介绍了微信小程序实现点击按钮修改文字大小功能,涉及微信小程序事件绑定及setdata动态修改page页面data数据,进而控制页面元素属性动态改变的相关操作技巧,需要的朋友可以参考下 本文实例讲述了微信小程序实现点击按钮修改文字…

    编程技术 2025年3月8日
    200
  • 在微信小程序中如何实改变view标签宽度和高度

    这篇文章主要介绍了微信小程序实现动态改变view标签宽度和高度的方法,涉及微信小程序事件响应及使用setdata针对data数据动态操作相关实现技巧,需要的朋友可以参考下 本文实例讲述了微信小程序实现动态改变view标签宽度和高度的方法。分…

    编程技术 2025年3月8日
    200
  • 在微信小程序中有关如何使用picker组件

    这篇文章主要介绍了微信小程序picker组件简单用法,结合实例形式详细分析了picker组件的功能、使用方法与相关注意事项,需要的朋友可以参考下 本文实例讲述了微信小程序picker组件简单用法。分享给大家供大家参考,具体如下: picke…

    编程技术 2025年3月8日
    200
  • 在微信小程序中有关tabBar用法(详细教程)

    这篇文章主要介绍了微信小程序tabbar用法,结合实例形式详细分析了微信小程序中tabbar的功能、配置项使用方法与操作注意事项,并附带完整demo源码供读者下载参考,需要的朋友可以参考下 本文实例讲述了微信小程序tabBar用法。分享给大…

    2025年3月8日
    200
  • 使用微信小程序如何实现图片选择区域裁剪

    本篇文章主要介绍了微信小程序图片选择区域屏裁剪实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 本文介绍了微信小程序图片选择区域屏裁剪实现方法,分享给大家。具体如下: 效果图 HTML代码   开始裁剪 …

    2025年3月8日
    200
  • 在微信小程序中如何实现鼠标拖动

    这篇文章主要介绍了微信小程序实现鼠标拖动效果,涉及微信小程序事件绑定及元素属性动态操作相关实现技巧,需要的朋友可以参考下 本文实例讲述了微信小程序实现鼠标拖动效果。分享给大家供大家参考,具体如下: 关键代码 index.wxml文件 使用鼠…

    编程技术 2025年3月8日
    200
  • 在微信小程序中如何实现表单验证

    这篇文章主要介绍了微信小程序表单验证功能,结合完整实例形式分析了微信小程序完成表单验证功能所涉及的视图与逻辑操作技巧,需要的朋友可以参考下 本文实例讲述了微信小程序表单验证功能。分享给大家供大家参考,具体如下: Wxml 登录后复制 正在提…

    编程技术 2025年3月8日
    200
  • 在微信小程序中如何实现获取自己所处位置

    这篇文章主要介绍了微信小程序实现获取自己所处位置的经纬度坐标功能,涉及微信小程序地图功能获取经纬度信息的相关操作技巧,需要的朋友可以参考下 本文实例讲述了微信小程序实现获取自己所处位置的经纬度坐标功能。分享给大家供大家参考,具体如下: 1、…

    2025年3月8日
    200
  • 使用微信小程序如何实现购物车功能

    本篇文章主要介绍了微信小程序实战篇之购物车的实现代码示例,详细的介绍了购物车的功能实现,具有一定的参考价值,有兴趣的可以了解一下 哈喽,大家好,快半个月没写了,现在提笔都有点生硬了,一直没更新的原因,一个是代码君也要上班,加上最近工作比较忙…

    2025年3月8日
    200
  • 在微信小程序中如何获取输入数据

    这篇文章主要介绍了微信小程序简单实现form表单获取输入数据功能,涉及微信小程序针对form表单的事件绑定及数据获取等相关操作技巧,需要的朋友可以参考下 本文实例讲述了微信小程序简单实现form表单获取输入数据功能。分享给大家供大家参考,具…

    2025年3月8日
    200

发表回复

登录后才能评论