【小程序】Boolean值的陷阱

【小程序】笔记内容声明及汇总

---

在小程序开发过程中，几乎不可避免的会碰到 Boolean 值问题，比如控制 swiper 组件是否显示指示器的属性 indicator-dots 就是 Boolean 值。其定义如下：

属性名:  indicator-dots
类型:    Boolean
默认值:  false
说明:    是否显示面板指示点

官方文档：swiper 滑块视图容器

但是这个 Boolean 值的使用就不是这么单纯了......

煮个栗子

有如下布局：

<!--pages/test/haha.wxml-->
<text>pages/test/haha.wxml</text>

<swiper indicator-dots='true'>
    <swiper-item>item1</swiper-item>
    <swiper-item>item2</swiper-item>
    <swiper-item>item3</swiper-item>
</swiper>

布局很简单（简陋），就是一个 swiper（类似ViewPager） 滚动组件里面放了3个item，效果如下：

indicator-dots='true'

indicator-dots='true'

indicator-dots='false'

此时，按API说明，只需要将 indicator-dots 置为 false，指示器就不会显示了，我们看下是不是这样：

indicator-dots='false'

显然，效果并不是我们期望的样子，那么 true、false 以外的值是什么效果呢？

indicator-dots='123'

我们把值设置为 123 ，发现还是会显示指示器：

indicator-dots='123'

indicator-dots=''

既然写了值，不管写的是不是Boolean值，都会显示指示器，那不写值呢？
效果如下：

indicator-dots=''

没错，当值为空时，效果却和 API 描述的 false 一致，为什么呢？

非空即真

JS脚本语言和大多高级语言不一样，它是弱类型，给值的时候，没有那么强的校验；通过上面的对比，我们也可以知道，在JS里面 非空即真，这一点类似C里面的 非零即真。

因此，如果不想要指示器，只能通过这几种方式：

• 不加入 indicator-dots 属性
• indicator-dots=""
• indicator-dots="{{false}}"

其中，第三种方法的{{}}使用的是数据绑定，它内部可以是表达式，可以接收逻辑层的运算结果。