微信小程序点击控件后选中其它反选实例详解

微信小程序点击控件后选中其它反选实例详解

前言：

如果需要实现进来进行给按钮加上买一送一的样式，或者单击就选中单个按钮，只能靠css结合js进行控制了，小程序暂时没有这样的控件。

实现效果图：

微信小程序进来的时候自动进行按钮样式的初始化，这个需要一个字段做判断，加上正则表达式wxml文件：

   <block wx:for="{{liuliangItems}}">
      <block wx:if="{{item.one2one == 1}}">
       <button class="{{item.changeColor?'selected2':'selected1'}}" type="default" id="{{item.price}}" data-id="{{item.name}}" data-one="{{item.one2one}}" data-orderid="{{item.id}}" data-number="1" bindtap="setPrice">{{item.name}}</button>
      </block>
      <block wx:else>
       <button class="{{item.changeColor?'selected':'normal'}}" type="default" id="{{item.price}}" data-id="{{item.name}}" data-one="{{item.one2one}}" data-orderid="{{item.id}}" data-number="1" bindtap="setPrice">{{item.name}}</button>
      </block>
     </block>

wxss文件

.normal{
 box-sizing: border-box;
 flex: 0 0 21%;
 margin: 5px 5px;
 height: 50px;
 color:#1aad19;
 border:1px solid #1aad19;
 background-color:transparent;
}
.selected{
 box-sizing: border-box;
 flex: 0 0 21%;
 margin: 5px 5px;
 height: 50px;
 background-color: #F75000;
 color: white;
}
.selected1{
 box-sizing: border-box;
 flex: 0 0 21%;
 margin: 5px 5px;
 height: 50px;
 background-color: transparent;
 border:1px solid #1aad19;
 color:#1aad19;
 background-image: url(https://wxcx.llzt.net/images/hot.png) ;
 background-position:31px 0px;
 background-repeat:no-repeat;
 background-size:62%;
}
.selected2{
 box-sizing: border-box;
 flex: 0 0 21%;
 margin: 5px 5px;
 height: 50px;
 background-color: #F75000;
 color: white;
 background-image: url(https://wxcx.llzt.net/images/hot.png);
 background-position:31px 0px;
 background-repeat:no-repeat;
 background-size:62%;
}

现在的方法把集合进行循环，然后获取当前点击的这个按钮进行比较，然后进行样式的修改

   for (var i = 0; i < this.data.liuliangItems.length; i++) {
    if (e.target.dataset.orderid == this.data.liuliangItems[i].id) {
     txtArray1[i] = {
      id: this.data.liuliangItems[i].id, changeColor: true,
      price: this.data.liuliangItems[i].price, name: this.data.liuliangItems[i].name,
      one2one: this.data.liuliangItems[i].one2one
     }
    } else {
     txtArray1[i] = {
      id: this.data.liuliangItems[i].id, changeColor: false,
      price: this.data.liuliangItems[i].price, name: this.data.liuliangItems[i].name,
      one2one: this.data.liuliangItems[i].one2one
     }
    }
   }

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

# 微信小程序 # 点击控件后选中其它反选 # 小程序 # 控件选中其它反选 # 微信小程序实现点击添加移除class # 微信小程序实现给循环列表添加点击样式实例 # 微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】 # 微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】 # 微信小程序之绑定点击事件实例详解 # 微信小程序实现点击文字页面跳转功能【附源码下载】 # 微信小程序加载更多点击查看更多 # 微信小程序点击控件修改样式实例详解 # 微信小程序实现点击按钮修改文字大小功能【附demo源码下载】 # 微信小程序实现点击效果 # 希望能 # 暂时没有 # 谢谢大家 # 单击 # 只能靠 # 正则表达式 # default # price # id # changeColor # type # data # normal # selected # br # wxss # number # orderid # setPrice # bindtap

返回目录在线咨询

上一篇：Orleans怎么用 .NET分布式虚拟Actor模型Orleans入门
下一篇：国际活动网站制作流程,为什么pubg网页页面进不去？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

微信小程序 点击控件后选中其它反选实例详解

您的项目需求

微信小程序点击控件后选中其它反选实例详解