小程序中选择器picker使用

wxml:

<view class="section_sex" >

<image class='star-icon name-star-icon' src='../../image/star.jpg'></image>

<view class="section__title">性别</view>

<picker class="picker_sex_wrap" bindchange="choosesex" value="{{sexindex}}" range="{{sexarr}}">

<view class="picker_sex">

<input type='text' name="sex" style='width:30%;padding-left:0;line-height:90rpx;' placeholder='请选择性别' value="{{sexarr[sexindex]}}"></input>

</view>

</picker>

<text class='iconfont icon-yzzp-39'></text>

</view>

js:

data{

sexarr:['男','女',],

sexobjectArray: [

{id: 0,name: '男'},

{id: 1,name: '女'},

],

sexindex:""

}

wcss:

.section_sex{

position: relative;

width: 100%;

height: 98rpx;

}

.section_sex>.section__title{

position: absolute;

top: 0rpx;

left: 22rpx;

color: #666;

line-height: 90rpx;

}

.section_sex>.picker_sex_wrap{

position: absolute;

top: 23rpx;

left: 142rpx;

line-height: 90rpx;

width: 100%;

color:#333;

}

.section_sex>.iconfont{

position: absolute;

right: 0rpx;

top: 20rpx;

color: #ccc

}

效果:

猜你喜欢

转载自blog.csdn.net/qq_42329594/article/details/84759739