微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】

2024-04-06 22:39:54

本文实例讲述了微信小程序实现点击按钮修改字体颜色功能。分享给大家供大家参考，具体如下：

1、效果展示

2、关键代码

index.wxml文件

<view class="view" style="color:{{color}}">我是view标签</view>
<view style="display:flex;">
  <block wx:for="{{colorArray}}" wx:key="" wx:for-item="Color">
    <button class="btn" style="background:{{Color}};" type="default" bindtap="bindtap{{index}}"></button>
  </block>
</view>

这里使用bindtap="bindtap{{index}}"绑定事件动态修改style="color:{{color}}"中的颜色值。

index.js文件

var pageData={}
pageData.data={
  color:'black',
  colorArray:['red','blue','yellow','green','black']
}
for(var i=0;i<5;++i){
  (function(index){
    pageData['bindtap'+index]=function(e){
      this.setData({
        color:this.data.colorArray[index]
      })
    }
  })(i)
}
Page(pageData)

3、源代码点击此处本站下载。

希望本文所述对大家微信小程序开发有所帮助。

微信小程序配置顶部导航条标题颜色的实现方法

微信小程序配置顶部导航条标题颜色的实现方法关于小程序导航顶部配置都写在.json文件中. { "window":{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "bac
微信小程序实现动态设置页面标题的方法【附源码下载】

本文实例讲述了微信小程序实现动态设置页面标题的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① WXML文件 <button bindtap="setBiaoTi1">标题1</button> <button bindtap="setBiaoTi2">标题2</button> <button bindtap="setBiaoTi3">标题3</button&g
微信小程序中吸底按钮适配iPhone X方案

随着第二三批iPhone X的陆续到货,身边的土豪们纷纷用了起来,因为iPhone X的齐刘海导致的适配问题很多,所以这群土豪更沉浸在各种找bug中,不出所料,豌豆公主小程序在一些地方也出现了一丢丢体验不好的地方,主要是商品详情页和购物车的吸底按钮栏,会与 Home Indicator 横条重叠,这样在点击下方按钮时很容易误触发手势操作,如下图: 截图来自网络,侵删是bug就得修,是体验问题就得优化,于是立马搞了一台iPhone X开始研究. 网页端的适配还好,有 viewport meta
微信小程序开发之视频播放器 Video 弹幕弹幕颜色自定义实例

把录音的模块尝试过之后就想着微信小程序的视频播放会不会更有趣? 果然,微信小程序视频自带弹幕.是不是很爽,跟我一起来看看. 先上gif: 再上几张图: 1.视频播放器 2.选择弹幕颜色 3.弹幕来了... 1.视频播放器微信已经封装的非常好.我这里只用了很简单的几个属性由于以前没做过弹幕,看到danmu-list就激动了.而且只需要将弹幕内容加入集合即可. 弹幕列表的元素: { text: '第 1s 出现的红色弹幕',//文本 color: '#ff0000',//颜色 time: 1//
微信小程序实现多个按钮toggle功能的实例

微信小程序实现多个按钮toggle功能的实例如下图所示,实现该按钮toggle功能. 百度上很多都是只设置一个按钮的toggle,所以我现在来稍微总结下:多个按钮如何实现自身的toggle功能. 原理: 1,列表展示的时候,我们会用wx:for 来循环数据,那么我们就会得到相应的当前的第几个数据(即 wx:key="index") 2.在每一个数据里面添加一个toggle的属性,toggle=false 则不展示, 3.设置一个点击方法,获取当前按钮所在的是第几个数据,然后将相应的
微信小程序 input输入及动态设置按钮的实现

微信小程序 input输入及动态设置按钮的实现 [需求]实现当手机号已填写和协议已勾选时,"立即登录"按钮变亮,按钮可点击:若有一个不满足,按钮置灰,不可点击:实现获取短信验证码,倒计时提示操作:对不满足要求内容进行toast弹窗提示. <view class="container">  <view class="section"> <text class="txt"
微信小程序按钮滑动的实现方法

微信小程序按钮滑动的实现方法一.先看东西滑动前滑动后二.再上代码 index.wxml <view class="content"> <view class="sliderContent"> <input placeholder="验证码" placeholder-class="input-placeholder" disabled="{{disabled}}" /&
微信小程序实现列表项滑动显示删除按钮的功能

微信小程序实现列表项滑动显示删除按钮的功能微信小程序并没有提供列表控件,所以也没有iOS上惯用的列表项左滑删除的功能,SO只能自己干了. 原理很简单,用2个层,上面的层显示正常的内容,下面的层显示一个删除按钮,就是记录手指滑动的距离,动态的来移动上层元素,当然上层用绝对定位. wxml: <view class="container"> <view class="record-box" data-datetime="{{record.
微信小程序组件 contact-button（客服会话按钮）详解及实例代码

微信小程序组件 contact-button contact-button 客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会话. 属性名类型默认值说明 size Number 18 会话按钮大小,有效值 18-27,单位:px type String default-dark 会话按钮的样式类型,有效值 default-dark, default-light session-from String 用户从该按钮进入会话时,开发者将收到带上本参数的事件推送.本
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】

本文实例讲述了微信小程序实现点击按钮修改字体颜色功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="color:{{color}}">我是view标签</view> <view style="display:flex;"> <block wx:for="{{colorArray}}" wx:k
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】

本文实例讲述了微信小程序实现点击按钮修改文字大小功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="font-size:{{fontSize}}pt">我是view标签</view> <button class="btn" type="default" bindtap="magnifyFontS
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】

本文实例讲述了微信小程序实现点击按钮修改view标签背景颜色功能.分享给大家供大家参考,具体如下: 1.效果展示 2.操作步骤: ① 数据绑定view样式背景属性值 ② 通过逻辑文件设置该背景属性初始值 ③ 通过点击按钮修改背景属性值 3.关键代码 index.wxml文件: <view style="background:{{viewBg}};color:white;height:100px;">我是view标签</view> <button type=
Android开发之在程序中时时获取logcat日志信息的方法(附demo源码下载)

本文实例讲述了Android开发之在程序中时时获取logcat日志信息的方法.分享给大家供大家参考,具体如下: 今天分享一个在软件开发中很实用的例子,也是这几天在通宵加班中我使用的一个小例子, 在程序中监听Log信息. 为什么说它实用?原因是Android的开发厂商各种修改之后手机和手机之间以后存在很多差异.比如说魅族M9手机开发中如果项目中涉及到访问手机系统的地方,例如访问系统短信库,M9手机它会提示一个dialog框让用户自己去选择访问还是不访问.这样就给开发适配带来了巨大的麻烦.本来
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】

本文实例讲述了微信小程序实现点击按钮移动view标签的位置功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="left:{{viewLeft}}px;">我是view标签</view> <button class="btn" type="default" bindtap="changeLocat
微信小程序实现点击按钮后修改颜色

这篇文章主要介绍了微信小程序实现点击按钮后修改颜色,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下需实现的功能: 点击按钮后,按钮的颜色会加深效果展示: 原按钮点击后的按钮思路: 给按钮设置一个点击事件,点击了按钮后,修改按钮的样式. 代码: test.wxml文件 <view wx:if="{{sty==0}}"> <view class="score" style="backg
微信小程序mpvue点击按钮获取button值的方法

在小程序里面是没有dom元素的,这个我们只要会小程序的应该都知道,但是在平时开发中我们偶尔会遇到需要点击某个元素获取它的值的情况,在这里给大家列举了两种情况解决方法方式一:数据绑定这种情况的话,对应的场景是只有一个按钮或元素调用这个方法的情况下的在你的.vue文件中的data数据里面添加变量 data() { return { msg:'苏喂苏喂苏喂' }; getData(){ console.log( this.msg ) } 按钮上 <button @click="getDat
微信小程序实现点击文字页面跳转功能【附源码下载】

本文实例讲述了微信小程序实现点击文字页面跳转功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.js文件 Page({ data:{ // text:"这是一个页面" }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面
微信小程序tabBar模板用法实例分析【附demo源码下载】

本文实例讲述了微信小程序tabBar模板用法.分享给大家供大家参考,具体如下: 众所周知,微信小程序的tabBar都是新开页面的,而微信文档上又表明了最多只能打开5层页面.这样就很容易导致出问题啦,假如我的tabBar有5个呢?下面是微信原话: 一个应用同时只能打开5个页面,当已经打开了5个页面之后,wx.navigateTo不能正常打开新页面.请避免多层级的交互方式,或者使用wx.redirectTo 因此这几天想着根据微信tabBar数组来自定义模板供页面调用.不过我在list里面每个对象都
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】

本文实例讲述了微信小程序实现动态改变view标签宽度和高度的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="width:{{view.Width}}px;height:{{view.Height}}px;" >我是view标签,我现在的宽度是{{view.Width}}px,高度是{{view.Height}}px</view> <inpu

微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】

相关推荐

随机推荐