小程序模板网

微信小程序动态添加class样式

发布时间:2018-04-17 10:29 所属栏目:小程序开发教程


尺寸单位:

rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。所以用rpx可解决适配问题 
样式导入:

 

  1. /** app.wxss **/
  2. @import "common.wxss";

内联样式:

框架组件上支持使用 style、class 属性来控制组件的样式。

style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。

 

  1. <view style="color:{{color}};" />

class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。

 

  1. <view class="normal_view" />

动态添加class样式:

 

  1. <button bindtap="bindTabTap" class="btn1 {{signItem.class}}" data-index="{{signItem}}">{{signItem.state}}</button>
 

  1. //添加class样式
  2. for (var i = 0; i < list.length; ++i) {
  3. if (list[i].status === 1) { //当状态为1的时候显示已签,返回okSigin的class样式,class在wxss已设置
  4. list[i].class = 'okSigin';
  5. list[i].state = '已签';
  6. continue;
  7. }
  8. list[i].class = 'noSigin'; //当状态为0的时候显示未签,返回noSigin的class样式,class在wxss已设置
  9. list[i].state = '未签';
  10. }

当签到状态是已签时,禁止用户再次签到(点击)

wxml:

 

  1. <button bindtap="redirect" data-text="{{signItem.text}}" data-type="{{signItem.type}}" data-state="{{signItem.state}}" hover-class="none"> //设置button
  2. <view class="scroll">
  3. <view class="radius1"></view>
  4. <text class="text1">{{signItem.text}}</text>
  5. <button bindtap="bindTabTap" class="btn1 {{signItem.class}}" data-index="{{signItem}}">{{signItem.state}}</button>
  6. </view>
  7. </button>
 

  1. //点击button
  2. redirect :function (e) {
  3. var text = e.target.dataset.text;
  4. var type = e.target.dataset.type;
  5. var state = e.target.dataset.state;
  6. if (state === '已签') { //已签状态是,禁止用户再次签到
  7. return;
  8. }
  9. wx.navigateTo({
  10. url: '../signInDetails/signInDetails?text=' + text + '&&type=' + type, //页面传参到下一个页面
  11. success: function(res){
  12. // success
  13.  
  14. },
  15. fail: function() {
  16. // fail
  17. },
  18. complete: function() {
  19. // complete
  20. }
  21. })
  22. },

下一个页面接收参数:

 

  1. <view class="scroll">{{text}}<span style="display:none">{{type}}</span></view>
 

  1. var text = options.text;
  2. var type = options.type;
  3. that.setData({
  4. text: text,
  5. type: type
  6. })


本文地址:https://www.eyoucms.com/wxmini/doc/course/23540.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询