【Kevin Learn 小程序】--＞picker-view

效果图

属性

参考：picker-view

代码

app.js

//app.js
App({onLaunch: function () {console.log('App Launch')},onShow: function () {console.log('App Show')},onHide: function () {console.log('App Hide')},globalData: {hasLogin: false}
})

app.json

{"pages": ["pages/picker-view/picker-view"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle": "black"},"style": "v2","sitemapLocation": "sitemap.json"
}

picker-view.js

const date = new Date()
const years = []
const months = []
const days = []for (let i = 1990; i <= date.getFullYear(); i++) {years.push(i)
}for (let i = 1; i <= 12; i++) {months.push(i)
}for (let i = 1; i <= 31; i++) {days.push(i)
}Page({data: {years: years,year: date.getFullYear(),months: months,month: 2,days: days,day: 2,year: date.getFullYear(),value: [0, 1, 1],},bindChange: function (e) {const val = e.detail.valuethis.setData({year: this.data.years[val[0]],month: this.data.months[val[1]],day: this.data.days[val[2]]})}
})

picker-view.json

{"navigationBarTitleText": "picker-view 组件"
}

picker-view.wxml

<view><view>{{year}}年{{month}}月{{day}}日</view><picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange"><picker-view-column><view wx:for="{{years}}" wx:key="*this" style="line-height: 50px">{{item}}年</view></picker-view-column><picker-view-column><view wx:for="{{months}}" wx:key="*this" style="line-height: 50px">{{item}}月</view></picker-view-column><picker-view-column><view wx:for="{{days}}" wx:key="*this" style="line-height: 50px">{{item}}日</view></picker-view-column></picker-view>
</view>

【Kevin Learn 小程序】--＞picker-view相关推荐

【Kevin Learn 小程序】--＞picker
效果图属性参考:picker 代码 app.js //app.js App({onLaunch: function () {console.log('App Launch')},onShow: f ...
【Kevin Learn 小程序】--＞ dialog
效果图实例 app.js //app.js App({onLaunch: function () {console.log('App Launch')},onShow: function () {c ...
【Kevin Learn 小程序】--＞List
效果图代码 app.js //app.js App({onLaunch: function () {console.log('App Launch')},onShow: function () {c ...
【Kevin Learn 小程序】--＞video
效果图属性参考:video 实例 app.js //app.js App({onLaunch: function () {console.log('App Launch')},onShow: fu ...
【Kevin Learn 小程序】--＞camera
效果图属性参考:camera 实例 app.js //app.js App({onLaunch: function () {console.log('App Launch')},onShow: f ...
小程序picker标题_微信小程序-自定义picker选择器
avatar 为什么要自定义picker 原生小程序picker不支持自定义样式,无联动. 该自定组件支持自定义数据支持自定义样式支持传入和返回对象或者基本类型支持联动(改变父列,子列根据关联 ...
小程序picker下拉框选择时间，只需要年和月
小程序picker下拉框选择时间,只需要年和月官方提供的组件可以选择到日我们现需要选择到月,只需要在代码里加上fields="month" <view class=&qu ...
微信小程序选择框问题小程序picker点击显示object range-key=这里写要显示的字段
微信小程序选择框问题小程序picker点击显示object range-key="这里写要显示的字段" <picker bindchange="bindClass ...
微信小程序把view居中_初识微信小程序
"晓程序" 小程序连载笔记,通俗易懂,欢迎各位转发关注学习.未经作者授权,禁止转载初识小程序什么是微信小程序微信小程序,小程序的一种,英文名Wechat Mini Progr ...

【Kevin Learn 小程序】--＞picker-view

效果图

属性

代码

【Kevin Learn 小程序】--＞picker-view相关推荐

最新文章

热门文章