更新记录

v1.0(2019-07-09)

v1.0 首次发布


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>

    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);
            }
        }
    }

<style>
    .sunui>.sunui-title {
        margin-bottom: 2%;
    }
</style>

隐私、权限及商业化声明

1. 本插件需要申请的手机端权限列表:

2. 本插件采集的手机端数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问