【普通json数组】

针对官方的普通json数组示例,做些填充

  1. <template>
  2. <view>
  3. <view class="uni-title uni-common-pl">地区选择器</view>
  4. <view class="uni-list">
  5. <view class="uni-list-cell">
  6. <view class="uni-list-cell-db">
  7. <picker @change="bindPickerChange" :value="index" :range="array">
  8. <view class="uni-input">{{array[index]}}</view>
  9. </picker>
  10. </view>
  11. </view>
  12. </view>
  13.  
  14. <view class="uni-title uni-common-pl">地区选择器(普通Json数组)</view>
  15. <view class="uni-list">
  16. <view class="uni-list-cell">
  17. <view class="uni-list-cell-db">
  18. <picker @change="bindPickerChanges" range-key="name" :data-index="22" :data-id="objectArray[index].id" :value="index" :range="objectArray">
  19. <view class="uni-input">{{objectArray[index].name}}</view>
  20. <!-- 还是建议用input保存,可能picker更新不及时 -->
  21. <input type="text" :value="objectArray[index].id" hidden/>
  22. </picker>
  23. </view>
  24. </view>
  25. </view>
  26.  
  27. <view class="uni-title uni-common-pl">时间选择器</view>
  28. <view class="uni-list">
  29. <view class="uni-list-cell">
  30. <view class="uni-list-cell-db">
  31. <picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
  32. <view class="uni-input">{{time}}</view>
  33. </picker>
  34. </view>
  35. </view>
  36. </view>
  37.  
  38. <view class="uni-title uni-common-pl">日期选择器</view>
  39. <view class="uni-list">
  40. <view class="uni-list-cell">
  41. <view class="uni-list-cell-db">
  42. <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
  43. <view class="uni-input">{{date}}</view>
  44. </picker>
  45. </view>
  46. </view>
  47. </view>
  48. </view>
  49. </template>
  50.  
  51. <script>
  52. export default {
  53. data() {
  54. const currentDate = this.getDate({
  55. format: true
  56. })
  57. return {
  58. title: 'picker',
  59. array: ['中国', '美国', '巴西', '日本'],
  60. objectArray: [{
  61. id: 11,
  62. name: '中国'
  63. },
  64. {
  65. id: 12,
  66. name: '美国'
  67. },
  68. {
  69. id: 13,
  70. name: '德国'
  71. },
  72. {
  73. id: 14,
  74. name: '法国'
  75. }
  76. ],
  77. index: 0,
  78. date: currentDate,
  79. time: '12:01'
  80. }
  81. },
  82. computed: {
  83. startDate() {
  84. return this.getDate('start');
  85. },
  86. endDate() {
  87. return this.getDate('end');
  88. }
  89. },
  90. methods: {
  91. bindPickerChange: function(e) {
  92. console.log('picker发送选择改变,携带值为', e.target.value)
  93. this.index = e.target.value
  94. },
  95. bindPickerChanges: function(e) {
  96. this.index = e.detail.value
  97. console.log('可以传data-xx:xx',e.currentTarget.dataset.index,'\n默认传过来的是下标:',e.detail.value,'\n也可以传普通json传过来的id等:',e.currentTarget.dataset.id);
  98. },
  99. bindDateChange: function(e) {
  100. this.date = e.target.value
  101. },
  102. bindTimeChange: function(e) {
  103. this.time = e.target.value
  104. },
  105. getDate(type) {
  106. const date = new Date();
  107. let year = date.getFullYear();
  108. let month = date.getMonth() + 1;
  109. let day = date.getDate();
  110.  
  111. if (type === 'start') {
  112. year = year - 60;
  113. } else if (type === 'end') {
  114. year = year + 2;
  115. }
  116. month = month > 9 ? month : '0' + month;;
  117. day = day > 9 ? day : '0' + day;
  118. return `${year}-${month}-${day}`;
  119. }
  120. }
  121. }
  122. </script>

