微信小程序中定义好的几种picker选择器，不管是日期选择器还是地区选择器，或是其他的都有定死的样式和内容。

例如：

但是大多数开发程序的情况下还是需要自己写样式的，或是内容的。

例如：

wxml

选定国家：{{value}}

取消

确定

{{item.value}}

css

.free-dialog__mask {

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

z-index: 10;

background: rgba(0, 0, 0, 0.7);

display: none;

}

.free-dialog__container {

position: fixed;

left: 0;

bottom: 0;

width: 750rpx;

background: white;

transform: translateY(150%);

transition: all 0.4s ease;

z-index: 11;

}

.free-dialog--show .free-dialog__container {

transform: translateY(0);

}

.free-dialog--show .free-dialog__mask {

display: block;

}

/*模态框中的内容*/

.free-button{

display: inline-block;

width:50px;

text-align: center;

font-size:20px;

color:#707070;

margin-bottom:20px;

}

.free-dialog-submit{

float: right;

color:#48c23d;

}

radio-group{

margin:10rpx 0rpx;

}

radio-group>label{

width:22.5%;

display: inline-block;

border:1px solid #ddd;

padding:10px 0px;

margin:0px 2px 2px;

}

radio-group label radio{

width:100%;

z-index: 3;

display: none;

}

.checked{

background:#48c23d;

color:#fff;

}

radio-group label .free-text{

width:100%;

text-align: center;

display: inline-block;

}

js

Page({

data: {

showDialog: false,

items: [

{ name: '中国', value: '中国' },

{ name: '美国', value: '美国' },

{ name: '巴西', value: '巴西' },

{ name: '日本', value: '日本' },

{ name: '英国', value: '英国' },

{ name: '法国', value: '法国' },

{ name: '韩国', value: '韩国' },

{ name: '俄罗斯', value: '俄罗斯' },]

},

/*点击变色*/

click:function(e){

var id = e.currentTarget.dataset.id

var that = this

that.setData({

id:id

})

},

onLoad: function (options) {

var that = this

that.setData({

value:'show'

})

},

radioChange: function (e) {

console.log('radio发生change事件，携带value值为：', e.detail.value)

var that = this

that.setData({

value: e.detail.value

})

console.log(this.data.value)

},

toggleDialog() {

this.setData({

showDialog: !this.data.showDialog

});

},

freeBack:function(){

var that = this

if(this.data.value=='show'){

wx.showModal({

title: '提示',

content: '你没有选择任何内容',

})

}

that.setData({

showDialog: !this.data.showDialog

})

},

freetoBack: function () {

var that = this

wx.showModal({

title: '提示',

content: '你没有选择任何内容',

})

that.setData({

showDialog: !this.data.showDialog,

value:'show',

checked: false,

})

},

})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。