前端规范

# Teslax-field文档

# 库内容一览

  1. css->common.css
  2. js->normal.js（bragnet、cache、image、modal、navigator、util）
  3. js->cheatsheet.js
  4. js->form.js
  5. template->config.js
  6. template->imageUtil.js
  7. template->UI（UIAlert、UICenterTabPage、UICheckbox、UICheckboxGroup、UIColumnItem、UIColumnView、UIDialog、UIDropDown、UILabelFlow、UIListItem、UILoad、UIRadio、UIRadioGroup、UIRefresh、UIRefreshList、UIRichText、UISearch、UISelect、UISelectSection、UISheet、UITabbar、UITabPage）
  8. 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中对字符串的通用处理方法

# form.js

检查表单数据正确性的工具

# config.js

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

# imageUtil.js

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

带标题栏的最外层组件

参数说明

参数名 类型 必填 默认值 说明
title String 是 base 页面的标题
barTitleColor String 否 页面的标题颜色
barTitleWeight String 否 页面的标题粗细程度
barBackGroundColor String 否 页面的标题背景颜色
barHasBaseline Boolean 否 false 页面的标题是否有底线
barBorderColor String 否 页面的标题底线颜色
backItemImage String 否 标题栏的返回图片
rightItemText String 否 标题栏的右侧文字
rightItemColor String 否 #666666 标题栏的右侧文字颜色
rightItemImage String 否 标题栏的右侧图片
rightItemText2nd String 否 标题栏的右侧第二个按钮文字
rightItemColor2nd String 否 #666666 标题栏的右侧第二个按钮文字颜色
rightItemImage2nd String 否 标题栏的右侧第二个按钮图片
contentBackGroundColor String 否 主体背景色
customBack Boolean 否 false 是否自定义返回事件 配合事件baseBack
isIndex Boolean 否 false 用于在iOS中进行appear问题的修复
isShow Boolean 否 true 是否显示nav

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

示例代码

# scorllerT

参数说明

参数名 类型 必填 默认值 说明
title String 是 base 页面的标题
barTitleColor String 否 页面的标题颜色
barTitleWeight String 否 页面的标题粗细程度
barBackGroundColor String 否 页面的标题背景颜色
barHasBaseline Boolean 否 false 页面的标题是否有底线
barBorderColor String 否 页面的标题底线颜色
backItemImage String 否 标题栏的返回图片
rightItemText String 否 标题栏的右侧文字
rightItemColor String 否 #666666 标题栏的右侧文字颜色
rightItemImage String 否 标题栏的右侧图片
rightItemText2nd String 否 标题栏的右侧第二个按钮文字
rightItemColor2nd String 否 #666666 标题栏的右侧第二个按钮文字颜色
rightItemImage2nd String 否 标题栏的右侧第二个按钮图片
contentBackGroundColor String 否 主体背景色
customBack Boolean 否 false 是否自定义返回事件 配合事件baseBack
isIndex Boolean 否 false 用于在iOS中进行appear问题的修复
isShow Boolean 否 true 是否显示nav

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

示例代码

# listT

参数说明

参数名 类型 必填 默认值 说明
title String 是 base 页面的标题
barTitleColor String 否 页面的标题颜色
barTitleWeight String 否 页面的标题粗细程度
barBackGroundColor String 否 页面的标题背景颜色
barHasBaseline Boolean 否 false 页面的标题是否有底线
barBorderColor String 否 页面的标题底线颜色
backItemImage String 否 标题栏的返回图片
rightItemText String 否 标题栏的右侧文字
rightItemColor String 否 #666666 标题栏的右侧文字颜色
rightItemImage String 否 标题栏的右侧图片
rightItemText2nd String 否 标题栏的右侧第二个按钮文字
rightItemColor2nd String 否 #666666 标题栏的右侧第二个按钮文字颜色
rightItemImage2nd String 否 标题栏的右侧第二个按钮图片
contentBackGroundColor String 否 主体背景色
customBack Boolean 否 false 是否自定义返回事件 配合事件baseBack
isIndex Boolean 否 false 用于在iOS中进行appear问题的修复
hasData Boolean 是 false 用来控制“无数据页面”的显示和隐藏 通常为list.length!=0
hasEnd Boolean 是 true 是否能进行load操作，通常为pageNo >= totalPage（pageNo为当前的页码，totalPage为当前list的总页数）
hasRefresh Boolean 否 true 是否启用刷新控件
hasLoad String 是 true 是否启用加载控件
noContentImg String 否 noContent.png 无数据图片
noContentTxt String 否 暂无数据 无数据文字
isShow Boolean 否 true 是否显示nav

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

