【普通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的更多相关文章

  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 ...