1.wxml
<view class='yh_select flex flexSb'>
<view class='area flex alignC flexC'>
<view class='area_text'>
<picker class='' bindchange="areaPickerChange" value="{{areaIndex}}" range="{{areaArray}}">
<view class="picker {{areaIndex>=0?'on':''}}">
{{areaIndex>=0?areaArray[areaIndex]:"城市"}}
</view>
</picker>
</view>
<view class='area_sj'></view>
</view>
<view class='state flex alignC flexC'>
<view class='state_text'>
<picker class='' bindchange="statePickerChange" value="{{stateIndex}}" range="{{stateArray}}">
<view class="picker {{stateIndex>=0?'on':''}}">
{{stateIndex>=0?stateArray[stateIndex]:"类别"}}
</view>
</picker>
</view>
<view class='state_sj'></view>
</view>
</view>
2.wxss
.yh_select {
width: 400rpx;
margin: 0 auto;
}
.flexSb {
justify-content: space-between;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-o-justify-content: space-between;
}
.flex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
display: box;
flex-wrap: wrap;
}
.area, .state {
font-size: 28rpx;
color: #222;
text-align: left;
width: 140rpx;
height: 90rpx;
line-height: 90rpx;
}
.flexC {
-webkit-box-pack: center;
justify-content: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
}
.alignC {
align-items: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
}
.flex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
display: box;
flex-wrap: wrap;
}
.area_text, .state_text {
max-width: 112rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.area .picker, .state .picker {
max-width: 112rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.area_sj, .state_sj {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFBRjM4MTE4ODk2MTExRThBOUI4Q0ZCMjgyOUIxNEJCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjFBRjM4MTE5ODk2MTExRThBOUI4Q0ZCMjgyOUIxNEJCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MUFGMzgxMTY4OTYxMTFFOEE5QjhDRkIyODI5QjE0QkIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MUFGMzgxMTc4OTYxMTFFOEE5QjhDRkIyODI5QjE0QkIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6Y/3I7AAAAZElEQVR42mJcuHDhNAYGhkwG0sB0JiCRC8SbSNAEUpsL0vgXiCOB+CQRmk5C1f5lggp8A2JfIL6DR9MdqBqQWgYmJInXQOwJpdEBhhwTPlPxuYYJnz/w+Z8FX8hB5bGGOECAAQDsdhzUIfF/ewAAAABJRU5ErkJggg==);
width: 14rpx;
height: 8rpx;
background-repeat: no-repeat;
background-position: center;
background-size: 14rpx 8rpx;
margin-left: 10rpx;
}
.area .on, .state .on {
color: #ff8a00;
}
3.js
// 4/4.js
Page({
/**
* 页面的初始数据
*/
data: {
// 城市
areaArray: ['上海上海上海上海上海', '北京', '深圳', '成都'],
areaIndex: -1,
// 类别
stateArray: ['百货百货百货百货', '生鲜', '零食', '男装', '瓜果蔬菜瓜果蔬菜瓜果蔬菜'],
stateIndex: -1,
},
// 类别
statePickerChange: function (e) {
this.setData({
stateIndex: e.detail.value
})
},
// 城市
areaPickerChange: function(e) {
this.setData({
areaIndex: e.detail.value
})
},
})
4.效果
5.详情请参考(api文档)
https://developers.weixin.qq.com/miniprogram/dev/component/picker.html