示例代码

# searchT

参数说明

参数名 类型 必填 默认值 说明
title String 是 base 页面的标题
barTitleColor String 否 页面的标题颜色
barTitleWeight String 否 页面的标题粗细程度
barBackGroundColor String 否 页面的标题背景颜色
barHasBaseline Boolean 否 false 页面的标题是否有底线
barBorderColor String 否 页面的标题底线颜色
backItemImage String 否 标题栏的返回图片
rightItemText String 否 标题栏的右侧文字
rightItemColor String 否 #666666 标题栏的右侧文字颜色
rightItemImage String 否 标题栏的右侧图片
rightItemText2nd String 否 标题栏的右侧第二个按钮文字
rightItemColor2nd String 否 #666666 标题栏的右侧第二个按钮文字颜色
rightItemImage2nd String 否 标题栏的右侧第二个按钮图片
contentBackGroundColor String 否 主体背景色
customBack Boolean 否 false 是否自定义返回事件 配合事件baseBack
isIndex Boolean 否 false 用于在iOS中进行appear问题的修复
hasData Boolean 是 false 用来控制“无数据页面”的显示和隐藏 通常为list.length!=0
hasEnd Boolean 是 true 是否能进行load操作，通常为pageNo >= totalPage（pageNo为当前的页码，totalPage为当前list的总页数）
hasRefresh Boolean 否 true 是否启用刷新控件
hasLoad String 是 true 是否启用加载控件
noContentImg String 否 noContent.png 无数据图片
noContentTxt String 否 暂无数据 无数据文字
isShow Boolean 否 true 是否显示nav
placeholder String 否 请输入 input的缺省文字
hasSearch Boolean 否 true 是否存在搜索栏
searchDisplayTxt String 否 搜索 搜索处展示文字
searchOutBackground String 否 #f6f6f6 搜索栏外背景色
searchInnerBackground String 否 white 搜索栏内背景色
returnType String 否 search 搜索框返回键类型
keyword String 否 搜索关键字输入绑定
isSearch Boolean 否 false 是否展示搜索
searchWait Number 否 800 从输入到自动搜索的等待时间
isAutoSearch Boolean 否 true 是否开启自动搜索
inputType String 否 text 输入类型
参数名 类型 否 否 说明

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

示例代码

# tabListT

参数说明

参数名 类型 必填 默认值 说明
title String 是 base 页面的标题
barTitleColor String 否 页面的标题颜色
barTitleWeight String 否 页面的标题粗细程度
barBackGroundColor String 否 页面的标题背景颜色
barHasBaseline Boolean 否 false 页面的标题是否有底线
barBorderColor String 否 页面的标题底线颜色
backItemImage String 否 标题栏的返回图片
rightItemText String 否 标题栏的右侧文字
rightItemColor String 否 #666666 标题栏的右侧文字颜色
rightItemImage String 否 标题栏的右侧图片
rightItemText2nd String 否 标题栏的右侧第二个按钮文字
rightItemColor2nd String 否 #666666 标题栏的右侧第二个按钮文字颜色
rightItemImage2nd String 否 标题栏的右侧第二个按钮图片
contentBackGroundColor String 否 主体背景色
customBack Boolean 否 false 是否自定义返回事件 配合事件baseBack
isIndex Boolean 否 false 用于在iOS中进行appear问题的修复
hasData Boolean 是 false 用来控制“无数据页面”的显示和隐藏 通常为list.length!=0
hasEnd Boolean 是 true 是否能进行load操作，通常为pageNo >= totalPage（pageNo为当前的页码，totalPage为当前list的总页数）
hasRefresh Boolean 否 true 是否启用刷新控件
hasLoad String 是 true 是否启用加载控件
noContentImg String 否 noContent.png 无数据图片
noContentTxt String 否 暂无数据 无数据文字
itemViewColor String 否 #FAFAFA tabpage(标签)的颜色
itemViewHeight String 否 96 tabpage的高度
itemTextFont String 否 34 tabpage的字体大小
itemNormolColor String 否 #000000 tabpage的字体颜色
itemSelectColor String 否 #1c97fc tabpage被选中时的字体颜色
items Array 是 此处数据格式必须为 [{name: "value",isSelect: true/false,其他自定义属性}]
isCenter Boolean 否 false 是center还是左边开始的tab

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

示例代码

# sheetT

参数说明

