您的位置：首页 > 移动开发 > 微信开发

微信小程序中多个button/view组件中进行切换时改变样式

2017-07-18 00:00 651 查看

摘要:微信小程序中多个button/view组件中进行切换时改变样式开发具体教程

微信小程序中多个button/view组件中进行切换时改变样式开发具体教程:
1、微信小程序|多个按钮或VIEW，点击改变状态简易的实现方法

.wxml文件

[html]viewplaincopy

<viewclass="chose-txt"data-price="{{item.price}}"data-id="{{index}}"bindtap="choseTxtColor"style="{{index==id?'background:url(../resource/button/on_chose.png)rightno-repeat;border:1rpxsolid#e8580c;color:#e8580c':'baciground:url();border:1rpxsolidgainsboro;color:gray'}}">

<textclass="chose-p">{{item.name}}</text>

<textclass="chose-p">{{item.price}}元</text>

</view>

</block>

样式都在这个文件中写了，CSS只是控制布局
.wxss文件

[html]viewplaincopy

.chose-txt{

border-radius:6px;font-size:26rpx;height:40px;width:27.5%;margin:5px;float:left;padding-top:5px;

}

.chose-p{

line-height:18px;width:100%;height:20px;text-align:center;float:left;

}

.js页面

[javascript]viewplaincopy

varid;

page{

array:[{name:'单拍',price:'198'},{name:'亲子套餐',price:'398'},{name:'活动套餐',price:'598'},{name:'女王套餐',price:'1198'}],

id:0,//进入页面时，默认选择第0个，如果不需要默认选中，注释掉就可以了

},

choseTxtColor:function(e){

varid=e.currentTarget.dataset.id;//获取自定义的ID值

this.setData({

id:id

})

},

}

}

好了，到这里已经设置完成了，亲测可用。

2、微信小程序中多个button/view组件中进行切换时改变样式
在小程序项目中遇到一个问题：数据分成四五个小组，然后要进行小组切换，切换的同时把button的样式也要改变，以前Dom操作的时候特别简单，
现在在小程序中竟不知从何下手，后面参照了上面这边博文，功能也能够实现了，下面做下记录：
wxml代码：

1<viewwx:for="{{Object}}"wx:key="Object"wx:for-index="key"wx:for-item="value">

2<viewclass="flex-item">

3<buttonbindtap="changeGroup"data-groupid="{{value.id}}"data-id="{{key}}type="{{key==id?'primary':'default'}}">{{value.name}}

4

5

css代码：

1.flex-itembutton{

2height:32px;

3box-sizing:border-box;

4text-align:center;

5margin:10px000;

6min-width:50px;

7font-size:16px;

8line-height:32px;

9}

js代码：

1data：{

2id:''

3}

1changeGroup:function(event){

2varid=event.currentTarget.dataset.id;

3.....

4this.setData({

5id:id

6});

7}

结果：
默认为“全部”：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 微信小程序开发微信小程序小程序开发文档

相关文章推荐

新的分享

章节导航