• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

微信小程序的picker-view

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
<view>{{pickviewname}}</view>

<picker-view style='width:100%;height:250px;' bindchange='changeme'>
  <picker-view-column>
    <view wx:for="{{year}}">
    {{item}}
    </view>
  </picker-view-column>

  <picker-view-column>
    <view wx:for="{{month}}">
    {{item}}
    </view>
  </picker-view-column>

  <picker-view-column>
    <view wx:for="{{day}}">
    {{item}}
    </view>
  </picker-view-column>

</picker-view>

<view>{{myvalue}}</view>

这个是wxml界面。

Page({

  /**
   * 页面的初始数据
   */
  data: {
    pickviewname:"pick-view组件",
    year:[1990,1995,2000,2005,2010,2015,2020],
    month:[1,2,3,4,5,6,7,8,9,10,11,12],
    day:[1,5,10,15,20,25,30],
    myvalue:"please select the date"
  },
  changeme:function(e){
    var indexs = e.detail.value;

    var year = this.data.year[indexs[0]];
    var month = this.data.month[indexs[1]];
    var day = this.data.day[indexs[2]];
    this.setData({
      myvalue: year+""+month+""+day+""
    })
  }
})

这个是js

这个组件要配合

picker-view-column来使用。

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
.NetCore使用SkiaSharp绘制小程序分享图发布时间:2022-07-18
下一篇:
微信小程序的bindtap事件发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap