前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序自定义组件的坑之 hidden、boolean 属性和花括号

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

作者头像
饶文津
发布2021-12-06 12:31:11
8790
发布2021-12-06 12:31:11
举报
文章被收录于专栏:饶文津的专栏

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

这样是不行的

代码语言:javascript
复制
<my-component hidden="true"> </my-component>

改成这样

代码语言:javascript
复制
<view hidden="true">
<my-component> </my-component>
</view>

如果你要用变量

代码语言:javascript
复制
<view hidden="{{isHidden}}">
<my-component> </my-component>
</view>

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

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

代码语言:javascript
复制
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    isPublic: Boolean,
  }
  ...
}

这样是不行的:

代码语言:javascript
复制
<my-component isPublic="true"> </my-component>

你得改为

代码语言:javascript
复制
<my-component isPublic="{{true}}"> </my-component>

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

代码语言:javascript
复制
<scroll-view refresher-enabled="true" scroll-y="true" > </scroll-view>

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

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

代码语言:javascript
复制
<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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-12-04 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 小程序中 hidden 只在 view 里生效,自定义组件加 hidden 是没用的。
  • 2. 自定义组件里 Boolean 类型的 property 需要用花括号
  • 3. wx:for-index 不要加花括号
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档