微信小程序自定义组件的坑之 hidden、boolean 属性和花括号

1. 小程序中 hidden 只在 view 里生效，自定义组件加 hidden 是没用的。

这样是不行的

<my-component hidden="true"> </my-component>

改成这样

<view hidden="true">
<my-component> </my-component>
</view>

如果你要用变量

<view hidden="{{isHidden}}">
<my-component> </my-component>
</view>

2. 自定义组件里 Boolean 类型的 property 需要用花括号

比如自定义组件定义了一个 isPublic 的属性

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    isPublic: Boolean,
  }
  ...
}

这样是不行的：

<my-component isPublic="true"> </my-component>

你得改为

<my-component isPublic="{{true}}"> </my-component>

然而官方的组件却不用加花括号

<scroll-view refresher-enabled="true" scroll-y="true" > </scroll-view>

3. wx:for-index 不要加花括号

wx:for-index 这里只是名字，不是变量，不用加花括号。里面的 data-index="{{index}}" 这里要加花括号，它已经是个变量了。

<view class="item" wx:for="{{list}}" wx:for-index="index">
    <view class="item-name"> {{item.name}} </view>  
    <button size="mini" bindtap="onDelete" data-index="{{index}}">x</button>
</view>