当前位置:   article > 正文

uniapp时间选择器

uniapp时间选择器

Uniapp 是一套基于Vue.js 开发的跨平台开发框架,它能够以一套代码编译成多个平台的应用,包括 iOS、Android、H5 等。要实现时间选择器可以使用uni-app提供的组件picker,它可以用于选择器、时间选择器、日期选择器等场景。

以下是一个简单的时间选择器实现示例:

  1. 在页面上添加 picker 组件
  1. <template>
  2. <view>
  3. <picker mode="time" @change="onChange"></picker>
  4. <p>当前时间:{{time}}</p>
  5. </view>
  6. </template>
  7. <script>
  8. export default {
  9. data() {
  10. return {
  11. time: ''
  12. }
  13. },
  14. methods: {
  15. onChange(event) {
  16. this.time = event.detail.value
  17. }
  18. }
  19. }
  20. </script>

  1. 在组件中监听 picker 的 change 事件,将选择的时间赋值给 data 中的 time 变量。

  2. 在组件中使用 {{time}} 显示选择的时间。

注意:需要在 manifest.json 中添加需要使用的组件:

  1. "usingComponents": {
  2. "picker": "@vant/weapp/picker/index"
  3. }

这里使用了 Vant UI 组件库的 picker 组件,当然你也可以使用其他组件库或自己写组件。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小丑西瓜9/article/detail/565701
推荐阅读
相关标签
  

闽ICP备14008679号