微信小程序点击事件,小程序button或view后选中其它反选

—— 2020 ——

09/27

00:00

来源：

作者：未知

栏目：小程序开发

2020/9/27 0:00:00 来源：不详作者：未知

如果需要实现进来进行给按钮加上买一送一的样式，或者单击就选中单个按钮，只能靠css结合js进行控制了，小程序暂时没有这样的控件。
微信小程序进来的时候自动进行按钮样式的初始化，这个需要一个字段做判断，加上正则表达式wxml文件：

微信小程序点击事件,小程序button或view后选中其它反选

<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
}
}
}

【本站声明】
1、本站文章中所选用的图片及文字来源于网络以及用户投稿，由于未联系到知识产权人或未发现有关知识产权的登记，如有知识产权人并不愿意我们使用，如果有侵权请立即联系。
2、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责，仅系客观性描述，如您需要了解该类商品/服务详细的资讯，请您直接与该类商品/服务的提供者联系。

KESION 科汛软件
KESION 科汛软件是国内领先的在线教育软件及私域社交电商软件服务提供商，长期专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。
公司核心产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化独立部署品牌网校和在线教育咨询等。
KESION 不断通过技术创新，提供产品和服务，助力企业向数字化转型，通过科技驱动商业革新，让商业变得更智慧！

▼点击进入科汛官网了解更多

热门标签

微信小程序 SaaS

上/下篇

微信小程序与汽车维修行业的结合

随着互联网不断深入后市场，客户需求的不断增加以及消费者的心理愈发理性等条件下，传统的汽车维修业正面临转型。如果说电商是汽车行业转型的一个巨大的因素，那么微信小程序...

微信小程序开发微信小程序运营SaaS 2020/9/27 0:00:00
选择团队做一个小程序多少钱？

不是说通过网络渠道对产品销售，就一定能够在产品销售时取得非常不错的销售量，也需要通过一定的方式方法。比如说通过微信来对产品销售，就需要专业的小程序。选择团队做一个...

微信小程序开发微信小程序SaaS 2020/9/27 0:00:00