小程序写插件内容
在components下新建popup文件夹
在创建component名字为popup
创建完成后看下图
yle="max-width:100%;">
popup.wxm
yle="max-width:100%;overflow-x:auto;"><!--components/popup/popup.wxml-->
<view class="wx-popup" hidden="{{flag}}">
<image src="/images/popup.png"></image>
<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-ok" bindtap='_success'>{{btn_ok}}</text>
</view>
</view>
</view>
popup.wxss
yle="max-width:100%;overflow-x:auto;">/* components/popup/popup.wxss */
.wx-popup {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0 0 0 .5);
}
.wx-popup image{
width: 638rpx;
height: 585rpx;
margin-top: 420rpx;
margin-left: 60rpx;
}
.popup-container {
width: 635rpx;
height: 585rpx;
position: absolute;
left: 50%;
top: 60%;
max-width: 630rpx;
border-radius: 10rpx;
box-sizing: bordre-box;
transform: translate(-50% -50%);
overflow: hidden;
}
.wx-popup-title {
width: 100%;
height: 25%;
font-weight: 800;
color:#ffffff;
text-align: center;
font-size: 40rpx;
}
.wx-popup-con {
height: 35%;
margin-top: 25rpx;
margin-left: 35rpx;
margin-right: 15rpx;
text-align: left;
}
.wx-popup-btn {
margin-top: 23rpx;
height: 20%;
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-radius: 88rpx;
}
popup.jsyle="max-width:100%;overflow-x:auto;">// components/popup/popup.js
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
}
/**
* 组件的属性列表
*/
properties: {
title: { // 属性名
type: String // 类型(必填),目前接受的类型包括:String Number Boolean object Array null(表示任意类型)
value: '标题' // 属性初始值(可选),如果未指定则会根据类型选择一个
}
// 弹窗内容
content: {
type: String
value: '内容'
}
// 弹窗取消按钮文字
btn_no: {
type: String
value: '取消'
}
// 弹窗确认按钮文字
btn_ok: {
type: String
value: '确定'
}
}
/**
* 组件的初始数据
*/
data: {
flag: true
}
/**
* 组件的方法列表
*/
methods: {
//隐藏弹框
hidePopup: function () {
this.setData({
flag: !this.data.flag
})
}
//展示弹框
showPopup () {
this.setData({
flag: !this.data.flag
})
}
/*
* 内部私有方法建议以下划线开头
* triggerEvent 用于触发事件
*/
_error () {
//触发取消回调
this.triggerEvent("error")
}
_success () {
//触发成功回调
this.triggerEvent("success");
}
}
})
调用部分内容
你要调用的页 index.json
yle="max-width:100%;">
index.html
yle="max-width:100%;overflow-x:auto;"> <popup id='popup'
title='{{title}}'
content='{{content}}'
btn_no='没有'
btn_ok='知道了'
bind:error="_error"
bind:success="_success">
</popup>
在你要调用的JS文件里添加 下边的内容就可以了,
ti
index.js
yle="max-width:100%;overflow-x:auto;"> this.popup = this.selectComponent("#popup");
this.popup.showPopup();
最好的效果
yle="max-width:100%;">
发表评论