小程序属性单项选择

最新推荐文章于 2024-08-01 21:41:04 发布

小支

最新推荐文章于 2024-08-01 21:41:04 发布

阅读量752

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_40344560/article/details/80016744

本文介绍了一个基于微信小程序实现的颜色选择器组件。通过简洁的代码实现了颜色选择功能，并展示了具体的wxml、css及js实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说，先看效果图：

下面直接贴代码：

wxml:

<!-- 选择颜色 -->
<view class="Choosecolor">
  <view class="colortext">选择颜色</view>
  <view class="colorview">
    <view class="{{curIndex==index ?'itemview':'itemviewss'}}" bindtap="ChooseColor" data-item="{{item}}" data-index="{{index}}" wx:for="{{color}}">{{item.color}}</view>
  </view>
</view>
<text>你选的是：{{title}}</text>

css:

/* 选择颜色 */
.Choosecolor {
  width: 94%;
  margin: 0 auto;
  border-radius: 15rpx;
  padding-bottom: 25rpx;
  background-color: white;
}
.colortext {
  width: 100%;
  font-size: 32rpx;
  font-family: 微软雅黑;
  text-align: center;
  padding: 25rpx 0 0 0;
}
.colorview {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.itemview {
  width: 200rpx;
  height: 75rpx;
  margin-left: 25rpx;
  margin-top: 25rpx;
  text-align: center;
  line-height: 75rpx;
  font-size: 30rpx;
  font-family: 微软雅黑;
  background-color: #dbf5fe;
  border: 2rpx #1bb6ea solid;
  border-radius: 10rpx;
}
.itemviewss {
  width: 200rpx;
  height: 75rpx;
  margin-left: 25rpx;
  margin-top: 25rpx;
  text-align: center;
  line-height: 75rpx;
  font-size: 28rpx;
  font-family: 微软雅黑;
  background-color: white;
  border: 2rpx #efeff4 solid;
  border-radius: 10rpx;
}

js；

Page({

  data: {
    itemview: false,
    color: [
      { color: "红色" },
      { color: "橙色" },
      { color: "黄色" },
    ]
  },

  ChooseColor: function (res) {
    var that = this
    console.log("你选的是：", res.target.dataset.item.color)
    var index = res.target.dataset.index
    console.log(index,"index  index ")
    console.log(that.data.itemview, "that.data.itemview   ")

    if (that.data.itemview == false) {
      that.setData({
        itemview: true,
      })
    } else {
      that.setData({
        itemview: false
      })
    }
    that.setData({
      curIndex: index,
      title: res.target.dataset.item.color
    })
  },
})