步进器 ui-stepper
引用组件,请参考说明文档,下面的引入只是作为演示,实际引入路径,请根据您的项目架构更改。
"usingComponents": {
"ui-stepper" : "/packageB/components/ui-stepper/ui-stepper"
}
默认类型
<ui-stepper/>
<ui-stepper theme="blue"/>
<ui-stepper theme="grey"/>
<ui-stepper theme="no-bg"/>
类型2
<ui-stepper tpl="2" />
<ui-stepper tpl="2" theme="blue"/>
<ui-stepper tpl="2" theme="grey"/>
<ui-stepper tpl="2" theme="no-bg"/>
类型3
<ui-stepper tpl="3" />
<ui-stepper tpl="3" theme="blue"/>
<ui-stepper tpl="3" theme="grey"/>
<ui-stepper tpl="3" theme="no-bg"/>
类型4
<ui-stepper tpl="4" />
<ui-stepper tpl="4" theme="blue"/>
<ui-stepper tpl="4" theme="grey"/>
<ui-stepper tpl="4" theme="no-bg"/>
其它类型
<view>当前值:{{val}}</view>
<view class="mt-2">
<ui-stepper val="{{val}}" maxVal="10" bind:onCut="onCutVal" bind:onAdd="onAddVal" bind:onVal="onVal"/>
</view>
<view class="mt-4">可为负数:{{sval}}</view>
<view class="mt-2">
<ui-stepper val="{{sval}}" minVal="-10" maxVal="10" noVal bind:onVal="onsVal"/>
</view>
<view class="mt-4">小数点:{{vals}}</view>
<view class="mt-2">
<ui-stepper val="{{vals}}" maxVal="2" digit bind:onVal="onVals"/>
</view>
<view class="mt-4">小数点:{{valss}}</view>
<view class="mt-2">
<ui-stepper val="{{valss}}" maxVal="2" digit noVal digits="2" bind:onVal="onValss"/>
</view>
参数
参数 | 类型 | 可选值 | 默认值 | 说明 |
---|---|---|---|---|
val | Number/String | - | 1 | 数量值 |
minVal | Number/String | - | 1 | 最小值 |
maxVal | Number/String | - | 100 | 最大值 |
digit | Boolean | - | false | 小数点 |
digits | Number/String | 1-2 | 1 | 小数点位数 |
theme | String | default,no-bg,grey,blue | default | 主题 |
tpl | Number/String | 1-4 | 1 | 类型 |
noVal | Boolean | - | false | 输入框禁止输入 |
noCut | Boolean | - | false | 禁止减少 |
noAdd | Boolean | - | false | 禁止增加 |
item | - | - | - | 附加数据,其它数据,事件内携带返回 |
uiBox | String | - | - | 背景样式(class) |
bg | String | - | - | 背景样式(class) |
bgCut | String | - | - | 减少按钮的背景(class) |
bgAdd | String | - | - | 增加按钮的背景(class) |
bgVal | String | - | - | 输入框的背景(class) |
ui | String | - | - | 其它样式(class) |
uiCut | String | - | - | 减少按钮的其它样式(class) |
uiAdd | String | - | - | 增加按钮的其它样式(class) |
uiVal | String | - | - | 输入框的其它样式(class) |
bind:onCut | Event | - | event.detail | 减少事件 |
bind:onAdd | Event | - | event.detail | 增加事件 |
bind:onVal | Event | - | event.detail | 值改变事件 |
提示
如果你觉得主题不好看,可根据 样式属性,自行修改。