微信小程序选项卡功能开发步骤与方法全解析
830
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小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~