备注:小程序弹出层组件开发()
index.js
// common/pop/pop.js Component({ options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, /** * 组件的属性列表 */ properties: { autoHide:{ // 属性名 type: String, value: '' }, title: { // 属性名 type: String, value: '' }, popOpt:{ type:Object, value:{ titleStyle:'', leftFlag:true, leftStyle:'', rightFlag:true, rightStyle:'' }, observer: function(newVal, oldVal) { // 属性值变化时执行 this.data.popOpt = { ...oldVal, ...newVal } this.setData({ popOpt:this.data.popOpt }) // console.log(this.data.popOpt) } }, content: { // 属性名 type: String, value: '' }, lText: { // 左侧按钮text type: String, value: '取消' }, rText: { // 右侧按钮text type: String, value: '确认' }, confirm:{//确认回调 type: Function, value: function(){} }, cancel:{//取消回调 type: Function, value: function(){} } }, /** * 组件的初始数据 */ data: { isShow:true }, pageLifetimes: { // 组件所在页面的生命周期函数 show: function () { }, hide: function () { }, resize: function () { }, }, /** * 组件的方法列表 */ methods: { stop:function(){}, show:function(){ this.setData({ isShow:false }) }, hide:function(){ this.setData({ isShow:true }) }, lClick:function(){ //this.properties.cancel(); this.hide(); }, rClick:function(){ //this.properties.confirm(); this.triggerEvent('confirm') if( this.properties.autoHide==""){ this.hide(); } } } })
index.json
{ "component": true, "usingComponents": {} }
<!--common/pop/pop.wxml--> <view class="common-pop" hidden="{{isShow}}" catchtouchmove="stop" > <!-- <view class="bgbg" catchtouchmove="stop" ></view> --> <view class="common-pop-center"> <view class="common-pop-body"> <slot name="top"></slot> <view class="common-pop-title" wx:if="{{title}}" style="{{popOpt.titleStyle}}">{{title}}</view> <view class="common-pop-content">{{content}}</view> <slot name="bottom"></slot> </view> <view class="common-pop-btn"> <view class="common-pop-l-btn" wx:if="{{popOpt.leftFlag}}" style="{{popOpt.leftStyle}}" bindtap="lClick">{{lText}}</view> <view class="common-pop-r-btn" wx:if="{{popOpt.rightFlag}}" style="{{popOpt.rightStyle}}" bindtap="rClick">{{rText}}</view> <slot name="btn"></slot> </view> </view> </view>
index.wxss
/* common/pop/pop.wxss */ .common-pop{ position: relative; left: 0; top: 0; position: fixed; width: 100%; height: 100%; z-index: 9999; background-color: rgba(0,0,0,0.4); } .bgbg{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .common-pop-center{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 640rpx; border-radius: 16rpx; background-color: #fff; } .common-pop-btn{ border-top: 1px solid #F5F7FA; display: flex; } .common-pop-body{ padding: 40rpx 30rpx; } .common-pop-title{ margin-top: 10rpx; margin-bottom: 50rpx; text-align: center; color:#666; font-size: 28rpx; font-weight: normal; } .common-pop-content{ color:#666666; font-size: 28rpx; } .common-pop-l-btn,.common-pop-r-btn{ flex: 1; height: 120rpx; text-align: center; line-height: 120rpx; } .common-pop-l-btn{ font-size: 32rpx; color: #000; border-right: 1px solid #F5F7FA; } .common-pop-r-btn{ font-size: 32rpx; font-weight: bold; color: #FE4561; flex: 1; } .common-pop-bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
在需要使用的页面json文件引入
{ "usingComponents": { "my-pop": "/pages/components/pop/pop" } }
在需要使用的页面wxml文件引入(这里有插槽的使用)
<my-pop id="checkpop" content="" popOpt="{{popOpt}}" title="作品提交状态说明" rText="我知道了" bindconfirm="delConfirm" > <view slot="bottom" class="checkPopCount"> <view class="zheDang"></view> <scroll-view scroll-y="true" class="checkPop_scroll"> <view class="checkPop_item">1. 请确保你在美图秀秀APP发布作品的账号和绑定的美图ID是同一个。</view> <view class="checkPop_item">2. 发布作品最后一步需要添加指定话题标签。</view> <view class="checkPop_item"> 3. 如果你的操作不满足以上两点,可直接进入美图秀秀APP按照注意事项重新发布作品。</view> <view class="checkPop_item"> 4. 如果你的操作满足以上两点,并且在美图秀秀APP发布作品后的5分钟仍没有显示提交成功状态,可能与美图秀秀APP的审核机制有关,请继续等待,3小时内会返回最终结果。</view> </scroll-view> </view> </my-pop>
在相应的js文件中根据 id 初始化
this.checkpop = this.selectComponent("#checkpop");
初始化过后 根据自己自定义的方法进行调用
this.checkpop.show()