小程序 - 弹窗

页面设计弹窗设计, 建议采用模式
1. 引入(js)
showPopup: function (e) {
	qp.showPopup(this, e);
},

2. 模块(wxml)
<view wx:if="{{showXxx}}" class="popup flex jc ac" bindtap="hidePopup" catchtouchmove="onNot"> // jc ac对应弹窗居中; 同理je居下
	<view class="popup-con popup-xxx" catchtap="onNot"> // popup-confirm, 对应确认弹窗
		<view class="h4 flex ac jc">提示</view>
		<scroll-view scroll-y>较多的内容</scroll-view>
		<view class="flex">
			<button class="fg" catchtap="hidePopup">取消</button>
			<button class="cf5 fg bold" data-xxx="{{携带的数据}}" catchtap="xxx">确定</button>
		</view>
	</view>
	</view>
</view>

3.1 显示(js)
this.showPopup('showXxx')

3.2 显示(wxml)
data-popup="showXxx" bindtap="showPopup"

4.1 隐藏(js)
this.hidePopup(); 或 this.hidePopup('showXxx');

4.2 隐藏(wxml)
bindtap="hidePopup" 或 catchtap="hidePopup" (catchtap在避免事件冒泡使用)

猜你喜欢

转载自blog.csdn.net/NaShiShiWo/article/details/88638537