小程序选中和未选中的实现

最新推荐文章于 2024-03-11 23:55:08 发布

不理发的阿三

最新推荐文章于 2024-03-11 23:55:08 发布

阅读量1.2k

点赞数 2

分类专栏：小程序开发文章标签：小程序选中和未选中的实现

本文链接：https://blog.youkuaiyun.com/weixin_44079650/article/details/103710118

版权

本文介绍如何在微信小程序中实现组件的选中和未选中状态。通过展示wxml、wxss和js代码片段，详细讲解了状态切换的实现过程，帮助开发者掌握相关技巧。

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

效果图：

wxml:

<!-------------------- 选择版本 ------------------->
<view class="size">选择版本</view>
 <scroll-view scroll-x >
 <view class="con">
  <view  wx:for="{
  {banben}}" wx:key="" data-index="{
  {index}}"  bindtap='goSize'>
    <view class="{
  {index==idxSize?'_item-size':'item-size'}}" >{
  {item.size}}</view>
  </view>
 </view>
</scroll-view>


<!-------------------- 选择颜色 ------------------->
<view class="color">选择颜色</view>
 <scroll-view scroll-x >
 <view class="con">
  <view  wx:for="{
  {banben}}" wx:key="" data-index=