微信小程序表单组件pickerview,pickerview嵌入页面的滚动选择器

发布时间：2023-07-22 13:59:19 作者：wovil 阅读量：5652

picker-view

嵌入页面的滚动选择器

属性名	类型	说明	最低版本
value	NumberArray	数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。
indicator-style	String	设置选择器中间选中框的样式
indicator-class	String	设置选择器中间选中框的类名	1.1.0
bindchange	EventHandle	当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）

注意：其中只可放置<picker-view-column/>组件，其他节点不会显示。

picker-view-column

仅可放置于<picker-view />中，其孩子节点的高度会自动设置成与picker-view的选中框的高度一致。

示例代码：

<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}}" style="line-height: 50px">{{item}}年</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
    </picker-view-column>
  </picker-view>
</view>

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: [9999, 1, 1],
  },
  bindChange: function(e) {
    const val = e.detail.value
    this.setData({
      year: this.data.years[val[0]],
      month: this.data.months[val[1]],
      day: this.data.days[val[2]]
    })
  }
})

更多微信小程序开发教程，可以关注多程序。

上一篇：微信小程序框架视图层(View),MINA的视图层由WXML与WXSS编写

下一篇：小程序用什么语言开发,WXML具有什么能力

***本网站图片，文字之类版权申明，因为网站可以由注册用户自行上传图片或文字，本网站无法鉴别所上传图片或文字的知识版权，如果侵犯，请及时通知我们，本网站将在第一时间及时删除。

我要评论

网友评论

评论时间：2024-04-24 13:00:03

你只需通过移动设备将应用安装到i Phone或i Pad中游戏app制作开发能自学吗即可手机app制作的视频 one或i Pad中即可

评论时间：2024-03-10 10:54:01

，希望能帮助到大家！1.如何创建一个应用程序？2.什么时候需要添加和删除组件？3.怎样进行一些设置和管理这些组件？4.为如何将手机网站封装成app 什么要建立自己的网站呢？5.如果不想要这个网站的话，可以选择关闭它吗？6.为什么我们不能直接从网络上下载软件呢？7.如何安装和卸载程序呢？8.如何将手机或其他移动设备与服务器连接起来？9.如何通过浏览器访问网页、浏览新闻等信息呢？10.如何打开一个页面并显示该页面内容呢？11.如何处理图片文件？12.如何保存照片或者视频资料呢？13.如何对数据库数据进行维护呢？14.如何获取和分析用户行为呢？15.如何实现自动更新系统功能呢？16.如何查看当前版本的文档呢？17.如何修改注册表呢？18.如何更改系统配置参数呢app开发预算价格表？17.如何修改注册表呢？18.如何更改系统配置参数呢