• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

尺寸单位:

  • 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,
      type: type
    })

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
最近写的一个小程序【U影网】--完美融合BT与Emule资源搜索站发布时间:2022-07-18
下一篇:
小程序的登录与静默续期发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap