微信小程序中定義好的幾種picker選擇器，不管是日期選擇器還是地區(qū)選擇器，或是其他的都有定死的樣式和內(nèi)容。

例如：

但是大多數(shù)開發(fā)程序的情況下還是需要自己寫樣式的，或是內(nèi)容的。

例如：

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;

}

/*模態(tài)框中的內(nèi)容*/

.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發(fā)生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: '你沒有選擇任何內(nèi)容',

})

}

that.setData({

showDialog: !this.data.showDialog

})

},

freetoBack: function () {

var that = this

wx.showModal({

title: '提示',

content: '你沒有選擇任何內(nèi)容',

})

that.setData({

showDialog: !this.data.showDialog,

value:'show',

checked: false,

})

},

})

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

總結(jié)

以上是生活随笔為你收集整理的小程序picker标题_微信小程序实现自定义picker选择器弹窗内容的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。