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

    表单组件button:官方文档

    Demo Code:

    var types=['default', 'primary', 'warn'];
    var pageObject = {
      data: {
        defaultSize: 'default',
        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
        })
      },
      setLoading: function(e) {
        this.setData({
          loading: !this.data.loading
        })
      }
    };
    //动态的往pageObject添加default、primary、warn函数属性
    //方法体为切换当前key的尺寸大小
    for (var i = 0; i < types.length; ++i) {
      (function(type) {
        pageObject[type] = function(e) {
          var key = type + 'Size'
          var changedData = {}
          changedData[key] =
            this.data[key] === 'default' ? 'mini' : 'default';
          this.setData(changedData);
        }
      })(types[i])
    }
    
    Page(pageObject);
    JS
    <button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}"
            disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover"> default </button>
    <button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}"
            disabled="{{disabled}}" bindtap="primary"> primary </button>
    <button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}"
            disabled="{{disabled}}" bindtap="warn"> warn </button>
    <button bindtap="setDisabled">点击设置以上按钮disabled属性</button>
    <button bindtap="setPlain">点击设置以上按钮plain属性</button>
    <button bindtap="setLoading">点击设置以上按钮loading属性</button>
    WXML
    button{
        margin-top: 10px;
        padding-left: 10px;
        padding-right: 10px;
        font-family:Verdana, Geneva, Tahoma, sans-serif;
    }
    .other-button-hover {
      background-color: blur;
    }
    WXSS

    Tip:

    js代码中for循环可以改成容易理解的书写方式,但要注意for循环体中定义变量的作用域问题。var&let

    for (var i = 0; i < types.length; ++i) {
      let type=types[i];
      pageObject[type] = function(e) {
          var key = type + 'Size'
          var changedData = {}
          changedData[key] =
            this.data[key] === 'default' ? 'mini' : 'default';
          this.setData(changedData);
        }
    }
    View Code
  • 相关阅读:
    让数据更精准,神器标配:热图
    运维监控大数据的提取与分析
    IT运营新世界大会:广通软件开启双态运维大时代
    持续交付的Mesos与Docker导入篇
    运算符
    Django 模型层(2)
    Django模型层
    Django的模板层
    Django的视图层
    Django的路由层(URLconf)
  • 原文地址:https://www.cnblogs.com/betterlife/p/5959961.html
Copyright © 2011-2022 走看看