点这儿查看代码片段

https://image.wxopen.club/content_d15cb0ec-4ccb-11ea-941d-001a7dda7111.png

WXML

<view class=“weui-cells page__font_14” bindtap=“showPicker” style="height: 42px; line-height: 40px; ">

<text style=“margin-left: 16px; height:100px;”>点击这儿打开</text>

</view>

<text style=“float:right; margin-right: 40px;”> 当前选中项： {{groupName}} 选择ID： {{groupIndex}}</text>

<!–分组弹出显示开始–>

<view class=“wrapper” hidden="{{showPicker}}">

<view class=“modelboxbg”></view>

<view class=“modelbox”>

<view class=“model_picker”>

<view class=“button_model”>

<text catchtap=“canslebtn”>取消</text>

<text catchtap=“closebtn”>确定</text>

</view>

<view class=“cont_model”>

<picker-view indicator-style=“height: 50px;” style=“width: 100%; height: 300px;” bindchange=“bindChange”>

<picker-view-column>

<view wx:for="{{groupArray}}" wx:key=“key” style=“line-height: 50px”>{{item}}</view>

</picker-view-column>

</picker-view>

</view>

</view>

</view>

</view>

<!–分组弹出显示结束–>

CSS

.intro {

margin: 30px;

text-align: center;

}

.button_model {

height: 80rpx;

width: 100%;

background: #fff;

position: relative;

border-bottom: 1px solid #d9d9d9;

}

.button_model text {

color: #000;

position: absolute;

background: transparent;

border: none;

line-height: 80rpx;

}

.button_model text:first-child {

left: 32rpx;

}

.button_model text:last-child {

right: 32rpx;

}

.indexFixed {

position: fixed;

width: 100%;

z-index: 99;

}

.modelboxbg {

position: absolute;

z-index: 9999;

width: 100%;

height: 100%;

background: #000;

opacity: 0.3;

}

.modelbox {

position: fixed;

bottom: 0;

width: 100%;

z-index: 999999;

background: #fff;

}

picker-view-column {

text-align: center;

}

view.model_picker {

position: relative;

}

.button_model {

height: 80rpx;

width: 100%;

background: #fff;

position: relative;

border-bottom: 1px solid #d9d9d9;

}

.button_model text {

color: #000;

position: absolute;

background: transparent;

border: none;

line-height: 80rpx;

}

.button_model text:first-child {

left: 32rpx;

}

.button_model text:last-child {

right: 32rpx;

}

JS

var app = getApp();

Page({

data: {

showPicker: true,

groupArray: [“全部”, “北京”, “上海”, “天津”, “福建”],

groupValue: [11, 22, 33, 44, 55],

groupTemp: 0,

groupIndex: 0,

groupName: “全部”

},

bindChange: function (e) {

this.setData({

groupTemp: e.detail.value[0],

})

},

canslebtn: function (e) {

this.setData({

showPicker: true

})

},

closebtn: function (e) {

var array = new Array();

array.push(this.data.groupArray[this.data.groupTemp])

array.push(this.data.groupValue[this.data.groupTemp])

console.log(array);

this.setData({

groupIndex: array[1],

groupName: array[0],

showPicker: true

})

},

showPicker: function (e) {

this.setData({

showPicker: false

})

}

})