zoukankan      html  css  js  c++  java
  • 微信小程序-button组件

    主要属性:

    注:button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}

    效果图:

    ml:

    复制代码
    <!--默认的button, 默认大小default,默认加载false,默认按键不为镂空,默认可以点击,点击有效果hover-class="other-button-hover"-->
    <button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}"
            disabled="{{disabled}}" bindtap="setDefault"
            hover-class="other-button-hover" class="margin-button"> default </button>
    <!--主要的按钮,点击背景没有效果hover-class="none"  -->
    <button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}"
            disabled="{{disabled}}" bindtap="setPrimary" hover-class="none" class="margin-button"> primary </button>
    <!--警告按钮,点击背景有效果hover-class="button-hover" -->
    <button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}"
            disabled="{{disabled}}" bindtap="setWarn" hover-class="button-hover" class="margin-button"> warn </button>
    <button bindtap="setDisabled" class="margin-button">点击设置以上按钮disabled属性</button>
    <button bindtap="setPlain" class="margin-button">点击设置以上按钮plain属性</button>
    <button bindtap="setLoading" class="margin-button">点击设置以上按钮loading属性</button>
    <button bindtap="setSize" class="margin-button">点击设置以上按钮size属性</button>
    复制代码

    ss:

    复制代码
    /** wxss **/
    /** 修改button默认的点击态样式类**/
    .button-hover {
      background-color: yellow;
      opacity: 0.7;
    }
    /** 添加自定义button点击态样式类**/
    .other-button-hover {
      background-color: green;
      opacity: 0.7;
    }
    .margin-button{
        margin-top: 10px;
    }
    复制代码

    js:

    复制代码
    var pageObject = {
      data: {
        defaultSize: 'default',////有效值 default, mini
        primarySize: 'default',
        warnSize: 'default',
        disabled: false,
        plain: false,
        loading: false
      },
      //设计是否禁用
      setDisabled: function(e) {
        this.setData({
          disabled: !this.data.disabled
        })
      },
      //设计按钮是否镂空,背景色透明
      setPlain: function(e) {
        this.setData({
          plain: !this.data.plain
        })
      },
      //设计按钮名称前是否带 loading 图标
      setLoading: function(e) {
        this.setData({
          loading: !this.data.loading
        })
      },
      //设计按钮的大小
      setSize:function(){
        this.setData({
          defaultSize: this.data.defaultSize=='default' ? 'mini' : 'default',////有效值 default, mini
          primarySize:  this.data.defaultSize=='default' ? 'mini' : 'default',
          warnSize:  this.data.defaultSize=='default' ? 'mini' : 'default',
        })
      },
      setDefault:function(){
          console.log('setDefault....')
      },
      setWarn:function(){
        console.log('setWarn....')
      },
      setPrimary:function(){
        console.log('setPrimary....')
      },
    }
    Page(pageObject)

    根据官方开发文档,在wxss中定义类名样式,就可以自定义按钮按下去的样式。但是我在开发中,发现直接这样写没有效果:

    .button-hover {
      background-color: grey;
    }

    检查下来发现原因是,button已经自定义了背景色,样式选择权重有影响,button的样式如下:

    .wrap button {
      background-color: green;
    }

    因此把hover选择器修改一下就可以了:

    .wrap button.button-hover {
      background-color: grey;
    }


  • 相关阅读:
    8天学通MongoDB——第三天 细说高级操作
    8天学通MongoDB——第二天 细说增删查改
    8天学通MongoDB——第一天 基础入门
    Redis Web界面管理工具
    Redis 起步
    使用 Swagger UI 与 Swashbuckle 创建 RESTful Web API 帮助文件
    面试应该如何面?
    Login oracle for external authenticate
    突然发现我脾气变好了
    一种持续构建构想
  • 原文地址:https://www.cnblogs.com/wcxcc/p/10289425.html
Copyright © 2011-2022 走看看