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


Posted in Javascript onFebruary 21, 2017

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

前言:

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

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

Javascript 相关文章推荐
JQuery 将元素显示在屏幕的中央的代码
Feb 27 Javascript
JavaScript生成GUID的多种算法小结
Aug 18 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
canvas绘制万花筒效果(代码分享)
Jan 20 Javascript
windows下vue-cli导入bootstrap样式
Apr 25 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
js实现上下左右键盘控制div移动
Jan 16 Javascript
js实现圆形显示鼠标单击位置
Feb 11 Javascript
jquery实现下拉框左右选择功能
Feb 21 #Javascript
jquery实现页面加载效果
Feb 21 #Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 #Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 #Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 #Javascript
使用get方式提交表单在地址栏里面不显示提交信息
Feb 21 #Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 #Javascript
You might like
非常好的php目录导航文件代码
2006/10/09 PHP
php 结果集的分页实现代码
2009/03/10 PHP
PHP缓存技术的多种方法小结
2012/08/14 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
PHP如何将XML转成数组
2016/04/04 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
JavaScript的document对象和window对象详解
2010/12/30 Javascript
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
jquery.uploadView 实现图片预览上传功能
2017/08/10 jQuery
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
详解原生JS动态添加和删除类
2019/03/26 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
[00:32]2016完美“圣”典风云人物:Maybe宣传片
2016/12/05 DOTA
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
函授本科毕业自我鉴定
2013/10/09 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
竞选部长演讲稿
2014/04/26 职场文书
食品安全宣传标语
2014/06/07 职场文书
故宫导游词
2015/01/31 职场文书
Redis实现分布式锁的五种方法详解
2022/06/14 Redis