网站开发第几类商标,深圳企业展厅设计公司,推广普通话奋进新征程ppt,推荐个临汾做网站的文章目录 效果展示HTML/Template部分#xff1a;JavaScript部分#xff1a;CSS部分#xff1a;完整代码 没有符合项目要求的选择器 就手写了一个 效果展示 实现一个时间选择器的功能#xff0c;可以选择小时和分钟#xff1a;
HTML/Template部分#xff1a;
picker… 文章目录 效果展示HTML/Template部分JavaScript部分CSS部分完整代码 没有符合项目要求的选择器 就手写了一个 效果展示 实现一个时间选择器的功能可以选择小时和分钟
HTML/Template部分
picker-viewclasssleepPage-time-picker:indicator-styleindicatorStyle:valuetimeValuechangehandleTimeChange
!-- 第一列小时选择 --picker-view-columnviewv-for(hour, index) in hours:keyindex:class[sleepPage-time-picker_item,{ selected: timeValue[0] index },]{{ hour }}spanclasssleepPage-time-picker_item-spanv-iftimeValue[0] index时/span/view/picker-view-column!-- 第二列分钟选择 --picker-view-columnviewv-for(minute, index) in minutes:keyindex:class[sleepPage-time-picker_item,{ selected: timeValue[1] index },]{{ minute }}spanclasssleepPage-time-picker_item-spanv-iftimeValue[1] index分/span/view/picker-view-column
/picker-viewpicker-view 是一个小程序中的组件用于实现滚动选择器效果。:indicator-style 和 :value 是组件的属性绑定分别用来设置选择器的样式和当前选择的值。change 是一个事件监听器当选择器的值发生改变时会触发 handleTimeChange 方法。
JavaScript部分
data() {return {timeValue: [0, 0], // 默认选中的时间值[小时索引, 分钟索引]indicatorStyle: height: 30px;background: rgba(237, 252, 249, 1);z-index: 0;,hours: [...Array(24).keys()].map((n) n.toString().padStart(2, 0)), // 生成小时选项数组minutes: [...Array(60).keys()].map((n) n.toString().padStart(2, 0)), // 生成分钟选项数组};
},
methods: {handleTimeChange(e) {this.timeValue e.detail.value; // 更新选择的时间值// 处理选择后的逻辑例如更新界面显示的时间console.log(Selected Time:,this.hours[this.timeValue[0]],:,this.minutes[this.timeValue[1]]);},
}data() 中定义了组件的数据状态包括 timeValue 表示当前选择的小时和分钟的索引hours 和 minutes 分别是小时和分钟的选项数组。handleTimeChange(e) 方法是一个事件处理器用来响应选择器数值改变事件。它更新 timeValue 并可以执行相应的逻辑例如打印或更新界面上显示的选择结果。
CSS部分
.sleepPage-time-picker-box {display: flex;margin-bottom: 10px;
}
.sleepPage-time-picker {height: 90px; /* 设置选择器的高度 */width: 50%; /* 设置选择器的宽度 */margin: 2px;
}
.selected {color: rgba(40, 184, 129, 1); /* 设置选中项的文字颜色 */
}
.sleepPage-time-picker_item {text-align: center;height: 30px;line-height: 30px;position: relative;
}
.sleepPage-time-picker_item-span {padding-left: 10px;position: absolute;right: 15px;
}CSS 部分定义了选择器和其子元素的样式包括选择器的整体布局和每个选项的样式以及选中项的特殊样式。
完整代码 picker-viewclasssleepPage-time-picker:indicator-styleindicatorStyle:valuetimeValuechangehandleTimeChangepicker-view-columnviewv-for(hour, index) in hours:keyindex:class[sleepPage-time-picker_item,{ selected: timeValue[0] index },]{{ hour }}spanclasssleepPage-time-picker_item-spanv-iftimeValue[0] index时/span/view/picker-view-columnpicker-view-columnviewv-for(minute, index) in minutes:keyindex:class[sleepPage-time-picker_item,{ selected: timeValue[1] index },]{{ minute }}spanclasssleepPage-time-picker_item-spanv-iftimeValue[1] index分/span/view/picker-view-column/picker-viewtimeValue: [0, 0],indicatorStyle:height: 30px;background: rgba(237, 252, 249, 1);z-index: 0;,hours: [...Array(24).keys()].map((n) n.toString().padStart(2, 0)),minutes: [...Array(60).keys()].map((n) n.toString().padStart(2, 0)),handleTimeChange(e) {this.timeValue e.detail.value;// 这里可以处理时间选择后的逻辑例如更新界面显示的时间console.log(Selected Time:,this.hours[this.timeValue[0]],:,this.minutes[this.timeValue[1]]);},.sleepPage-time-picker-box {display: flex;margin-bottom: 10px;.sleepPage-time-picker {// height: 300px;height: 90px;width: 50%;margin: 2px;}.selected {color: rgba(40, 184, 129, 1);}.sleepPage-time-picker_item {text-align: center;height: 30px;line-height: 30px;position: relative;}.sleepPage-time-picker_item-span {padding-left: 10px;position: absolute;right: 15px;}}您好我是肥晨。 欢迎关注我获取前端学习资源日常分享技术变革生存法则行业内幕洞察先机。
