东莞免费建站模板,提供网络推广服务,怎么看别的网站是那个公司做的,网页设计与制作html代码说实话#xff0c;uniapp和uview的关于只有时分秒的组件实在是不行。全是日历#xff0c;但是实际根本就不需要日历这玩意。百度了下#xff0c;终于看到了一个只有时分秒的组件。原地址#xff1a;原地址#xff0c;如若侵犯请联系我删除
templateview clas… 说实话uniapp和uview的关于只有时分秒的组件实在是不行。全是日历但是实际根本就不需要日历这玩意。百度了下终于看到了一个只有时分秒的组件。原地址原地址如若侵犯请联系我删除
templateview classhms!-- //显示时间的地方样式可以自行修改 --view classhmsText clickshow{{ hmsVal }}/view!-- //弹出选择时间的弹框 --uni-popup refpopup typebottom background-color#fffview classhms_contentview classhmsBtnview classclose clickclose取消/viewview classcomplete clickcompleteFun完成/view/viewpicker-view indicator-style100rpx changebindChange classpicker-view :valuepickerArrIndexpicker-view-columnview classitem v-for(item, index) in hours :keyindex{{ item }}时/view/picker-view-columnpicker-view-columnview classitem v-for(item, index) in minute :keyindex{{ item }}分/view/picker-view-columnpicker-view-columnview classitem v-for(item, index) in second :keyindex{{ item }}秒/view/picker-view-column/picker-view/view/uni-popup/view
/template
script
export default {props: {//父组件传过来的初始值不是必须传不传默认值为00:00:00hmsval: {type: String,default() {return 00:00:00;}}},data() {return {hours: [],minute: [],second: [],h: 00,m: 00,s: 00,hmsVal: 00:00:00,//页面使用的显示值pickerArrIndex: [0, 0, 0]//picker-view 显示默认};},watch: {//监听父组件传过来的从新赋值给新的变量显示hmsval(newval, oldval) {this.hmsVal newval;}},created() {this.hoursFun();this.minuteFun();this.secondFun();},methods: {// 时hoursFun() {for (var i 0; i 23; i) {if (i 10) {i 0 i;this.hours.push(i);} else {this.hours.push(i);}}},// 分minuteFun() {for (var i 0; i 59; i) {if (i 10) {i 0 i;this.minute.push(i);} else {this.minute.push(i);}}},// 秒secondFun() {for (var i 0; i 59; i) {if (i 10) {i 0 i;this.second.push(i);} else {this.second.push(i);}}},//picker值改变的事件bindChange(e) {const val e.detail.value;this.h this.hours[val[0]] ? this.hours[val[0]] : this.h;this.m this.minute[val[1]] ? this.minute[val[1]] : this.m;this.s this.second[val[2]] ? this.second[val[2]] : this.s;},show() {// picker-view 显示默认值var hmsArr this.hmsVal.split(:);var hindex this.hours.findIndex(item item hmsArr[0]);var mindex this.minute.findIndex(item item hmsArr[1]);var sindex this.second.findIndex(item item hmsArr[2]);this.pickerArrIndex [hindex, mindex, sindex];this.$refs.popup.open();},// 关闭popupclose() {this.$refs.popup.close();},//点击完成completeFun() {//点击完成赋值this.hmsVal ${this.h}:${this.m}:${this.s};//新的值传给父组件this.$emit(complete, this.hmsVal)this.$refs.popup.close();}}
};/script
style langscss scoped
.picker-view {height: 400rpx;background: #fff;
}
.item {line-height: 100rpx;text-align: center;
}
.hmsText {width: 160rpx;height: 50rpx;line-height: 50rpx;border: 1px solid #ddd;text-align: center;background: #fff;border-radius: 10rpx;margin-left: 10rpx;
}
.hmsBtn {display: flex;align-items: center;background: #fff;height: 80rpx;line-height: 80rpx;justify-content: space-between;padding: 0 20rpx;border-bottom: 1px solid #ddd;.complete {color: #0055ff;}
}
/style
父组件使用
uniHms hmsval21:20:00 completecomplete / 然后实际效果是 兄弟搞得不错可惜了我需要一个时间段 但是这是个很好的例子。于是按照这个修改加了一个时间段的时分秒选择器。这里我试了其他样式终究选了一个自己满意的时间范围选择格式如果需要可以自行修改样式大致逻辑方法是不变的
先上代码
templateview classhms!-- //显示时间的地方样式可以自行修改 --view classhmsText clickshow{{ hmsVal_start - hmsVal_end }}/view!-- //弹出选择时间的弹框 --uni-popup refpopup typebottom background-color#fffview classhms_contentview classhmsBtnview classclose clickclose取消/viewview classtip{{ hmsVal_start 至 hmsVal_end }}/viewview classcomplete clickcompleteFun完成/view/viewview classpickerpicker-view indicator-style100rpx changebindChange classpicker-view :valuepickerArrIndexLeftpicker-view-columnview classitem v-for(item, index) in hours :keyindex{{ item }}时/view/picker-view-columnpicker-view-columnview classitem v-for(item, index) in minute :keyindex{{ item }}分/view/picker-view-columnpicker-view-columnview classitem v-for(item, index) in second :keyindex{{ item }}秒/view/picker-view-column/picker-viewview classline-/viewpicker-view indicator-style100rpx changebindChange2 classpicker-view :valuepickerArrIndexRightpicker-view-columnview classitem v-for(item, index) in hours :keyindex{{ item }}时/view/picker-view-columnpicker-view-columnview classitem v-for(item, index) in minute :keyindex{{ item }}分/view/picker-view-columnpicker-view-columnview classitem v-for(item, index) in second :keyindex{{ item }}秒/view/picker-view-column/picker-view/view/view/uni-popup/view
/template
script
export default {props: {//父组件传过来的初始值不是必须传不传默认值为00:00:00hmsval: {type: String,default() {return 00:00:00-00:00:00;}}},data() {return {hours: [],minute: [],second: [],/* 开始时间 */h: 00,m: 00,s: 00,/* 结束时间 */h2: 00,m2: 00,s2: 00,hmsVal_start: 00:00:00,//页面使用的显示值hmsVal_end: 00:00:00,//页面使用的显示值pickerArrIndexLeft: [0, 0, 0],//picker-view 显示默认pickerArrIndexRight: [0, 0, 0],//picker-view 显示默认};},watch: {//监听父组件传过来的从新赋值给新的变量显示hmsval: {immediate: true,handler(newval) {console.log(newval : , newval);if (newval ! 00:00:00-00:00:00) {this.hmsVal_start newval.split(-)[0]this.hmsVal_end newval.split(-)[1]}}}},created() {this.hoursFun();this.minuteFun();this.secondFun();},methods: {// 时hoursFun() {for (var i 0; i 23; i) {if (i 10) {i 0 i;this.hours.push(i);} else {this.hours.push(i);}}},// 分minuteFun() {for (var i 0; i 59; i) {if (i 10) {i 0 i;this.minute.push(i);} else {this.minute.push(i);}}},// 秒secondFun() {for (var i 0; i 59; i) {if (i 10) {i 0 i;this.second.push(i);} else {this.second.push(i);}}},//picker值改变的事件bindChange(e) {const val e.detail.value;this.h this.hours[val[0]] ? this.hours[val[0]] : this.h;this.m this.minute[val[1]] ? this.minute[val[1]] : this.m;this.s this.second[val[2]] ? this.second[val[2]] : this.s;this.hmsVal_start this.h : this.m : this.s},//picker值改变的事件bindChange2(e) {const val e.detail.value;this.h2 this.hours[val[0]] ? this.hours[val[0]] : this.h2;this.m2 this.minute[val[1]] ? this.minute[val[1]] : this.m2;this.s2 this.second[val[2]] ? this.second[val[2]] : this.s2;this.hmsVal_end this.h2 : this.m2 : this.s2},show() {// picker-view 显示默认值var hmsArr this.hmsVal_start.split(:);var hmsArr2 this.hmsVal_end.split(:);var hindex this.hours.findIndex(item item hmsArr[0]);var mindex this.minute.findIndex(item item hmsArr[1]);var sindex this.second.findIndex(item item hmsArr[2]);var hindex2 this.hours.findIndex(item item hmsArr2[0]);var mindex2 this.minute.findIndex(item item hmsArr2[1]);var sindex2 this.second.findIndex(item item hmsArr2[2]);this.pickerArrIndexLeft [hindex, mindex, sindex];this.pickerArrIndexRight [hindex2, mindex2, sindex2];this.$refs.popup.open();},// 关闭popupclose() {this.$refs.popup.close();},//点击完成completeFun() {//新的值传给父组件this.$emit(complete, this.hmsVal_start - this.hmsVal_end)this.$refs.popup.close();}}
};/script
style langscss scoped
.picker-view {height: 400rpx;background: #fff;
}
.item {line-height: 100rpx;text-align: center;
}
.hmsText {line-height: 50rpx;text-align: center;background: #fff;margin-left: 10rpx;
}
.hmsBtn {display: flex;align-items: center;background: #fff;height: 80rpx;justify-content: space-between;padding: 0 20rpx;border-bottom: 1px solid #ddd;.complete {color: #0055ff;}.tip {color: #939393;}
}
.picker {display: flex;align-items: center;.line {font-weight: bolder;position: relative;top: 10rpx;}
}
/deep/.picker-view {width: 50%;
}
/style
父组件
uniHms hmsval21:20:00-23:56:00 completecomplete /
格式是时间-时间。
然后页面显示效果图 欧耶完成需要的和不需要的赶紧收藏起来只要干这行的说不定哪天就需要用到呢
另外补充一句uniapp组件文档很鸡肋哎。。。
