微信小程序自定義組件的坑之 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>