找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序开发资源

关注:1468

所属分类: 微信开发 微信小程序开发资源

本版块为微信小程序资源分享版块,包括微信小程序开发中可能会用到的各类小程序开发工具、小程序demo及开发教程等。

快捷导航www.henkuai.com):微信小程序开发者社区微信小程序开发问答微信小程序开发交流群


[最新文章] 微信小程序实现动态改变文本颜色

[复制链接]
查看: 4376|回复: 11
最佳答案
2 

1

主题

9

帖子

78

积分

新人求带

积分
78
 楼主| 发表于 2017-2-9 16:07:00 | 显示全部楼层 |阅读模式
点击按钮切换文字的颜色
605.png

js
  1. var pageData={}
  2. pageData.data={
  3.     color:'black',
  4.     colorArray:['red','blue','yellow','green','black']
  5. }
  6. for(var i=0;i<5;++i){
  7.     (function(index){
  8.         pageData['bindtap'+index]=function(e){
  9.             this.setData({
  10.                 color:this.data.colorArray[index]
  11.             })
  12.         }
  13.     })(i)
  14. }
  15. Page(pageData)
复制代码

wxml
  1. <text class="view" style="color:{{color}}">我是view标签</text>
  2. <view style="display:flex;">   
  3.     <block wx:for="{{colorArray}}" wx:key="" wx:for-item="Color">
  4.         <button class="btn" style="background:{{Color}};"  type="default" bindtap="bindtap{{index}}"></button>
  5.     </block>
  6. </view>
复制代码

wxss
  1. page{
  2.     background: whitesmoke;
  3. }
  4. .view{
  5.     height: 100px;   
  6.     font-size: 20pt;
  7.     font-weight: bold;
  8. }
  9. .btn{
  10.     width: 50px;
  11.     height: 50px;
  12. }
复制代码

回复

使用道具 举报

最佳答案
0 

0

主题

36

帖子

831

积分

专家路上

积分
831
发表于 2017-2-16 11:14:06 | 显示全部楼层
这个好
回复

使用道具 举报

最佳答案
0 

0

主题

3

帖子

443

积分

略知一二

积分
443
发表于 2017-2-16 18:28:01 | 显示全部楼层
又见不是一般的好贴。。。
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

45

帖子

579

积分

略知一二

积分
579
发表于 2017-2-17 13:29:02 | 显示全部楼层
感谢分享!!
回复

使用道具 举报

最佳答案
0 

0

主题

7

帖子

152

积分

新人求带

积分
152
发表于 2017-2-22 11:23:07 | 显示全部楼层
不错不错
回复

使用道具 举报

最佳答案
0 

0

主题

2

帖子

43

积分

新人求带

积分
43
发表于 2017-5-9 14:50:40 | 显示全部楼层
如果是换背景图呢
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

4

帖子

87

积分

新人求带

积分
87
发表于 2017-5-17 11:20:01 | 显示全部楼层
不错,学习了
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

16

帖子

117

积分

新人求带

积分
117
发表于 2017-5-19 10:54:59 | 显示全部楼层
这个效果是不是每点一次都会改变颜色?
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

41

帖子

245

积分

新人求带

积分
245
发表于 2017-6-22 10:37:45 | 显示全部楼层
不一般的好贴,
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

71

帖子

270

积分

新人求带

积分
270
发表于 2017-8-30 11:05:50 | 显示全部楼层
感谢楼主分享
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


易域网-您身边的域名管家

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

广告推广
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com