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

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

前言：

如果需要实现进来进行给按钮加上买一送一的样式，或者单击就选中单个按钮，只能靠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 

相关文章： 较简单的网站制作软件有哪些,手机版网页制作用什么软件？  公司网站设计制作厂家,怎么创建自己的一个网站？  外汇网站制作流程,如何在工商银行网站上做外汇买卖？  如何在万网ECS上快速搭建专属网站？  广东专业制作网站有哪些,广东省能源集团有限公司官网？  建站主机如何选？高性价比方案全解析  如何用低价快速搭建高质量网站？  高防服务器：AI智能防御DDoS攻击与数据安全保障  如何选择高效响应式自助建站源码系统？  ,南京靠谱的征婚网站？  微网站制作教程,不会写代码，不会编程，怎么样建自己的网站？  义乌企业网站制作公司,请问义乌比较好的批发小商品的网站是什么？  建设网站制作价格,怎样建立自己的公司网站？  韩国服务器如何优化跨境访问实现高效连接？  常州自助建站：操作简便模板丰富，企业个人快速搭建网站  建站之星免费模板：自助建站系统与智能响应式一键生成  如何用西部建站助手快速创建专业网站？  青浦网站制作公司有哪些,苹果官网发货地是哪里？  制作门户网站的参考文献在哪,小说网站怎么建立？  昆明高端网站制作公司,昆明公租房申请网上登录入口？  制作网站的网址是什么,请问后缀为.com和.com.cn还有.cn的这三种网站是分别是什么类型的网站？  建站主机选购指南：核心配置与性价比推荐解析  黑客如何利用漏洞与弱口令入侵网站服务器？  建站ABC备案流程中有哪些关键注意事项？  建站一年半SEO优化实战指南：核心词挖掘与长尾流量提升策略  ,交易猫的商品怎么发布到网站上去？  西安市网站制作公司,哪个相亲网站比较好?西安比较好的相亲网站？  香港服务器网站卡顿？如何解决网络延迟与负载问题？  建站主机与服务器功能差异如何区分？  制作网站的软件下载免费,今日头条开宝箱老是需要下载怎么回事？  网站制作怎么样才能赚钱,用自己的电脑做服务器架设网站有什么利弊，能赚钱吗？  如何快速生成可下载的建站源码工具？  武汉网站如何制作,黄黄高铁武穴北站途经哪些村庄？  如何用美橙互联一键搭建多站合一网站？  XML的“混合内容”是什么 怎么用DTD或XSD定义  如何快速查询域名建站关键信息？  如何用IIS7快速搭建并优化网站站点？  公司门户网站制作公司有哪些,怎样使用wordpress制作一个企业网站？  制作电商网页,电商供应链怎么做？  香港服务器WordPress建站指南：SEO优化与高效部署策略  广州网站建站公司选择指南：建站流程与SEO优化关键词解析  国美网站制作流程,国美电器蒸汽鍋怎么用官方网站？  c++如何打印函数堆栈信息_c++ backtrace函数与符号名解析【方法】  香港服务器部署网站为何提示未备案？  如何配置支付宝与微信支付功能？  怎么制作网站设计模板图片,有电商商品详情页面的免费模板素材网站推荐吗？  如何快速生成凡客建站的专业级图册？  实现点击下箭头变上箭头来回切换的两种方法【推荐】  微网站制作教程,我微信里的网站怎么才能复制到浏览器里？  建站主机数据库如何配置才能提升网站性能？