微信小程序自定义弹窗组件
2019-01-25 本文已影响22人
Vector_b612
小程序相信大家都不陌生了，扫码即用，麻雀虽小，五脏俱全。
微信小程序简介
小程序的宿主环境是webview，学起来上手比较快，微信封装了一些API供js调用原生app，足矣满足大部分需求了
举个例子: 安卓端js调用java
java代码
webView.addJavascriptInterface(new myJavaScriptInterface(), “wx”);
public class myJavaScriptInterface{
@SuppressLint("JavascriptInterface")
@JavascriptInterface
public void showToast(String text){
Toast.makeText(MainActivity.this, text, Toast.LENGTH_LONG).show();
}
}
js代码
wx.showToast("你好啊");
回归主题
最近在做微信小程序，发现里面的弹窗用的比较多，小程序自带的弹窗功能很少只能显示简单的文字所以简单封装了下
主要知识点 ：
- 小程序自定义组件
- 弹窗遮罩
- 弹窗内容
- 取消和确定事件传递
实现步骤
1.一个半透明的遮罩层
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: black;
opacity: 0.5;
2.居中的弹窗
position: fixed;
left: 50%;
top: 50%;
background-color: white;
z-index: 999;
transform: translateX(-50%) translateY(-50%);
border-radius: 10rpx;
3.点击取消和确认事件
// 取消事件
cancel: function () {
this.setData({
show: false
});
this.triggerEvent('cancel');
},
// 确定事件
ok: function () {
this.setData({
show: false
});
this.triggerEvent('ok');
}
说明:引用的地方通过bind***接收 ***对应triggerEvent的参数
<dialog show="{{show}}" title="这是标题" footer="{{true}}" bindok="ok" bindcancel="cancel">
</dialog>
效果图
image.png
代码
wxml代码
<button bindtap="show">显示弹窗</button>
<dialog show="{{show}}" title="这是标题" footer="{{true}}" bindok="ok" bindcancel="cancel">
<view>
<view>这是中间的内容</view>
<view>这是中间的内容</view>
<view>这是中间的内容</view>
</view>
</dialog>
js代码
// pages/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
show: false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
show: function () {
this.setData({
show: true
})
},
// 确定按钮
ok: function () {
console.log("点击了确定")
},
// 取消
cancel: function () {
console.log("点击了取消")
}
})
json 代码
{
"usingComponents": {
"dialog": "/components/vector/dialog/index"
}
}
组件
wxml 代码
<!--components/dialog/index.wxml-->
<view class="dialog-bg" wx:if="{{show}}">
</view>
<view class="dialog" style="width:{{width}}rpx;" wx:if="{{show}}">
<view class="title">
<view>{{title}}</view>
<view>
<image class="close-icon" src="{{IMG_URL}}/imgs/icon/close.png" bindtap="close">
</image>
</view>
</view>
<view class="content" style="height: {{height}}rpx;">
<slot></slot>
</view>
<view class="footer" wx:if="{{footer}}">
<view class="btn-cancel" bindtap="cancel">取消</view>
<view class="btn-ok" bindtap="ok">确定</view>
</view>
</view>
js 代码
// components/dialog/index.js
var app = getApp()
Component({
/**
* 组件的属性列表
*/
properties: {
// 弹窗宽度
width: {
type: String,
value: "600",
},
// 弹窗高度
height: {
type: String,
value: "300",
},
// 标题
title: {
type: String
},
show: {
type: Boolean,
value: false,
},
// 是否显示底部按钮
footer: {
type: Boolean,
value: false,
}
},
/**
* 组件的初始数据
*/
data: {
IMG_URL: app.globalData.IMGURL,
show: false
},
/**
* 组件的方法列表
*/
methods: {
// 关闭弹窗
close: function () {
this.setData({
show: false
})
},
// 取消事件
cancel: function () {
this.setData({
show: false
});
this.triggerEvent('cancel');
},
// 取消事件
ok: function () {
this.setData({
show: false
});
this.triggerEvent('ok');
}
},
})
css 代码
/* components/dialog/index.wxss */
page {
font-size: 30rpx;
}
/* 遮罩层 */
.dialog-bg {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: black;
opacity: 0.5;
}
.dialog {
position: fixed;
left: 50%;
top: 50%;
background-color: white;
z-index: 999;
transform: translateX(-50%) translateY(-50%);
border-radius: 10rpx;
}
/* 标题栏 */
.dialog .title {
display: flex;
justify-content: center;
align-items: center;
padding: 0 20rpx;
height: 80rpx;
border-bottom: 1px solid #f0f0f0;
}
/* 关闭按钮 */
.dialog .close-icon {
width: 40rpx;
height: 40rpx;
position: absolute;
right: 20rpx;
top: 20rpx;
}
/* 内容 */
.dialog .content {
display: flex;
justify-content: center;
align-items: center;
overflow: scroll;
}
.dialog .footer {
width: 100%;
height: 80rpx;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
border-bottom-left-radius: 10rpx;
border-bottom-right-radius: 10rpx;
}
.dialog .footer>view {
/* padding: 20rpx; */
height: 80rpx;
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
}
.dialog .footer .btn-cancel {
flex-grow: 1;
border-bottom-left-radius: 10rpx;
border-top: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
border-left: 1px solid #f0f0f0;
}
.dialog .footer .btn-ok {
flex-grow: 1;
color: #3385ff;
border-bottom-right-radius: 10rpx;
border: 1px solid #f0f0f0;
}
