微信小程式自定義彈窗
摘要：
小程式相信大家都不陌生了，掃碼即用，麻雀雖小，五臟俱全。
微信小程式簡介
小程式的宿主環境是webview，學起來上手比較快，微信封裝了一些API供js呼叫原生app，足矣滿足大部分需求了
舉個例子: 安卓端js呼叫java
java程式碼
webView.addJavas...
小程式相信大家都不陌生了，掃碼即用，麻雀雖小，五臟俱全。
微信小程式簡介
小程式的宿主環境是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;
}