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


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 相关文章推荐
js实现弹窗插件功能实例代码分享
Dec 12 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
在JavaScript中操作数组之map()方法的使用
Jun 09 Javascript
浅析JSONP技术原理及实现
Jun 08 Javascript
AngularJS基础 ng-mouseleave 指令详解
Aug 02 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
Aug 24 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
详解webpack运行Babel教程
Jun 13 Javascript
小程序实现单选多选功能
Nov 04 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
vue实现图片懒加载的方法分析
Feb 05 Javascript
JavaScript适配器模式原理与用法实例详解
Mar 09 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
spl_autoload_register与autoload的区别详解
2013/06/03 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
PHP中soap的用法实例
2014/10/24 PHP
php数据访问之增删改查操作
2016/05/09 PHP
解读PHP中上传文件的处理问题
2016/05/29 PHP
二级域名转向类
2006/11/09 Javascript
JavaScript 图像动画的小demo
2012/05/23 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
js点击选择文本的方法
2015/02/09 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
2015/07/30 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
NodeJS 将文件夹按照存放路径变成一个对应的JSON的方法
2018/10/17 NodeJs
vue视图不更新情况详解
2019/05/16 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
解决vue-router路由拦截造成死循环问题
2020/08/05 Javascript
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
Python的pygame安装教程详解
2020/02/10 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
django orm模块中的 is_delete用法
2020/05/20 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
《雷雨》教学反思
2014/02/20 职场文书