微信小程序如何實(shí)現(xiàn)自定義picker選擇器彈窗內(nèi)容

這篇文章主要講解了微信小程序如何實(shí)現(xiàn)自定義picker選擇器彈窗內(nèi)容，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。

成都創(chuàng)新互聯(lián)公司公司2013年成立，先為達(dá)茂旗等服務(wù)建站，達(dá)茂旗等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為達(dá)茂旗企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

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

例如：

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

例如：

微信小程序如何實(shí)現(xiàn)自定義picker選擇器彈窗內(nèi)容

wxml

<view class="free-btns" >
 <button class="free-btn" bindtap="toggleDialog">
 選定國家：{{value}}
 </button>
 </view>

 <view class="free-dialog {{ showDialog &#63; 'free-dialog--show' : '' }}">
 <view class="free-dialog__mask" bindtap="toggleDialog" />
 <view class="free-dialog__container">
 <view >
 <form bindsubmit='submit' bindreset="reset">
 <view bindtap='freetoBack' class="free-button free-dialog-reset">取消</view>
 <view bindtap='freeBack' class="free-button free-dialog-submit">確定</view>

 <radio-group class='free-radios' bindchange="radioChange">
 <label class="free-radio" bindtap="click" wx:for="{{items}}" wx:key="{{items}}" data-id="{{index}}" >
 <radio value="{{item.name}}" name="{{item.value}}"></radio>
 <label class="free-text">{{item.value}}</label>
 </label>
 </radio-group>
 </form>

 </view>
 </view>
</view>

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;
}

Page({
 data: {
 showDialog: false,
 items: [
 { name: '中國', value: '中國' },
 { name: '美國', value: '美國' },
 { name: '巴西', value: '巴西' },
 { name: '日本', value: '日本' },
 { name: '英國', value: '英國' },
 { name: '法國', value: '法國' },
 { name: '韓國', value: '韓國' },
 { name: '俄羅斯', value: '俄羅斯' },]

 },
 /*點(diǎn)擊變色*/
 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)容，是不是對微信小程序如何實(shí)現(xiàn)自定義picker選擇器彈窗內(nèi)容有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文名稱：微信小程序如何實(shí)現(xiàn)自定義picker選擇器彈窗內(nèi)容
分享URL：http://chinadenli.net/article18/jhhhdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、App設(shè)計(jì)、用戶體驗(yàn)、企業(yè)網(wǎng)站制作、手機(jī)網(wǎng)站建設(shè)、小程序開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

微信小程序如何實(shí)現(xiàn)自定義picker選擇器彈窗內(nèi)容