使用内置组件

更新时间：2024-09-10 21:28:30

快手小程序框架提供了一些内置组件帮助开发者快速开发小程序。内置组件的使用上有一些限制

属性和控制限制

ksml文件中小程序组件的数据来源一般是通过属性(attribute)传入，在使用中通过模版绑定和setData修改这些属性，可以直接控制组件内部的值。对于部分组件，例如表单组件，使用的数据源除了传入的属性之外同时还会受其他一些交互控制（例如键盘输入、点击操作等），这时候属性的设置可能会失效。

例如，以下需要使用清空input输入框的场景。期望结果是输入框输入内容之后，点击清空按钮之后把内容设置成空字符串达到清空的效果。但实际上由于input的属性接收到的value并未发生改变（value自始至终都是空字符串），所以这次setData并不能有效传递到input中，视图不会改变。

<input value={{value}} />
<button bindtap="clearValue">清空输入框</button>

Page({
    data: {
        value: '',
    },
    clearValue(){
        this.setData({
            value: '',
        });
    },
})

对于这种情况，需要开发者修改一下实现。在input改变后将数据同步到外部组件中更新对应的属性。

<input value={{value}} bindchange="syncValue" />
<button bindtap="clearValue">清空输入框</button>

Page({
    data: {
        value: '',
    },
    syncValue(e){
        this.setData({
            value: e.detail.value,
        });
    },
    clearValue(){
        this.setData({
            value: '',
        });
    },
})

原生组件限制

原生组件限制 (opens new window)