微信小程序 选择年和月以及回显 使用picker-view组件

这篇具有很好参考价值的文章主要介绍了微信小程序 选择年和月以及回显 使用picker-view组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

<!--选择年月-->
  <view bindtap="pickCalendar">{{year}}年{{month}}月</view>
  <picker-view wx:if="{{open}}" class="fixed-select" indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{[year, month-1]}}" bindchange="bindChange">
    <view class="select-head">
      <view class="close" bindtap="closeSelect">取消</view>
      <view class="close sure" bindtap="sureSelect">确定</view>
    </view>
    <picker-view-column>
      <view wx:for="{{years}}" wx:key="this" class="picker-list">{{item}}年</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{months}}" wx:key="this" class="picker-list">{{item}}月</view>
    </picker-view-column>    
  </picker-view>
/*选择年月-start*/
const date = new Date()
const years = []
const months = []
for (let i = 1900; i <= date.getFullYear(); i++) {
  years.push(i)
}
for (let i = 1; i <= 12; i++) {
  months.push(i)
}
/*选择年月-end*/
Page({
  data: {
    /*选择日期-start*/
    years,
    months,
    year: date.getFullYear(), //年份
    month: date.getMonth() + 1, //几月
    value: [9999, 0, 0], // 获取年月份
    open: false,
    checkedYear: '',//选中的年份 最后赋值用
    checkedMonth: '',//选中的月份 最后赋值用
    /*选择日期-end*/
  },

  /*其它代码*/
  /*月份选择器-start*/  
  pickCalendar(){
    console.log(this.data.month)
    this.setData({
      open: true
    })
  },
  
  //确定选择
  sureSelect(){
    this.setData({
      // val 上面定义了 接收的是e里面的值 为数组 
      year: this.data.checkedYear || this.data.year,
      month: this.data.checkedMonth || this.data.month,
      open: false
    }) 
  },

  // 取消选择 
  closeSelect() {
    this.setData({
      open: false
    })
  },

  // 日期改变
  bindChange(e) {
    const val = e.detail.value
    this.setData({
      // val 上面定义了 接收的是e里面的值 为数组 
      checkedYear: this.data.years[val[0]],
      checkedMonth: this.data.months[val[1]],
    })    
  },
  /*月份选择器-end*/
})  
/*选择月份-start*/
.fixed-select {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  height: 350rpx;
  background-color: #fff;    
  border-top: 2px solid #e9e9ea;
}

.fixed-select .select-head {
  position: absolute;
  top: 0;
  z-index: 111;  
  display: flex;  
  justify-content: space-between;
  width: 100%;
  line-height: 60rpx;
  background-color: #eee;
}

.fixed-select .select-head .close {
  padding: 10rpx 20rpx;
}

.fixed-select .select-head .sure {
  color: #ffb81c;
}
.picker-list{line-height: 50px; text-align: center;}
/*选择月份-end*/

自己记录用的 可以作为参考文章来源地址https://www.toymoban.com/news/detail-623110.html

到了这里,关于微信小程序 选择年和月以及回显 使用picker-view组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 在微信小程序使用picker实现日期选择

    而且选择开始时间后,选择结束时间,能够选择的日期不能比开始日期还要早。要实现以上效果可这样写: 在wxml中写

    2024年02月16日
    浏览(63)
  • 微信小程序picker组件–省市二级联动及其回显

    1. 在wxml文件中添加picker组件 2. 在js文件中定义region变量,并在onLoad函数中初始化 3. 在onLoad函数中获取用户已选择的省市区信息,并将其赋值给region变量 )

    2024年02月08日
    浏览(39)
  • 微信小程序picker表单选择器的使用

    微信小程序picker表单选择器的使用 微信小程序picker表单选择器的使用 bindchange:当选择项改变时触发的方法 range:选项数组可以是二维数组 range-key:如果是二维数组时,用此属性指定第二维数组的键以达到在选择项中显示这个键对应的键值 value:是当前值是当前选中的数组的索

    2024年02月16日
    浏览(50)
  • 解决微信小程序上传图片不能回显的问题

    首先要保证后台采用根据系统自动识别的方法返回地址分隔符 (File.separator) 按上述所说,后台根据系统自动识别,那么Linux系统将不会出现问题,返回的类型皆是 (/pic/123) 正确的。 而windows返回的则是 单个 此时到小程序前台则会被认为是转义符 所以导致地址拼接错误

    2024年02月09日
    浏览(52)
  • uniapp 微信小程序 Picker下拉列表数据回显问题

    效果图: 1、template 2、data 3、methods

    2024年02月16日
    浏览(41)
  • 微信小程序--下拉选择框组件封装,可CV直接使用

            接到的项目需求,查看ui设计图后,由于微信小程序官方设计的下拉选择框不符合需求,而且常用的第三方库也没有封装类似的,所以选择自己自定义组件。在此记录一下,方便日后复用。         ui设计图如下:                   微信官方提供的选择框         对比发现

    2024年02月05日
    浏览(48)
  • 微信小程序:chooseimage从本地相册选择图片或使用相机拍照

    文档 https://uniapp.dcloud.net.cn/api/media/image.html#chooseimage https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html 代码示例

    2024年02月04日
    浏览(94)
  • 微信小程序使用vant时间选择器二次封装成自定义区间时间选择

    目录 1.引入vant组件库 2.wxml页面 3.js页面 1.安装vant # 通过 npm 安装 npm i @vant/weapp -S --production # 通过 yarn 安装 yarn add @vant/weapp --production # 安装 0.x 版本 npm i vant-weapp -S --production 2.将 app.json 中的  \\\"style\\\": \\\"v2\\\"  去除 3.在  project.config.json 里面的 \\\"setting\\\":{ } 里面添加下面的代码 4.构建

    2024年02月17日
    浏览(51)
  • 【uniapp&微信小程序】跨平台使用echarts的方案选择&踩坑

    使用Uniapp(vue)开发微信小程序,想用echarts图表实现类似github热力图的效果。 简要列一些可行或不可行的方案。 有echarts官网提供的跨平台方案:在微信小程序中使用 ECharts 简单易用,图表齐全 renderjs-echarts-demo 可参考的使用总结 render.js+echarts echarts图表在移动端的应用 支持

    2024年02月13日
    浏览(111)
  • 【微信小程序】使用iView组件库的ActionSheet组件实现底部选择功能

    要在微信小程序中使用iView组件库的ActionSheet组件,可以按照以下步骤进行: 首先,确保已经引入了iView组件库的样式和脚本文件。可以在app.wxss中引入iView的样式文件: 同时,在页面的js文件中引入iView的脚本文件: 在需要使用ActionSheet的页面中,可以在wxml文件中添加一个触

    2024年02月16日
    浏览(80)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包