收藏
回答

正在 learn small_program 遇到个难题!~?

https://developers.weixin.qq.com/miniprogram/dev/component/button.htm

正在学button这块的时候遇到了

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])}

就是按下按钮时会缩小再按回复,这段代码能有高人帮忙指点一下么。。。。

最后一次编辑于  11-10
回答关注问题邀请回答
收藏

2 个回答

  • 金煜峰
    金煜峰
    11-10

    首先

    (function (type) {

        ...

    })(types[i])

    是一个自调用函数,等价于

    var f = function(type){

        ...

    }

    f(types[i]);

    这个循环就相当于对types数组中的每一个元素执行一次这个函数,这个函数的内容是

    pageObject[type] = function (e) {

        var key = type + 'Size'

        var changedData = {}

        changedData[key] =

           this.data[key] === 'default' ? 'mini' : 'default'

       this.setData(changedData)

    }

    即给PageObject设置一个名为type的属性,值为一个函数,所以就等价于在PageObject中添加了三个属性(default, primary, warn),下面以default为例

    default: function(e){

       var key = 'default' + 'Size'

       var changedData = {}

            changedData[key] =

       this.data[key] === 'default' ? 'mini' : 'default'

       this.setData(changedData)

    }

    这个函数是用来响应type="default"的那个button的bindtap事件

    <button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}"
            disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover"> default </button>

    简化一下后就是这样

    default: function(e) {

        var key = 'defaultSize';

        this.setData({

           'defaultSize': this.data[key] === 'default' ? 'mini' : 'default'

        })

    }

    就是设置这个按钮的size属性,如果现在是default就设置成mini,否则设置成default,就实现了变大变小的效果

    11-10
    赞同 1
    回复 1
    • Ndnew
      Ndnew
      11-10
      多谢多谢,要不是你我会研究更久些
      11-10
      回复
  • garField
    garField
    11-10

    看描述题主没有遇到任何问题。

    有疑问请提出你遇到的问题。

    11-10
    赞同
    回复 2
    • Ndnew
      Ndnew
      11-10
      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])}
      看不懂这段
      11-10
      回复
    • garField
      garField
      11-10回复Ndnew
      这算是JavaScript语法方面的问题,不是小程序相关的问题。有兴趣可以研究,不了解也不影响理解小程序的组件使用。
      11-10
      回复
问题标签