Zsyy NPM | npm.io

Teslax-field文档

库内容一览

css->common.css
js->normal.js（bragnet、cache、image、modal、navigator、util）
js->cheatsheet.js
js->form.js
template->config.js
template->imageUtil.js
template->UI（UIAlert、UICenterTabPage、UICheckbox、UICheckboxGroup、UIColumnItem、UIColumnView、UIDialog、UIDropDown、UILabelFlow、UIListItem、UILoad、UIRadio、UIRadioGroup、UIRefresh、UIRefreshList、UIRichText、UISearch、UISelect、UISelectSection、UISheet、UITabbar、UITabPage）
template->模板（base、listT、columnT、searchT、scrollerT、sheetT、tabListT、formT）

common.css

将较常用的样式（row、column、flex、lines1、jcCenter、aiCenter）、字体大小（text24->text40）、字体颜色（fontBlack11->fontBlack99、fontWhite、fontBlue）总结到一个css文件中，再引入

<style src="teslax-field/css/common.css></style>

normal.js

这套库总体上基于tesla-native-js开发，该库的文档见：tesla-native-js文档。通过normal.js与之关联为其补充，且曾经在tesla-native-js重构时，在业务代码中成功做到了向下兼容，normal.js功不可没。共分为以下几个部分： bragent.js cache.js image.js modal.js navigator.js util.js

cheatsheet.js

备忘清单，包括

通用操作

setTimeout 延时操作

setInterval 定时操作

clearInterval 清除定时操作

列表

来源于w3school-Array对象，是js中对列表的通用处理方法

字符串

来源于w3school-String对象，是js中对字符串的通用处理方法

config.js

设置主题及模块名称的工具类主题应用于template模板模块名称应用于imageLoad

UI

UIAlert、

可自定义的弹窗

UICenterTabPage、

每个标签都居中的标签栏

UICheckbox、

复选框

UICheckboxGroup、

复选框组，配合使用

UIColumnItem、

纵栏的item

UIColumnView、

纵栏

UIDialog、

有一个或两个按钮的弹窗，只支持title和content

UIDropDown、

下拉栏

UILabelFlow、

标签组

UIListItem、

列表item，带touch样式

UILoad、

加载控件

UIRadio、

单选框

UIRadioGroup、

单选框组

UIRefresh、

刷新控件

UIRefreshList、

带刷新和加载的列表

UIRichText、

富文本控件，本质是tsl-web

UISearch、

搜索框

UISelect、

和UISheet合用的选择器

UISelectSection、

单个选择的列表

UISheet、

从左右上下弹出的弹框

UITabbar、

底部导航栏

UITabPage

每个标签都靠左的标签栏

模板原理

原理类比于java中的继承，现在有base、listT、columnT、searchT、scrollerT、sheetT、tabListT、formT，共8种 base为所有template模板的父类，本质为顶部导航栏 listT为base种添加UIRefreshList columnT为base中添加UIRefreshList和UIColumnView searchT为listT和UISearch的并集 scrollerT为base中添加scroller sheetT为base中添加UISheet和UISelectSection tabListT为listT中添加UITabPage和UICenterTabPage

formT比较特殊是为了快速生成表单而存在的，目前有formCheckbox、formImage、formInput、formRadio、formText、formTextarea共六种。

base

带标题栏的最外层组件

事件说明 baseDisappear 页面显示事件 baseDisappear 页面隐藏事件 baseBack 页面自定义退出事件，customBack为true时生效 baseRight 点击右侧标题事件 baseRight2nd 点击右侧第二个标题（靠左的）事件 baseTitle 页面标题点击事件

示例代码

scorllerT

事件说明 scrollerAppear 页面显示事件 scrollerDisappear 页面隐藏事件 scrollerBack 页面自定义退出事件，customBack为true时生效 scrollerRight 点击右侧标题事件 scrollerRight2nd 点击右侧第二个标题（靠左的）事件 scrollerTitle 页面标题点击事件

示例代码

