代码拉取完成,页面将自动刷新
宽高度自适应
git clone https://gitee.com/CodingError/pop-up.git
或者 直接下载复制在自己项目里面
{ "usingComponents": { "pop-up":"/components/pop-up/pop-up" } }
参数 | 必传 | 作用 |
---|---|---|
ststus | 是 | 控制组件是否显示 |
showType | 是 | 弹框触发的位置 |
使用 侧边栏的时候要要设置高度:height:100%;
index
<view class="item_wrap">
<view class="item" data-type="top" bindtap="handleTypeClick">顶部</view>
<view class="item" data-type="bottom" bindtap="handleTypeClick">底部</view>
<view class="item" data-type="left" bindtap="handleTypeClick">左边</view>
<view class="item" data-type="right" bindtap="handleTypeClick">右边</view>
<view class="item" data-type="cenent" bindtap="handleTypeClick">中间</view>
</view>
<pop-up ststus="{{ststus}}" showType="{{showType}}" bindonCancel="handleCancle">
<!-- 底部 顶部 -->
<view class="bottom_top_wrap" wx:if="{{showType == 'top' || showType == 'bottom'}}">
<view class="btn_wrap">
<view class="left_btn" bindtap="handleCancle">取消</view>
<view class="right_btn" bindtap="handleCancle">确认</view>
</view>
<view wx:for="{{5}}" wx:key="index">底部 顶部</view>
</view>
<!-- 左边 右边 -->
<view class="left_right_wrap" wx:if="{{showType == 'left' || showType == 'right'}}">
<view class="btn_wrap">
<view class="left_btn" bindtap="handleCancle">取消</view>
<view class="right_btn" bindtap="handleCancle">确认</view>
</view>
<view wx:for="{{5}}" wx:key="index">左边 右边</view>
</view>
<!-- 中间 -->
<view class="cenent_wrap" wx:if="{{showType == 'cenent'}}">
<view class="btn_wrap">
<view class="left_btn" bindtap="handleCancle">取消</view>
<view class="right_btn" bindtap="handleCancle">确认</view>
</view>
<view wx:for="{{5}}" wx:key="index">左边 右边</view>
</view>
</pop-up>
js
Page({
data: {
showType: "bottom",
ststus: false,
},
handleTypeClick(e) {
let type = e.currentTarget.dataset.type
if (type == "top") {
this.setData({
ststus: true,
showType: "top"
})
} else if (type == "bottom") {
this.setData({
ststus: true,
showType: "bottom"
})
} else if (type == "left") {
this.setData({
ststus: true,
showType: "left"
})
} else if (type == "right") {
this.setData({
ststus: true,
showType: "right"
})
} else if (type == "cenent") {
this.setData({
ststus: true,
showType: "cenent"
})
}
},
handleCancle() {
this.setData({
ststus: false,
})
}
})
css
.item_wrap {
display: flex;
justify-content: space-around;
text-align: center;
margin-top: 60%;
}
.item_wrap .item {
width: 80rpx;
height: 80rpx;
line-height: 80rpx;
border: 1rpx solid #eee;
}
.bottom_top_wrap {
width: 100%;
}
.left_right_wrap {
height: 100%;
}
.cenent_wrap {
width: 500rpx;
height: 500rpx;
}
.btn_wrap {
display: flex;
justify-content: space-between;
width: 100%;
height: 80rpx;
line-height: 80rpx;
border-bottom: 1rpx solid #eee;
}
.btn_wrap .left_btn {
color: #5d5c5c;
margin-left: 30px;
}
.btn_wrap .right_btn {
color: #57bd6a;
margin-right: 30rpx;
}
顶部
底部
左侧
右侧
中间
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。