微信小程序> 小程序picker组件怎么用

小程序picker组件怎么用

浏览量:5187 时间: 来源:铁锅,接住
我刚学小程序的时候上拉选择框老是会忘掉,所以今天就写一下文章可以方便记忆,下次就不用老是去搜了,大家也可以一起
看。
wxml代码:
普通组件:
pickerclass='form-input'mode="selector"range='{{sexArray}}'value='{{sexIndex}}'bindchange='sexChange'
{{sexIndex!="请选择"?sexArray[sexIndex]:"请选择"}}
/picker
日期组件:
pickerclass='form-input'mode="date"start="1820-01-01"end="9999-01-01"bindchange='DateChange'
{{userDate}}
/picker

js代码:
/
页面的初始数据
/
data:{
sexIndex:'请选择',
sexArray:["男","女"],
userDate:"请选择",
},
/
性别选择
/
sexChange:function(e){
letthas=this;
thas.setData({
sexIndex:e.detail.value
});
},
/
日期选择
/
DateChange:function(e){
letthas=this;
thas.setData({
userDate:e.detail.value
});
css:
.form-item{display:flex;padding:10rpx0;line-height:2rem;border-bottom:solid1px#ECABA6;}
.form-item.form-label{flex:1%;max-width:5rem;}
.form-item.form-input{flex:1%;display:inline-block;height:2rem;line-height:2rem;}
.form-imageimage{min-height:841rpx;height:841rpx;display:block;}
.submit-box{position:fixed;bottom:0;left:0;right:0;}
.submit-box.submit{border-radius:0;color:#fff;background:#DB6461;height:80rpx;line-height:80rpx;text-align:center;}
效果图:

文章灵感来自:

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