游逗网,重度移动游戏垂直门户!

最新游戏|最新软件|游戏更新|电脑软件|电脑游戏|专题合集|合集排行
您当前位置:首页 > 资讯教程 > 软件教程 >  如何使用微信小程序的滚动选择器?

如何使用微信小程序的滚动选择器?

作者:淡昧发布时间:

  如何使用微信小程序的滚动选择器?想知道答案的小伙伴就赶紧看过来吧,下面就是小编给大家带来的方法。

  组件说明:

  picker:

  滚动选择器,现支持三种选择器,通过mode属性来区分,分别是普通选择器(mode = selector),时间选择器(mode = time),日期选择器(mode = date),默认是普通选择器。

  组件用法:

  wxml

  picker

  选择器

  地区选择器

  当前选择:{{array[index]}}

  时间选择器

  当前选择: {{time}}

  日期选择器

  当前选择: {{date}}

  复制代码

  js

  Page({

  data: {

  array: [\'中国\', \'美国\', \'巴西\', \'日本\'],

  index: 0,

  date: \'2016-09-01\',

  time: \'12:01\'

  },

  bindPickerChange: function(e) {

  console.log(\'picker发送选择改变,携带值为\', e.detail.value)

  this.setData({

  index: e.detail.value

  })

  },

  bindDateChange: function(e) {

  this.setData({

  date: e.detail.value

  })

  },

  bindTimeChange: function(e) {

  this.setData({

  time: e.detail.value

  })

  }

  })

  复制代码

  wxss

  .page {

  min-height: 100%;

  flex: 1;

  background-color: #FBF9FE;

  font-size: 32rpx;

  font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;

  overflow: hidden;

  }

  .page__hd{

  padding: 50rpx 50rpx 100rpx 50rpx;

  text-align: center;

  }

  .page__title{

  display: inline-block;

  padding: 20rpx 40rpx;

  font-size: 32rpx;

  color: #AAAAAA;

  border-bottom: 1px solid #CCCCCC;

  }

  .page__desc{

  display: none;

  margin-top: 20rpx;

  font-size: 26rpx;

  color: #BBBBBB;

  }

  .picker{

  padding: 26rpx;

  background-color: #FFFFFF;

  }

  .section{

  margin-bottom: 80rpx;

  }

  .section__title{

  margin-bottom: 16rpx;

  padding-left: 30rpx;

  padding-right: 30rpx;

  }

  复制代码

  以上就是如何使用微信小程序的滚动选择器的全部内容了,大家都学会了吗?

复制本文链接攻略文章为游逗网所有,未经允许不得转载。
系统教程更多
相关资讯更多
热门资讯更多
  1. 1如何在AutoCAD中选框选图形?在AutoCAD中选框选图形的方法
  2. 2QQ如何使用面对面快传?QQ使用面对面快传的方法
  3. 3怎么使用AutoCAD中的快速标注?
  4. 4如何在会声会影10中插入字幕?
  5. 5微信电脑版如何视频聊天?微信电脑版视频聊天的方法
  6. 6微信电脑版如何无限多开?微信电脑版无限多开的方法
  7. 7微信电脑版撤回消息的具体操作步骤介绍
  8. 8会声会影X7功能优势是什么?会声会影X7功能优势详解
火爆软件榜更多
精选资讯更多
热门专题全部>
热门分类全部>