uniapp 周选择范围时间

 

 

css 使用 点击查看下载css库

css自定义的样式:

/* 亮高 */
.box-blue {
    background-color: #409EFF;
    color: white;
    border-radius: 10rpx;
}
/* 中间连接 背景颜色 */
.bg-light-blue {
    width: 80rpx;
    height: 80rpx;
    background-color: #e7f2ff;
}

/* 中间未连接的 背景颜色 */
.bg-light-fff {
    width: 80rpx;
    height: 80rpx;
    background-color: #fff;
}

 

html

<!-- 一到七 -->
                <view class=" jh-w-p-100; jh-h-140;jh-flex;  jh-p-30" style="margin: 0 10%;">
                    <view v-for="(item,index) in numData" :key="index" class="jh-text-center; jh-l-h-80"
                        :class="index < maxNum && index > minNum ? 'bg-light-blue':'bg-light-fff'">
                        <view class=" jh-w-80; jh-h-80" :class="{ 'box-blue': numValue.indexOf(index)!=-1,  }"
                            :key="isKey" @click="numClick(item,index)">
                            {{item}}
                        </view>
                    </view>
                </view>

js

data数据:

// 选中的最小值
minNum: null,
// 选中的最大值
maxNum: null,
// 选中最多两位数的 数据
numValue: [0, 4],
// 一到七
numData: ['一', '二', '三', '四', '五', '六', '日'],

在onLoad设置默认显示

onLoad() {
            if (this.numValue.length == 2) {
                // 找出最小值
                this.minNum = Math.min(this.numValue[0], this.numValue[1]);
                // 找出最大值
                this.maxNum = Math.max(this.numValue[0], this.numValue[1]);
            }
        },

点击事件 methods：

// 点击一到七
            numClick(item, index) {
                if (this.numValue.length == 2) {
                    this.numValue = []
                    this.minNum = -1
                    this.maxNum = -1
                } else {
                    this.numValue.push(index)
                    if (this.numValue.length == 2) {
                        // 找出最小值
                        this.minNum = Math.min(this.numValue[0], this.numValue[1]);
                        // 找出最大值
                        this.maxNum = Math.max(this.numValue[0], this.numValue[1]);
                    }
                }
                console.log('this.numValue', this.numValue);
            },