您现在的位置是:网站首页>前端技术>uniappuniapp
小程序uniapp 实现店铺营业时间段选择
神夜2020-06-03 15:20:59【uniapp】4484人已围观文章来源:神夜个人博客
简介
小程序uniapp 实现店铺营业时间段选择
<template> <view class="form"> <picker mode="multiSelector" @columnchange="columnChange" @change="yyTimeChange" :range="yyTimeList"> <input type="text" v-model="form.yytime" disabled class="intext" placeholder="请选择营业时间段"> <image src="/static/icon-right.png" class="r"></image> </picker> </view> </template> <script> export default { data() { return { timearr: [], yyTimeList: [[], []], form: { yytime: '', } } }, onLoad() { this.initYyTimeList(); }, methods: { //初始化营业时间 initYyTimeList() { var m = 0, n = 0, arr = []; for (var i = 0; i < 48; i++) { if (i == 0) { n = 0; } else { n += 30; } if (n > 30) { n = 0; m += 1; } arr.push((m > 9 ? m: "0" + m) + ":" + (n > 9 ? n: "0" + n)); } var b = 0, c = 0, arr2 = []; for (var i = 0; i < 47; i++) { b += 30; if (b > 30) { b = 0; c += 1; } arr2.push((c > 9 ? c: "0" + c) + ":" + (b > 9 ? b: "0" + b)); } this.timearr = arr; this.yyTimeList[0] = arr; this.yyTimeList[1] = arr2; }, //时间列表改变 columnChange(e) { if (e.target.column == 0) { let startTime = this.yyTimeList[0][e.target.value]; let arr = []; this.timearr.forEach(res = >{ if (res > startTime) { arr.push(res); } }) arr.push("00:00"); this.yyTimeList[1] = arr; this.$forceUpdate() } }, //确定选择时间 yyTimeChange(e) { this.form.yytime = this.yyTimeList[0][e.target.value[0]] + '-' + this.yyTimeList[1][e.target.value[1]]; }, } } </script> <style> </style>
本栏推荐
猜你喜欢
站点信息
- 建站时间:2017-10-24
- 网站程序:Hsycms 3.0
- 文章统计:511条
- 微信公众号:扫描二维码,关注我们