uniapp - picker的更多相关文章

  1. uniapp自定义picker城市多级联动组件

    uniapp自定义picker城市多级联动组件 支持多端--h5.app.微信小程序.支付宝小程序... 支持自定义配置picker插件级数 支持无限级 注意事项:插件传入数据格式为children树 ...

  2. uni-app中picker组件的一个坑

    这里直接贴出代码 <view class="goods-info-add fl-sw"> <view>运费模板:</view> <view ...

  3. uniapp中使用picker中的注意事项

    APP端中picker点击后不弹出: 1.请确保picker标签里面嵌套了一个view,并且view里面有值 2.请确保picker中的默认值的格式跟该picker类型的值对应 例如下面: <v ...

  4. uni-app 微信小程序 picker 三级联动

    之前做过一个picker的三级联动功能,这里分享代码给大家 具体代码: // An highlighted block <template> <view> <picker ...

  5. uni-app中组件picker的基本使用(日期选择器为例)

    例:需要在下图"自定义日期"中使用日期选择器 <template> <div> <picker mode="date" @chan ...

  6. uni-app(Vue)中(picker)用联动(关联)选择以至于完成某些功能

    如下图所示,在项目中需求是通过首先选择学生的专业,选好之后在每个专业下面选择对应的学期,每个学期有对应的学费,因此就需要联动选择来实现这一功能. 以下仅展示此功能主要代码: <div class ...

  7. uni-app 事件以及事件绑定

    事件修饰符stop的使用会阻止冒泡,但是同时绑定了一个非冒泡的事件,会导致该元素上的catchEventName失效! prevent可以直接干掉,因为uni-app里没有什么默认事件,比如submi ...

  8. 如何学习uni-app?

    uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架. 开发者通过编写 Vue.js 代码,uni-app 将其编译到iOS.Android.微信小程序.H5等多个平台,保证其正确运行并 ...

  9. uni-app v-for循环遍历 动态切换class、动态切换style

    动态切换class,主要代码::class="i.themColor"  <view v-for="i in htmlJSON" class=" ...

随机推荐

  1. linux服务器中安装VSCode

    Centos7系统 步骤:在linux系统中安装VSCode(Visual Studio Code) 1.从官网下载压缩包访问Visual Studio Code官网 https://code.vis ...

  2. SWD烧录/仿真方式

    单片机在烧写/仿真的时候具有一种方式叫做SWD,这种方式只用到两根线SWDIO,SWCLK.一般SWD和JTAG中的JTMS和JTCK共用的.由于线少,所以使用非常方便,但是速率相对较低. 在接线时, ...

  3. 二进制搭建Kubernetes集群(最新v1.16.0版本)

    目录 1.生产环境k8s平台架构 2.官方提供三种部署方式 3.服务器规划 4.系统初始化 5.Etcd集群部署 5.1.安装cfssl工具 5.2.生成etcd证书 5.2.1 创建用来生成 CA ...

  4. 安装lamp服务器

    1.安装http: $ yum install httpd 2.启动http: $ systemctl start httpd 3.访问:http://192.168.1.100 4.Installi ...

  5. beta版本——第一次冲刺

    第一次冲刺 (1)SCRUM部分☁️ ✨成员描述: 姓名 李星晨 完成了哪个任务 增加了个人中心返回主页按钮 花了多少时间 1h 还剩余多少时间 1h 遇到什么困难 没有遇到问题 这两天解决的进度 1 ...

  6. spring cloud (二) 服务提供者 EuekaClient

    1 创建一个springboot项目  spring-cloud-service-a  注册到eureka服务注册中心中 项目添加依赖 <dependency> <groupId&g ...

  7. Codeforces G. Nick and Array(贪心)

    题目描述: Nick had received an awesome array of integers a=[a1,a2,…,an] as a gift for his 5 birthday fro ...

  8. 烦人的警告 Deprecated: convertStrings was not specified when starting the JVM

    python 调用java代码: Deprecated: convertStrings was not specified when starting the JVM. The default beh ...

  9. django.db.models.fields.related_descriptors.RelatedObjectDoesNotExist: Course has no coursedetail.

    错误描述: 一对一反向查询失败! 前提: Course和CourseDetail    OneToOne 原因: Course数据和CourseDetail数据没有一一对应.

  10. LeetCode 988. Smallest String Starting From Leaf

    原题链接在这里:https://leetcode.com/problems/smallest-string-starting-from-leaf/ 题目: Given the root of a bi ...