Touch WX 开发文档

Touch WX 开发文档

组件介绍

在使用Touch WX提供的组件时,跟使用微信小程序内置的组件很类似,都是只需要写标签就行,不需要声明。需要注意的是,Touch WX提供的组件是有ui前缀的。例如一个选项卡组件:

<ui-tabs>
    <ui-tab>选项卡一</ui-tab>
    <ui-tab>选项卡二</ui-tab>
</ui-tabs>

Touch WX提供的组件完全是基于小程序官方的自定义组件机制实现(row&col除外,这两个组件是用其他方式实现)。

最终输出的小程序代码跟你直接在小程序工程中创建自定义组件的代码是一样的。之所以不需要在Touch WX页面中声明,是因为编译器自动把这部分工作做了。

由于小程序的样式隔离机制,只有微信小程序内置的组件支持外部自定义,而例如ui-sticky自定义组件外部添加class或者重写ui-sticky{xxx}时,只有部分样式可以生效。而且不支持通过外部方式控制里面的子元素样式。对于这些自定义组件,我们一般会提供xxx-style等属性便于开发者控制样式(详见每个组件的属性表)。

如果你需要自己增加一些自定义组件,可以参照微信小程序官方文档来开发,也可以在Touch WX中使用。

此栏目主要展示自定义组件的属性和用法。微信官方组件见官方文档:

https://developers.weixin.qq.com/miniprogram/dev/component/

子组件动态渲染

很多包含子组件的组件可以由数据驱动循环渲染生成的,例如:roller、tabs、v-tabs、segment等。

如果初始时就已经有静态的数据,不会有问题。

如果数据是由服务端获取,动态填充来循环渲染组件的内部元素,就可能会出现问题。这时需要使用wx:if,如果数据未获取时不渲染这个组件。例如:

<view class="sample_content">
    <ui-roller speed="1000" wx:if="{{Notify.length > 0}}">
        <ui-roller-item wx:for="{{Notify}}" wx:key="index" wx:for-item="item">
            <ui-row>
                <ui-col span="1">
                    <text style="color:#F00;">荐</text>
                </ui-col>
                <ui-col span="11">{{item.title}}</ui-col>
            </ui-row>
        </ui-roller-item>
    </ui-roller>
</view>