小程序-怎樣去自定義彈窗(只能點擊肯定隱藏彈窗,以及能夠點擊其餘地方隱藏彈窗)

小程序中會用到彈窗. 我在時間選擇這快便用到了自定義彈窗,用來顯示起始時間和結束時間.

 

剛開始用的model

<modal class="timeModal" confirm-text="肯定" cancel-text="取消" hidden="{{modalHidden}}" bindconfirm="modalChange" bindcancel="modalChange">

　　<view class="drawer_content">

　　<view class="weui-cells">

　　　　<picker mode="date" start="2017-1-1" end="2018-9-10" value="{{date}}" fields="month" bindchange="bindDateStartChange">

　　　　<text space='nbsp'> 開始時間 {{dateStart}}>></text>

　　　　</picker>

　　</view>

　　<view class="weui-cells">

　　　　<picker mode="date" start="2017-1-1" end="2018-9-10" value="{{date}}" fields="month" bindchange="bindDateEndChange">

　　　　<text space='nbsp'> 結束時間 {{dateEnd}}>></text>

　　　　</picker>

　　</view>

　　</view>

</modal>

 

用事件去控制顯示

modalChange(e) {

　　this.modalHidden= true

},

 

後來以爲這種方式很差看,因而還要用自定義彈窗

 

<view class="weui-cells timePicker" hidden="{{timeBoxHidden}}" style="height:240rpx;">

　　<view class="weui-cell" style="">

　　　　<picker mode="date" value="{{dateStart}}" end="{{dateEnd}}" bindchange="bindDateStartChange">

　　　　<text space='nbsp'> 開始時間 {{dateStart}} > </text>

　　　　</picker>

　　</view>

　　<view class="weui-cell" style="height:70rpx;">

　　　　<picker mode="date" value="{{dateEnd}}" start="{{dateStart}}" end="2018-10-10" bindchange="bindDateEndChange">

　　　　<text space='nbsp'> 結束時間 {{dateEnd}} > </text>

　　　　</picker>

　　</view>

　　<view class="weui-cell" style="">

　　　　<button class="weui-btn weui-btn_primary" bindtap="cancelTime">重置</button>

　　　　<button class="weui-btn weui-btn_primaryTwo" bindtap="sureTime" >肯定</button>

　　</view>

</view>

JS中去定義重置和肯定事件

sureTime(e) {

　　this.timeBoxHidden = true

}

 

cancelTime () {

　　this.dateStart ='2018-09-10'

　　this.dateEnd ='2018-09-12'

},

 

還能夠從時間段中篩選數據(如我上一篇)

 

可是這個只能是,點擊肯定時隱藏彈窗,因產品要求,點擊其餘地方也要隱藏.

 

因此須要在大的做用域中去觸發點擊事件.

 

而我則是在 scroll-view 中註冊.即可以實現點擊其餘地方也能夠隱藏彈窗了.