前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序鼠标点击按钮(改变背景颜色字体)

小程序鼠标点击按钮(改变背景颜色字体)

作者头像
王小婷
发布2018-12-28 16:23:10
3.9K0
发布2018-12-28 16:23:10
举报
文章被收录于专栏:编程微刊

目标需求:实现下图,给点击的view增加类,每次只能选择一个。 主要思路:给点击的view增加类,依靠点击的index对state进行赋值。如果相同时,给该view增加类。

效果演示:

wxml

代码语言:javascript
复制
<view class="iconusecont-div {{state==index?'active-tag':''}}" bindtap="select_use" wx:for="{{use}}" data-key='{{index}}'>
  <view class="flex-item">
    <rich-text class='use_name'>{{item.use_name}}</rich-text>
  </view>
</view>

wxss

代码语言:javascript
复制
/* 用途 */

.iconusecont-div {
  display: inline-block;
  width: 32%;
  text-align: center;
  margin-top: 30rpx;
}

.flex-item {
  display: inline-block;
  width: 173rpx;
  height: 78rpx;
  font-size: 26rpx;
  border: 2rpx solid #999;
  text-align: center;
  border-radius: 10rpx;
  color: #000;
  cursor: pointer;
  line-height: 30rpx;
}

.use_name {
  font-size: 34rpx;
  line-height: 79rpx;
}

.active-tag .flex-item {
  background: #03e2ff;
  color: #fff;
  border: 1rpx solid #fff;
}

js

代码语言:javascript
复制
Page({
  data: {
    use: [{
        "use_name": "全部"
      },
      {
        "use_name": "经济实惠型"
      },
      {
        "use_name": "家用学习型"
      },
      {
        "use_name": "豪华发烧型"
      },
      {
        "use_name": "疯狂游戏型"
      },
      {
        "use_name": "商务办公型"
      },
      {
        "use_name": "经济实惠型"
      },
      {
        "use_name": "家用学习型"
      },
    ],
    state: '',
  },
  //选择用途后加样式
  select_use: function(e) {
    this.setData({
      state: e.currentTarget.dataset.key,
    });
  },
  onReady: function() {},
})

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,对于博客上面有不会的问题,可以加入qq群聊来问我:473819131。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.12.21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档