微信小程序实现自定义弹窗组件的示例代码

网友投稿 1261 2023-11-09

−目录编写组件代码Dialog.wxmlDialog.jsDialog.wxss调用自定义组件

上一篇中说的是小程序自带的弹窗组件，今天，我们来试试小程序的自定义组件，我们自定义一个带确定取消的弹窗组件。

微信小程序实现自定义弹窗组件的示例代码

首先，放一下，最终的效果图：

这是我们最后要实现的效果

那么，首先，我们创建一个组件

新建component文件夹存放我们的组件，里边存放的就是我们所用的组件，我们今天要做的事弹出框，新建文件夹popup存放我们的组件模板，点击右键选择新建component，就会自动生成组件的模板wxss、wxml、json、js，如图

剩下的，就是不废话了，上代码：

编写组件代码

Dialog.wxml

?
1
2
3
4
5
6
7
8
9
10
<view class="wx-popup" hidden="{{flag}}">
<view class=popup-container>
<view class="wx-popup-title">{{title}}</view>
<view class="wx-popup-con">{{content}}</view>
<view class="wx-popup-btn">
<text class="btn-no" bindtap=_error>{{btn_no}}</text>
<text class="btn-ok" bindtap=_success>{{btn_ok}}</text>
</view>
</view>
</view>

Dialog.js

Dialog.wxss

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/* component/popup.wxss */
.wx-popup {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
}
.popup-container {
position: absolute;
left: 50%;
top: 50%;
width: 80%;
max-width: 600rpx;
border: 2rpx solid #ccc;
border-radius: 10rpx;
box-sizing: bordre-box;
transform: translate(-50%, -50%);
overflow: hidden;
background: #fff;
}
.wx-popup-title {
width: 100%;
padding: 20rpx;
text-align: center;
font-size: 40rpx;
border-bottom: 2rpx solid red;
}
.wx-popup-con {
margin: 60rpx 10rpx;
text-align: center;
}
.wx-popup-btn {
display: flex;
justify-content: space-around;
margin-bottom: 40rpx;
}
.wx-popup-btn text {
display: flex;
align-items: center;
justify-content: center;
width: 30%;
height: 88rpx;
border: 2rpx solid #ccc;
border-radius: 88rpx;
}

组件的代码，到这里就是完成了。

调用自定义组件

1：我们要在留言板中使用这个自定义组件,打开board.json，在usingComponents中增加如下代码

?
1
"popup": "/component/popup/popup";

2：在board.wxml中引入组件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!—自定义组件-->
<view class="container">
<view class="userinfo">
<button bindtap="showPopup"> 点我 </button>
</view>
<popup id=popup
title=小组件
content=学会了吗
btn_no=没有
btn_ok=学会了
bind:error="_error"
bind:success="_success">
</popup>
</view>

3：在board.js中调用组件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//获取应用实例
const app = getApp()
Page({
onReady: function () {
//获得popup组件
this.popup = this.selectComponent("#popup");
},
showPopup() {
this.popup.showPopup();
},
//取消事件
_error() {
console.log(你点击了取消);
this.popup.hidePopup();
},
//确认事件
_success() {
console.log(你点击了确定);
this.popup.hidePopup();
}
})

至此，一个简单的自定义组件的封装及调用都完成了。

以上就

您可能感兴趣的文章:微信小程序自定义模态弹窗组件详解微信小程序自定义modal弹窗组件的方法详解小程序开发实战指南之封装自定义弹窗组件

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：示例 程序 代码 微信小程序 小程序
上一篇:三分钟带你快速学会微信小程序的条件渲染
下一篇:微信小程序淘宝首页双排图片布局排版代码(推荐)
相关文章

 发表评论

暂时没有评论，来抢沙发吧~