找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序开发资源

关注:1309

所属分类: 微信开发 微信小程序开发资源

微信小程序、微信小程序开发,提供各类小程序开发工具及开发教程。

[最新文章] 微信小程序点击button或view后选中其它反选

[复制链接]
查看: 1614|回复: 10

TA的社区排名

积分:NO. 164 名

发帖:NO. 172 名

在线:NO. 133 名

最佳答案
9 

4

主题

82

帖子

1158

积分

专家路上

积分
1158

领域专家五道杠

 楼主| 发表于 2017-2-7 11:47:22 | 显示全部楼层 |阅读模式
如果需要实现进来进行给按钮加上买一送一的样式,或者单击就选中单个按钮,只能靠css结合js进行控制了,小程序暂时没有这样的控件。
66666313.png
微信小程序进来的时候自动进行按钮样式的初始化,这个需要一个字段做判断,加上正则表达式wxml文件:
  1.           <block wx:for="{{liuliangItems}}">
  2.             <block wx:if="{{item.one2one == 1}}">
  3.               <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>
  4.             </block>
  5.             <block wx:else>
  6.               <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>
  7.             </block>
  8.           </block>
复制代码

wxss文件
  1. .normal{
  2.   box-sizing: border-box;
  3.   flex: 0 0 21%;
  4.   margin: 5px 5px;
  5.   height: 50px;
  6.   color:#1aad19;
  7.   border:1px solid #1aad19;
  8.   background-color:transparent;
  9. }
  10. .selected{
  11.   box-sizing: border-box;
  12.   flex: 0 0 21%;
  13.   margin: 5px 5px;
  14.   height: 50px;
  15.   background-color: #F75000;
  16.   color: white;
  17. }
  18. .selected1{
  19.   box-sizing: border-box;
  20.   flex: 0 0 21%;
  21.   margin: 5px 5px;
  22.   height: 50px;
  23.   background-color: transparent;
  24.   border:1px solid #1aad19;
  25.   color:#1aad19;
  26.   background-image: url(https://wxcx.llzt.net/images/hot.png) ;
  27.   background-position:31px 0px;
  28.   background-repeat:no-repeat;
  29.   background-size:62%;
  30. }
  31. .selected2{
  32.   box-sizing: border-box;
  33.   flex: 0 0 21%;
  34.   margin: 5px 5px;
  35.   height: 50px;
  36.   background-color: #F75000;
  37.   color: white;
  38.   background-image: url(https://wxcx.llzt.net/images/hot.png);
  39.   background-position:31px 0px;
  40.   background-repeat:no-repeat;
  41.   background-size:62%;
  42. }
复制代码
现在的方法把集合进行循环,然后获取当前点击的这个按钮进行比较,然后进行样式的修改

  1.       for (var i = 0; i < this.data.liuliangItems.length; i++) {
  2.         if (e.target.dataset.orderid == this.data.liuliangItems[i].id) {
  3.           txtArray1[i] = {
  4.             id: this.data.liuliangItems[i].id, changeColor: true,
  5.             price: this.data.liuliangItems[i].price, name: this.data.liuliangItems[i].name,
  6.             one2one: this.data.liuliangItems[i].one2one
  7.           }
  8.         } else {
  9.           txtArray1[i] = {
  10.             id: this.data.liuliangItems[i].id, changeColor: false,
  11.             price: this.data.liuliangItems[i].price, name: this.data.liuliangItems[i].name,
  12.             one2one: this.data.liuliangItems[i].one2one
  13.           }
  14.         }
  15.       }
复制代码
如果有发现更好的办法也可以进行交流分享。
回复

使用道具 举报

TA的社区排名

积分:NO. 1030 名

发帖:NO. 554 名

在线:NO. 631 名

最佳答案
2 

0

主题

45

帖子

397

积分

略知一二

积分
397

积极分子

QQ
发表于 2017-2-7 13:38:05 | 显示全部楼层
这是循环数据这样判断,如果是点击效果,然后传给后台,事件怎么写?怎么绑定
回复 支持 反对

使用道具 举报

TA的社区排名

积分:NO. 164 名

发帖:NO. 172 名

在线:NO. 133 名

最佳答案
9 

4

主题

82

帖子

1158

积分

专家路上

积分
1158

领域专家五道杠

 楼主| 发表于 2017-2-8 15:00:20 | 显示全部楼层
_小前端大智慧 发表于 2017-2-7 13:38
这是循环数据这样判断,如果是点击效果,然后传给后台,事件怎么写?怎么绑定 ...

如果不是循环的话,点击的时候加个事件进行修改class哪里的true和false来实现吧,然后自己写css进行变换也是可以的啦
回复 支持 反对

使用道具 举报

TA的社区排名

积分:NO. 1030 名

发帖:NO. 554 名

在线:NO. 631 名

最佳答案
2 

0

主题

45

帖子

397

积分

略知一二

积分
397

积极分子

QQ
发表于 2017-2-9 09:24:03 | 显示全部楼层
蜗牛呆呆 发表于 2017-2-8 15:00
如果不是循环的话,点击的时候加个事件进行修改class哪里的true和false来实现吧,然后自己写css进行变换 ...

这个我当然知道,js就是这样,我是指在小程序里,怎么通过事件和地址,把数据传后台?搞不懂他们这个请求方式
回复 支持 反对

使用道具 举报

TA的社区排名

积分:暂未上榜

发帖:NO. 1837 名

在线:NO. 631 名

最佳答案
0 

0

主题

22

帖子

39

积分

新人求带

积分
39
发表于 2017-2-9 09:53:12 | 显示全部楼层
留名学习
回复

使用道具 举报

TA的社区排名

积分:NO. 164 名

发帖:NO. 172 名

在线:NO. 133 名

最佳答案
9 

4

主题

82

帖子

1158

积分

专家路上

积分
1158

领域专家五道杠

 楼主| 发表于 2017-2-9 10:49:55 | 显示全部楼层
_小前端大智慧 发表于 2017-2-9 09:24
这个我当然知道,js就是这样,我是指在小程序里,怎么通过事件和地址,把数据传后台?搞不懂他们这个请求 ...

  1. weixinXcx: function (e) {  //点击事件
  2.       wx.request({//请求
  3.         url: 'https://wxxcx.llztc.net/wxapi/getphoneflow?phone=' + phone,//地址和参数,参数也可以用data: {}
  4.         method: 'GET',
  5.         header: {
  6.           'content-type': 'application/json'
  7.         },
  8.         success: function (res) {
  9. }
  10. });
  11. }
复制代码

看一下官方API基本都有介绍的
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

6

帖子

37

积分

新人求带

积分
37
发表于 2017-2-9 14:56:13 | 显示全部楼层
DaiDai_404, mark.
回复 支持 反对

使用道具 举报

TA的社区排名

积分:NO. 1030 名

发帖:NO. 554 名

在线:NO. 631 名

最佳答案
2 

0

主题

45

帖子

397

积分

略知一二

积分
397

积极分子

QQ
发表于 2017-2-15 11:39:41 | 显示全部楼层
蜗牛呆呆 发表于 2017-2-9 10:49
看一下官方API基本都有介绍的

谢谢,但是我下了demo,别人项目里data和url都是拼接的,url专门是放在utils里面其他页面引用的,封装起来更方便
回复 支持 反对

使用道具 举报

TA的社区排名

积分:NO. 164 名

发帖:NO. 172 名

在线:NO. 133 名

最佳答案
9 

4

主题

82

帖子

1158

积分

专家路上

积分
1158

领域专家五道杠

 楼主| 发表于 2017-2-17 11:09:08 | 显示全部楼层
_小前端大智慧 发表于 2017-2-15 11:39
谢谢,但是我下了demo,别人项目里data和url都是拼接的,url专门是放在utils里面其他页面引用的,封装起 ...

思路就是这样,在具体的情况修改一下就可以了
回复 支持 反对

使用道具 举报

TA的社区排名

积分:NO. 1030 名

发帖:NO. 554 名

在线:NO. 631 名

最佳答案
2 

0

主题

45

帖子

397

积分

略知一二

积分
397

积极分子

QQ
发表于 2017-2-17 13:32:13 | 显示全部楼层
蜗牛呆呆 发表于 2017-2-17 11:09
思路就是这样,在具体的情况修改一下就可以了

嗯,谢谢
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

网站业务
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com