uniapp - picker
【普通json数组】
针对官方的普通json数组示例,做些填充
- <template>
- <view>
- <view class="uni-title uni-common-pl">地区选择器</view>
- <view class="uni-list">
- <view class="uni-list-cell">
- <view class="uni-list-cell-db">
- <picker @change="bindPickerChange" :value="index" :range="array">
- <view class="uni-input">{{array[index]}}</view>
- </picker>
- </view>
- </view>
- </view>
- <view class="uni-title uni-common-pl">地区选择器(普通Json数组)</view>
- <view class="uni-list">
- <view class="uni-list-cell">
- <view class="uni-list-cell-db">
- <picker @change="bindPickerChanges" range-key="name" :data-index="22" :data-id="objectArray[index].id" :value="index" :range="objectArray">
- <view class="uni-input">{{objectArray[index].name}}</view>
- <!-- 还是建议用input保存,可能picker更新不及时 -->
- <input type="text" :value="objectArray[index].id" hidden/>
- </picker>
- </view>
- </view>
- </view>
- <view class="uni-title uni-common-pl">时间选择器</view>
- <view class="uni-list">
- <view class="uni-list-cell">
- <view class="uni-list-cell-db">
- <picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
- <view class="uni-input">{{time}}</view>
- </picker>
- </view>
- </view>
- </view>
- <view class="uni-title uni-common-pl">日期选择器</view>
- <view class="uni-list">
- <view class="uni-list-cell">
- <view class="uni-list-cell-db">
- <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
- <view class="uni-input">{{date}}</view>
- </picker>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- const currentDate = this.getDate({
- format: true
- })
- return {
- title: 'picker',
- array: ['中国', '美国', '巴西', '日本'],
- objectArray: [{
- id: 11,
- name: '中国'
- },
- {
- id: 12,
- name: '美国'
- },
- {
- id: 13,
- name: '德国'
- },
- {
- id: 14,
- name: '法国'
- }
- ],
- index: 0,
- date: currentDate,
- time: '12:01'
- }
- },
- computed: {
- startDate() {
- return this.getDate('start');
- },
- endDate() {
- return this.getDate('end');
- }
- },
- methods: {
- bindPickerChange: function(e) {
- console.log('picker发送选择改变,携带值为', e.target.value)
- this.index = e.target.value
- },
- bindPickerChanges: function(e) {
- this.index = e.detail.value
- console.log('可以传data-xx:xx',e.currentTarget.dataset.index,'\n默认传过来的是下标:',e.detail.value,'\n也可以传普通json传过来的id等:',e.currentTarget.dataset.id);
- },
- bindDateChange: function(e) {
- this.date = e.target.value
- },
- bindTimeChange: function(e) {
- this.time = e.target.value
- },
- getDate(type) {
- const date = new Date();
- let year = date.getFullYear();
- let month = date.getMonth() + 1;
- let day = date.getDate();
- if (type === 'start') {
- year = year - 60;
- } else if (type === 'end') {
- year = year + 2;
- }
- month = month > 9 ? month : '0' + month;;
- day = day > 9 ? day : '0' + day;
- return `${year}-${month}-${day}`;
- }
- }
- }
- </script>
uniapp - picker的更多相关文章
- uniapp自定义picker城市多级联动组件
uniapp自定义picker城市多级联动组件 支持多端--h5.app.微信小程序.支付宝小程序... 支持自定义配置picker插件级数 支持无限级 注意事项:插件传入数据格式为children树 ...
- uni-app中picker组件的一个坑
这里直接贴出代码 <view class="goods-info-add fl-sw"> <view>运费模板:</view> <view ...
- uniapp中使用picker中的注意事项
APP端中picker点击后不弹出: 1.请确保picker标签里面嵌套了一个view,并且view里面有值 2.请确保picker中的默认值的格式跟该picker类型的值对应 例如下面: <v ...
- uni-app 微信小程序 picker 三级联动
之前做过一个picker的三级联动功能,这里分享代码给大家 具体代码: // An highlighted block <template> <view> <picker ...
- uni-app中组件picker的基本使用(日期选择器为例)
例:需要在下图"自定义日期"中使用日期选择器 <template> <div> <picker mode="date" @chan ...
- uni-app(Vue)中(picker)用联动(关联)选择以至于完成某些功能
如下图所示,在项目中需求是通过首先选择学生的专业,选好之后在每个专业下面选择对应的学期,每个学期有对应的学费,因此就需要联动选择来实现这一功能. 以下仅展示此功能主要代码: <div class ...
- uni-app 事件以及事件绑定
事件修饰符stop的使用会阻止冒泡,但是同时绑定了一个非冒泡的事件,会导致该元素上的catchEventName失效! prevent可以直接干掉,因为uni-app里没有什么默认事件,比如submi ...
- 如何学习uni-app?
uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架. 开发者通过编写 Vue.js 代码,uni-app 将其编译到iOS.Android.微信小程序.H5等多个平台,保证其正确运行并 ...
- uni-app v-for循环遍历 动态切换class、动态切换style
动态切换class,主要代码::class="i.themColor" <view v-for="i in htmlJSON" class=" ...
随机推荐
- linux服务器中安装VSCode
Centos7系统 步骤:在linux系统中安装VSCode(Visual Studio Code) 1.从官网下载压缩包访问Visual Studio Code官网 https://code.vis ...
- SWD烧录/仿真方式
单片机在烧写/仿真的时候具有一种方式叫做SWD,这种方式只用到两根线SWDIO,SWCLK.一般SWD和JTAG中的JTMS和JTCK共用的.由于线少,所以使用非常方便,但是速率相对较低. 在接线时, ...
- 二进制搭建Kubernetes集群(最新v1.16.0版本)
目录 1.生产环境k8s平台架构 2.官方提供三种部署方式 3.服务器规划 4.系统初始化 5.Etcd集群部署 5.1.安装cfssl工具 5.2.生成etcd证书 5.2.1 创建用来生成 CA ...
- 安装lamp服务器
1.安装http: $ yum install httpd 2.启动http: $ systemctl start httpd 3.访问:http://192.168.1.100 4.Installi ...
- beta版本——第一次冲刺
第一次冲刺 (1)SCRUM部分☁️ ✨成员描述: 姓名 李星晨 完成了哪个任务 增加了个人中心返回主页按钮 花了多少时间 1h 还剩余多少时间 1h 遇到什么困难 没有遇到问题 这两天解决的进度 1 ...
- spring cloud (二) 服务提供者 EuekaClient
1 创建一个springboot项目 spring-cloud-service-a 注册到eureka服务注册中心中 项目添加依赖 <dependency> <groupId&g ...
- 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 ...
- 烦人的警告 Deprecated: convertStrings was not specified when starting the JVM
python 调用java代码: Deprecated: convertStrings was not specified when starting the JVM. The default beh ...
- django.db.models.fields.related_descriptors.RelatedObjectDoesNotExist: Course has no coursedetail.
错误描述: 一对一反向查询失败! 前提: Course和CourseDetail OneToOne 原因: Course数据和CourseDetail数据没有一一对应.
- LeetCode 988. Smallest String Starting From Leaf
原题链接在这里:https://leetcode.com/problems/smallest-string-starting-from-leaf/ 题目: Given the root of a bi ...