用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

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

纸飞机 2018-3-8 09:33

作者:JoyJin,来自原文地址 尺寸单位:rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx ...

作者:JoyJin,来自

原文地址


尺寸单位:

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. style="color:{{color}};" />

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

  1. class="normal_view" />

动态添加class样式:

  1. bindtap="bindTabTap" class="btn1 {{signItem.class}}" data-index="{{signItem}}">{{signItem.state}}
  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. bindtap="redirect" data-text="{{signItem.text}}" data-type="{{signItem.type}}" data-state="{{signItem.state}}" hover-class="none"> //设置button
  2. class="scroll">
  3. class="radius1">
  4. class="text1">{{signItem.text}}
  5. bindtap="bindTabTap" class="btn1 {{signItem.class}}" data-index="{{signItem}}">{{signItem.state}}
  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. fail: function() {
  15. // fail
  16. },
  17. complete: function() {
  18. // complete
  19. }
  20. })
  21. },

下一个页面接收参数:

  1. class="scroll">{{text}} style="display:none">{{type}}
  1. var text = options.text;
  2. var type = options.type;
  3. that.setData({
  4. text: text,
  5. type: type
  6. })
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