listT

事件说明 listAppear 页面显示事件 listDisappear 页面隐藏事件 listBack 页面自定义退出事件，customBack为true时生效 listRight 点击右侧标题事件 listRight2nd 点击右侧第二个标题（靠左的）事件 listTitle 页面标题点击事件

示例代码

searchT

事件说明 searchAppear 页面显示事件 searchDisappear 页面隐藏事件 searchBack 页面自定义退出事件，customBack为true时生效 searchRight 点击右侧标题事件 searchRight2nd 点击右侧第二个标题（靠左的）事件 searchTitle 页面标题点击事件 searchAdapter 列表数据源的获取 searchDisplay 点击“取消”触发 returnClick 点击“回车”按钮时触发 searchInput 输入搜索关键词事件

示例代码

tabListT

事件说明 tabListAppear 页面显示事件 tabListDisappear 页面隐藏事件 tabListBack 页面自定义退出事件，customBack为true时生效 tabListRight 点击右侧标题事件 tabListRight2nd 点击右侧第二个标题（靠左的）事件 tabListTitle 页面标题点击事件 tabListPage 标签点击事件 tabListAdapter 列表数据源的获取

示例代码

sheetT

事件说明 sheetBack 页面自定义退出事件，customBack为true时生效 sheetAppear 页面显示事件 sheetDisappear 页面隐藏事件 sheetRight 点击右侧标题事件 sheetRight2nd 点击右侧第二个标题（靠左的）事件 sheetTitle 页面标题点击事件 itemClick 选中某一条数据时触发 sheetAdapter 列表数据源的获取

示例代码

columnT

事件说明 columnBack 页面自定义退出事件，customBack为true时生效 columnAppear 页面显示事件 columnDisappear 页面隐藏事件 columnRight 点击右侧标题事件 columnRight2nd 点击右侧第二个标题（靠左的）事件 columnTitle 页面标题点击事件 columnPage 切换标签时触发 columnAdapter 列表数据源的获取

示例代码

formT

formSelectList props参数说明 | 参数名 | 类型 | 必填 | 默认值 | 说明 | | - | - | - | - | - | | index | Number | 是 | 0 | 该行的索引 | | tag | String | 是 | | 该行的标签 | | ifRequire | Boolean | 否 | false | 是否必填（显示星号） | | isRequireLeft | Boolean | 否 | false | 必填标记是否在左侧 | | fontSize | Number | 否 | 34 | 文字大小 | | titleWidth | Number | 否 | 180 | 标题宽度 | | title | String | 是 | | 标题 | | titleColor | String | 否 | #5f5f5f | 标题颜色 | | isTitleRight | Boolean| 否 | false | 是否标题靠右 | | textValue | String | 否 | | 内容文本 | textColor | String | 否 | ##666666 | 内容字体颜色 | | isLeft | Boolean | 否 | false | 选择器是否靠左 | | list | Array | 是 | | 选择列表 | | ddtextColor | String | 否 | #666666 | 选择列表内容字体颜色 |

使用样例

weex

copy-webpack-plugin dayjs node-sass phantom-limb sass-loader serve-handler tesla-mui tesla-native-js tesla-native-js-browser vue vue-router weex-ui weex-vue-render weixin-js-sdk ios-deploy

1.0.0

4 years ago

Teslax-field文档

库内容一览

common.css

normal.js

cheatsheet.js

通用操作

列表

字符串

form.js

config.js

imageUtil.js

UI

UIAlert、

UICenterTabPage、

UICheckbox、

UICheckboxGroup、

UIColumnItem、

UIColumnView、

UIDialog、

UIDropDown、

UILabelFlow、

UIListItem、

UILoad、

UIRadio、

UIRadioGroup、

UIRefresh、

UIRefreshList、

UIRichText、

UISearch、

UISelect、

UISelectSection、

UISheet、

UITabbar、

UITabPage

模板原理

base

scorllerT

listT

searchT

tabListT

sheetT

columnT

formT