qqq.gif
还是老样子，废话不多说，直接上代码
862BAB5D-B974-4884-93C0-5EB1E45BFA84.png
在popView.json声明自定义组件，"component": true
{
"component": true,
"usingComponents": {}
}
在popView.wxml进行基本布局
- 1、
wx:if="{{canShow}}"是否显示popView - 2、
catchtouchmove="move"禁止底部视图滚动 - 3、
<slot></slot>这个就是占个坑，具体布局就让外面的人喜欢怎么弄就怎么弄了
<view wx:if="{{canShow}}" class= 'popV' catchtouchmove="move">
<view class='popV-mask' bindtap="selectMask"></view>
<view class='popV-content'>
<slot></slot>
<view class='popV-content-btm'>
<view class='popV-content-btm-left' hover-class='popV-hover' catchtap='selectLeft'>{{leftText}}</view>
<view class='popV-content-btm-colLine'></view>
<view class='popV-content-btm-right' hover-class='popV-hover' catchtap="selectRight">{{rightText}}</view>
</view>
</view>
</view>
.popV {
display: flex;
justify-content: center;
}
.popV-mask {
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
display: block;
position: fixed;
z-index: 1000;
}
.popV-content{
top: 268rpx;
width: 560rpx;
background: white;
border-radius: 10rpx;
display: flex;
position: fixed;
z-index: 1001;
flex-direction: column;
overflow: hidden;
}
/* 底部 */
.popV-content-btm {
height: 100rpx;
width: 100%;
left: 0;
bottom: 0;
display: flex;
flex-direction: row;
align-items: center;
border-top-width: 1rpx;
border-top-style: solid;
border-top-color: #E1E1E1;
}
.popV-content-btm-left {
flex: 1;
font-size: 36rpx;
color: #888888;
text-align: center;
line-height: 100rpx;
font-family: PingFang-SC-Medium;
}
.popV-hover {
background: #DDD;
}
.popV-content-btm-right {
flex: 1;
font-size: 36rpx;
color: #0087FF;
text-align: center;
line-height: 100rpx;
font-family: PingFang-SC-Medium;
}
.popV-content-btm-colLine {
height: 100rpx;
width: 1px;
background-color: #E1E1E1;
}
在popView.js进行数据方法处理
- 1、
multipleSlots: true这个是开启多slot支持，我们现在没用到先注释掉也可以 - 2、
properties属性配置，想要配置什么就配置什么，这里我就只做了3个属性配置，分别是canShow：是否显示popView。leftText：左边按钮文案。rightText：右边按钮文案 - 3、
triggerEvent这个用来给父组件传递信息的，具体解释下面代码有说明
Component({
options: {
multipleSlots: true // 开启多slot支持
},
behaviors: [],
// 属性
properties: {
canShow: {
type: Boolean,
value: false,
},
leftText: {
type: String,
value: "左边"
},
rightText: {
type: String,
value: "右边"
}
},
// 初始化数据
data: {
// showCoupon: true
}, // 私有数据，可用于模版渲染
lifetimes: {
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { },
moved: function () { },
detached: function () { },
},
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
ready: function () { },
pageLifetimes: {
// 组件所在页面的生命周期函数
show: function () { },
},
methods: {
// 需要使用到this.triggerEvent(' ',{},{}),第一个参数是自定义事件名称，这个名称是在页面调用组件时bind的名称，第二个对象就可以将想要的属性拿到，第三个参数文档中有介绍
selectMask: function (e) {
this.setData({
canShow: !this.data.canShow
});
// let yesOrNo = this.data.canShow;
// this.triggerEvent('mask', {
// behavior: yesOrNo
// }, {})
},
selectLeft: function () {
this.triggerEvent('left', this.data.canShow);
},
selectRight: function () {
this.triggerEvent('right', this.data.canShow);
},
move: function () {
return;
}
}
})
如何使用
在index.json导入我们的组件
{
"usingComponents": {
"popView": "/components/popView/popView"
}
}
在index.wxml布局我们的组件其他内容
- 1、这里
<popView canShow="{{isShowPopView}}" leftText="取消" rightText="确定" bindleft="selectLeft" bindright="selectRight">的canShow、leftText、rightText就是我们在组件定义的属性，bindleft、bindright这个两个就是我们在组件通过triggerEvent给现在的父组件传递的事件名
<view class="container">
<view class="userinfo" bindtap="didClick">
<text>点我</text>
</view>
<view class="tempCnt1">我是来占位置的1</view>
<view class="tempCnt2">我是来占位置的2</view>
<view class="tempCnt3">我是来占位置的3</view>
<view class="tempCnt4">我是来占位置的4</view>
<view class="tempCnt5">我是来占位置的5</view>
</view>
<!-- 自定义弹框 -->
<popView canShow="{{isShowPopView}}" leftText="取消" rightText="确定" bindleft="selectLeft" bindright="selectRight">
<view class="popV-cntV">
<text class="popV-cntV-title">我是标题</text>
<text class="popV-cntV-desc">我是详情说明,我是详情说明,我是详情说明,我是详情说明,我是详情说明,我是详情说明,</text>
</view>
</popView>
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
width: 200rpx;
height: 200rpx;
background-color: red;
}
.tempCnt1 {
background-color: yellow;
display: flex;
height: 300rpx;
width: 100%;
}
.tempCnt2 {
background-color: rebeccapurple;
display: flex;
height: 300rpx;
width: 100%;
}
.tempCnt3 {
background-color: gray;
display: flex;
height: 300rpx;
width: 100%;
}
.tempCnt4 {
background-color: green;
display: flex;
height: 300rpx;
width: 100%;
}
.tempCnt5 {
background-color: blue;
display: flex;
height: 300rpx;
width: 100%;
}
/* 弹框内容布局 */
.popV-cntV {
display: flex;
flex-direction: column;
align-items: center;
}
.popV-cntV-title {
font-size: 34rpx;
color: #000000;
font-family: PingFangSC-Regular;
margin-top: 20rpx;
}
.popV-cntV-desc {
font-size: 28rpx;
color: #000000;
font-family: PingFang-SC-Medium;
margin: 20rpx;
}
在index.js进行组件的显示隐藏等操作
//获取应用实例
const app = getApp()
Page({
data: {
isShowPopView: false // 是否显示弹框
},
//事件处理函数
didClick: function() {
this.setData({
isShowPopView:true
})
console.log('点我吧' + this.data.isShowPopView)
},
/**
* 弹框事件
* */
selectLeft: function () {
console.log('点击左边')
this.setData({
isShowPopView: !this.data.isShowPopView
});
},
selectRight: function () {
console.log('点击右边')
this.setData({
isShowPopView: !this.data.isShowPopView
});
},
})
