推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
微信小程序动态添加class样式
发布时间:2020-11-29
尺寸单位：
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。所以用rpx可解决适配问题
样式导入：
/** app.wxss **/
@import "common.wxss";
内联样式：
框架组件上支持使用 style、class 属性来控制组件的样式。
style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
<view style="color:{{color}};" />
class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。
<view class="normal_view" />
动态添加class样式：
<button bindtap="bindTabTap" class="btn1 {{signItem.class}}" data-index="{{signItem}}">{{signItem.state}}</button>
//添加class样式
for (var i = 0; i < list.length; ++i) {
if (list[i].status === 1) { //当状态为1的时候显示已签，返回okSigin的class样式，class在wxss已设置
list[i].class = 'okSigin';
list[i].state = '已签';
continue;
}
list[i].class = 'noSigin'; //当状态为0的时候显示未签，返回noSigin的class样式，class在wxss已设置
list[i].state = '未签';
}
当签到状态是已签时，禁止用户再次签到（点击）
wxml:
<button bindtap="redirect" data-text="{{signItem.text}}" data-type="{{signItem.type}}" data-state="{{signItem.state}}" hover-class="none"> //设置button
<view class="scroll">
<view class="radius1"></view>
<text class="text1">{{signItem.text}}</text>
<button bindtap="bindTabTap" class="btn1 {{signItem.class}}" data-index="{{signItem}}">{{signItem.state}}</button>
</view>
</button>
//点击button
redirect :function (e) {
var text = e.target.dataset.text;
var type = e.target.dataset.type;
var state = e.target.dataset.state;
if (state === '已签') { //已签状态是，禁止用户再次签到
return;
}
wx.navigateTo({
url: '../signInDetails/signInDetails?text=' + text + '&&type=' + type, //页面传参到下一个页面
success: function(res){
// success
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
},
下一个页面接收参数：
<view class="scroll">{{text}}<span style="display:none">{{type}}</span></view>
var text = options.text;
var type = options.type;
that.setData({
text: text,
- 上一篇：WxParse解决html标签解析烦恼
- 下一篇：微信小程序的视图与渲染
