更新记录
v1.0(2019-07-09)
下载此版本
v1.0 首次发布
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
sunui-stepper for sunUI
不多说了吧,直接上示例!!!,sunUI本月底发布beta2.0.0
<!--
*
* 建议min和val一样!
*
* label:是计数器标识
* max:最大值
* min:最小值
* val:默认值
* step:步进值(支持整数和小数,因步骤计算失误会造成精度损失!)
*
* unactive:当前不可点击标识颜色
* active:当前可点击标识颜色
*
* @change:回调事件
*
* -->
<template>
<view class="sunui">
<view class="sunui-title">计数器(普通步进)</view>
<view>
<sunui-stepper :label='1' :max="10" :val="-5" :min="-5" @change="stepper2"></sunui-stepper>
</view>
<view class="sunui-title">计数器(整数步进)</view>
<view>
<sunui-stepper :label='2' :max="5" :val="2" :step="3" :min="2" @change="stepper3"></sunui-stepper>
</view>
<view class="sunui-title">计数器(支持点位步进,可能会损失精度)</view>
<view>
<sunui-stepper unactive="#ddd" active="#19A15F" :label='0' :val="4" :max="10" :min="4" :step="0.2" @change="stepper1"></sunui-stepper>
</view>
<view class="sunui-title">计数器(循环)</view>
<view>
<view v-for="(item,index) in stepperList" :key='index'>
<sunui-stepper :label='item.id' :max="10" :val="-5" :min="-5" @change="stepper"></sunui-stepper>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
stepperList: [{
id: 10
},
{
id: 20
}
],
arrs: []
};
},
onLoad() {
},
methods: {
stepper(e) {
for (let i = 0, len = this.stepperList.length; i < len; i++) {
if (this.stepperList[i].id != e.label) {
this.arrs.push({
id: e.label,
val: e.val
});
}
}
console.log('循环计数器:', [...new Map(this.arrs.map(({
id,
val
}) => ([id, val]))).entries()].map(([id, val]) => ({
id,
val
})));
},
stepper1(e) {
console.log(e);
},
stepper2(e) {
console.log(e);
},
stepper3(e) {
console.log(e);
}
}
}
</script>
<style>
.sunui>.sunui-title {
margin-bottom: 2%;
}
</style>