小程序中会用到弹窗. 我在时间选择这快便用到了自定义弹窗,用来显示起始时间和结束时间.
刚开始用的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 中注册.便可以实现点击其他地方也可以隐藏弹窗了.
请发表评论