参数名 类型 必填 默认值 说明
title String 是 base 页面的标题
barTitleColor String 否 页面的标题颜色
barTitleWeight String 否 页面的标题粗细程度
barBackGroundColor String 否 页面的标题背景颜色
barHasBaseline Boolean 否 false 页面的标题是否有底线
barBorderColor String 否 页面的标题底线颜色
backItemImage String 否 标题栏的返回图片
rightItemText String 否 标题栏的右侧文字
rightItemColor String 否 #666666 标题栏的右侧文字颜色
rightItemImage String 否 标题栏的右侧图片
rightItemText2nd String 否 标题栏的右侧第二个按钮文字
rightItemColor2nd String 否 #666666 标题栏的右侧第二个按钮文字颜色
rightItemImage2nd String 否 标题栏的右侧第二个按钮图片
contentBackGroundColor String 否 主体背景色
customBack Boolean 否 false 是否自定义返回事件 配合事件baseBack
isIndex Boolean 否 false 用于在iOS中进行appear问题的修复
hasData Boolean 是 false 用来控制“无数据页面”的显示和隐藏 通常为list.length!=0
hasEnd Boolean 是 true 是否能进行load操作，通常为pageNo >= totalPage（pageNo为当前的页码，totalPage为当前list的总页数）
hasRefresh Boolean 否 true 是否启用刷新控件
hasLoad String 是 true 是否启用加载控件
noContentImg String 否 noContent.png 无数据图片
noContentTxt String 否 暂无数据 无数据文字
sheetModel String 否 top sheet显示的位置 top bottom left right
sheetBorderRadius Number 否 18 sheet的底部左右的圆角
maxShowNum Number 否 5 sheet的底部左右的圆角
sheetHeight Number 否 580 sheet的显示高度
sheetItemHeight Number 否 100 sheet单项的高度
items Array 是 sheet内容,数据格式必须为[{tag:'String',text:'String',list:[]}]
selected Array 是 sheetSelection中√的位置

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

示例代码

# columnT

参数说明

参数名 类型 必填 默认值 说明
title String 是 base 页面的标题
barTitleColor String 否 页面的标题颜色
barTitleWeight String 否 页面的标题粗细程度
barBackGroundColor String 否 页面的标题背景颜色
barHasBaseline Boolean 否 false 页面的标题是否有底线
barBorderColor String 否 页面的标题底线颜色
backItemImage String 否 标题栏的返回图片
rightItemText String 否 标题栏的右侧文字
rightItemColor String 否 #666666 标题栏的右侧文字颜色
rightItemImage String 否 标题栏的右侧图片
rightItemText2nd String 否 标题栏的右侧第二个按钮文字
rightItemColor2nd String 否 #666666 标题栏的右侧第二个按钮文字颜色
rightItemImage2nd String 否 标题栏的右侧第二个按钮图片
contentBackGroundColor String 否 主体背景色
customBack Boolean 否 false 是否自定义返回事件 配合事件baseBack
isIndex Boolean 否 false 用于在iOS中进行appear问题的修复
hasData Boolean 是 false 用来控制“无数据页面”的显示和隐藏 通常为list.length!=0
hasEnd Boolean 是 true 是否能进行load操作，通常为pageNo >= totalPage（pageNo为当前的页码，totalPage为当前list的总页数）
hasRefresh Boolean 否 true 是否启用刷新控件
hasLoad String 是 true 是否启用加载控件
noContentImg String 否 noContent.png 无数据图片
noContentTxt String 否 暂无数据 无数据文字
isShow Boolean 否 true 是否显示nav
items Array 是 左列表数据，格式为[{name: "tab1",isSelect: true/false,list: [],pageNo: '当前的页码',pageSize: '当前页显示数据的条数',totalPage: '总页数',}]
leftColumnWidthCol Number 否 250 左列表宽度
selectColorCol String 否 #ffffff 已选背景色
unSelectColorCol String 否 #f5f5f5 未选背景色
titleSizeCol String 否 36 标签的标题字号
selectTitleColorCol String 否 #333333 已选标题颜色
unSelectTitleColorCol String 否 #8f8f8f 未选标题颜色
borderLeftWidthCol String 否 1 已选标记宽度
borderLeftWidthCol String 否 #1c98fc 已选标记颜色

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

示例代码

# formT

formT给itemData传入一个对象，参数包括type及需展示组件各自需要的参数。type的值与对应的组件如下：

text input textarea image radio checkbox dropdown
type formText fromInput formTextArea formImage formRadio formCheckbox formSelectList

formText 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 是否标题靠右
isTitleBold Boolean 否 false 标题是否粗体
textValue String 否 内容
textColor String 否 #999999 内容字体颜色
lines Number 否 3 内容最大行数，超过会显示"..."
isLeft Boolean 否 false 内容是否靠左
hasOpen Boolean 否 false 是否有展开按钮
lineNumber Number 否 -1 单行最大显示字数，hasOpen为true时必填
isBelow Boolean 否 false false：内容在右侧 ture： 内容在下方

使用样例

formInput props参数说明

参数名 类型 必填 默认值 说明
index Numbe 是 0 该行的索引
tag String 是 该行的标签
ifRequire Boolean 否 false 是否必填（显示星号）
isRequireLeft Boolean 否 false 必填标记是否在左侧
fontSize Number 否 34 文字大小
titleWidth Number 否 180 标题宽度
title String 是 标题
titleColor String 否 #5f5f5f 标题颜色
isTitleRight Boolean 否 false 是否标题靠右
rightFontSize Number 否 34 右侧标题文字大小
rightTitle String 否 右侧标题
rightTitleColor String 否 #5f5f5f 右侧标题颜色
textValue String 否 内容
textColor String 否 #999999 内容字体颜色
placeholder String 否 请输入内容 输入框占位符文本
placeholderColor String 否 占位符颜色
inputType String 否 text 输入类型，日期选择 date
isLeft Boolean 否 false 输入框是否靠左
max String 否 当type属性为date时选择日期的最大时间，格式为yyyy-MM-dd
min String 否 当type属性为date时选择日期的最小时间，格式为yyyy-MM-dd
isBelow Boolean 否 false false：输入框在右侧 ture： 输入框在下方

使用样例

formTextarea props参数说明

参数名 类型 必填 默认值 说明
index Numbe 是 0 该行的索引
tag String 是 该行的标签
ifRequire Boolean 否 false 是否必填（显示星号）
isRequireLeft Boolean 否 false 必填标记是否在左侧
fontSize Number 否 34 文字大小
titleWidth Number 否 180 标题宽度
title String 是 标题
titleColor String 否 #5f5f5f 标题颜色
isTitleRight Boolean 否 false 是否标题靠右
rightFontSize Number 否 34 右侧标题文字大小
rightTitle String 否 右侧标题
rightTitleColor String 否 #5f5f5f 右侧标题颜色
textValue String 否 内容
areaHeight Number 否 120 文本区域高度
textColor String 否 #999999 内容字体颜色
maxNum Number 否 200 可输入最大字数
lines Number 否 3 类型为text时文本内容最大行数
placeholder String 否 请输入内容 输入框占位符文本
placeholderColor String 否 占位符颜色
inputType String 否 text 输入类型
isBelow Boolean 否 false false：输入框在右侧 ture： 输入框在下方

使用样例

formImage props参数说明

参数名 类型 必填 默认值 说明
index Numbe 是 0 该行的索引
tag String 是 该行的标签
ifRequire Boolean 否 false 是否必填（显示星号）
isRequireLeft Boolean 否 false 必填标记是否在左侧
fontSize Number 否 34 文字大小
titleWidth Number 否 180 标题宽度
title String 是 标题
titleColor String 否 #5f5f5f 标题颜色
isTitleRight Boolean 否 false 是否标题靠右
rightFontSize Number 否 34 右侧标题文字大小
rightTitle String 否 右侧标题
rightTitleColor String 否 #5f5f5f 右侧标题颜色
list Array 是 图片列表
canCancel Boolean 否 true 图片是否可删除
hasAdd Boolean 否 true 图片是否可添加
maxImg Number 否 9 最大图片数量
imgWidth Number 否 100 图片的宽
imgHeight Number 否 100 图片的高
isBelow Boolean 否 false false：图片在右侧 ture： 图片在下方

使用样例

formRadio 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 是否标题靠右
textColor String 否 ##666666 内容字体颜色
isCheck String 是 表示选中的图片
unCheck String 是 表示未选中的图片
selectRadio Number 否 -1 默认选中（单选），-1时不选中
isLeft Boolean 否 false 选择器是否靠左
list Array 是 选择列表
isBelow Boolean 否 false false：选择器在右侧 ture： 选择器在下方

使用样例

formCheckBox 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 是否标题靠右
rightFontSize Number 否 34 右侧标题文字大小
rightTitle String 否 右侧标题
rightTitleColor String 否 #5f5f5f 右侧标题颜色
textColor String 否 ##666666 内容字体颜色
isCheck String 是 表示选中的图片
unCheck String 是 表示未选中的图片
isLeft Boolean 否 false 选择器是否靠左
list Array 是 选择列表
isBelow Boolean 否 false false：选择器在右侧 ture： 选择器在下方

使用样例

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 选择列表内容字体颜色

使用样例

更新时间: 7/3/2019, 2:28:13 PM