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


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

 

剛開始用的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 中注冊.便可以實現點擊其他地方也可以隱藏彈窗了.
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM