链接: https://pan.baidu.com/s/1PZFCQFMmOWq50moOZAM9gQ (提取码: f774 )
组件一：
- wxml.wxml:
<!-- 弹框 -->
<!-- pathImg显示图片 -->
<showLoading showloadingMask='{{showloadingMask}}' pathImg='{{pathImg_xsw}}' showloadingTitle='{{showloadingTitle}}'>
</showLoading>
- wxml.json:
{
"usingComponents": {
"showLoading": "/component/showloading"
},
"navigationBarBackgroundColor": "#fbe8b9",
"navigationBarTitleText": "组件备注"
}
- wxml.js:
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
/*********加载动作显示***************/
app.showloadingMask({
showloadingMask: 'true',
showloadingTitle: '加载中...',//显示文字
// pathImg_xsw:'/component/img/loading_one.gif',//图片路径
duration: 1000,//自动关闭
success: function (res) {
// console.log(res.path)//当前页面路径
}
})
// 手动关闭
// setTimeout(function(){
// app.showloadingMask({
// showloadingMask: 'false'//隐藏
// })
// },3000)
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
clearInterval(setIntervalC)
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
- app.js:
App({
showloadingMask: function (obj) {
var that = this
if (obj) {
var showloadingMask;
var showloadingTitle = '';
var pathImg_xsw = '/component/img/loading_one.gif';//默认图片路径
var path = '';
var duration = null;
if (obj.showloadingMask)
showloadingMask = obj.showloadingMask
if (obj.showloadingTitle)
showloadingTitle = obj.showloadingTitle
if (obj.success)
var success = obj.success
if (obj.path)
path = obj.path
if (obj.pathImg_xsw)
pathImg_xsw = obj.pathImg_xsw
if (obj.duration)
duration = obj.duration
// console.log(showloadingMask)
var pages = getCurrentPages();
if (path == '') {
var thisPage = pages[pages.length - 1]
}
else {
thisPage = path
}
if (thisPage) {
thisPage.setData({
showloadingMask: showloadingMask,
showloadingTitle: showloadingTitle,
pathImg_xsw: pathImg_xsw
})
if (duration != null) {
setTimeout(function () {
thisPage.setData({
showloadingMask: 'false'
})
if (success) {
return success({ path: thisPage, showloadingMask: 'OK' })
}
}, duration)
}
else {
if (success) {
return success({ path: thisPage, showloadingMask: 'OK' })
}
}
}
}
},
})
- component组件内容：
1.component.wxml:
<view class='showloadingMaskZ' style="display:{{showloadingMask=='true'?'block':'none'}}">
<view class='showloading'>
<view direction="all" class='showloading_k'>
<image src='{{pathImg}}'></image>
<view>{{showloadingTitle}}</view>
</view>
</view >
</view>
2.component.js:
Component({
/**
* 组件的属性列表
*/
properties: {
showloadingMask: { // 属性名
type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
value: 'false', // 属性初始值（可选），如果未指定则会根据类型选择一个
},
showloadingTitle:{
type:String,
value: '',
},
pathImg:{
type:String,
value:'/pages/img/loading_one.gif'
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
ready:function(){
// console.log(this.data.showloadingMask)
var that=this
var showloadingTitle = that.data.showloadingTitle
var pathImg = that.data.pathImg
if (pathImg==''){
pathImg='/pages/img/loading_one.gif'
}
if (showloadingTitle!=''){
showloadingTitle = showloadingTitle.substring(0, 7)
}
that.setData({
pathImg: pathImg,
showloadingTitle: showloadingTitle
})
},
methods: {
showloading:function(){
this.setData({
mask:true
})
},
hideloading: function () {
this.setData({
mask: false
})
},
}
})
3. component.wxss:
.showloadingMaskZ{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 99999999999;
}
.showloading{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0);
}
.showloading_k{
margin-top: -100rpx;
width: 200rpx;
height: 200rpx;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 10rpx;
color: #fff;
font-size: 24rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.showloading_k image{
width: 120rpx;
height: 120rpx;
}
.showloading_k view{
margin-top: 20rpx;
color: #fff;
font-size: 24rpx;
}
组件二：
- wxml.wxml:
<!--
title 弹框title，默认值 ‘提示’ 类型String
content 弹框content，默认值 ‘’ 类型String
showNoCancel 是否不显示取消按钮，默认值 false 类型Boolean
pageNoBind 是否不要页面点击关闭事件，默认值 false 类型Boolean
transparent 是否背景透明，默认值 false 类型Boolean
frontColor 顶部文字颜色，默认值 ‘’ 类型String
backgroundColor 顶部背景色，默认值 ‘’ 类型String
-->
<showModal title='{{xsw_title}}' content='{{xsw_content}}' showNoCancel='{{xsw_showNoCancel}}' pageNoBind='{{xsw_pageNoBind}}' transparent='{{xsw_transparent}}' frontColor='{{xsw_frontColor}}' backgroundColor='{{xsw_backgroundColor}}' showModal='{{xsw_showModal}}'></showModal>
- wxml.json:
{
"usingComponents": {
"showModal": "/component/showModal"
},
"navigationBarBackgroundColor": "#fbe8b9",
"navigationBarTitleText": "组件备注"
}
- wxml.js:
// pages/ceshi.js
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
},
onLoad: function (options) {
// 自定义showModal弹框
app.showModal({
title: '说明',
content: '自定义的组件showModal自定义的组件showModal自定义的组件showModal自定义的组件showModal自定义的组件showModal自定义的组件showModal自定义的组件showModal自定义的组件showModal自定义的组件showModal自定义的组件showModal自定义的组件showModal自定义的组件showModal自定义的组件showModal自定义的组件showModal自定义的组件showModal自定义的组件showModal自定义的组件showModal自定义的组件showModal自定义的组件showModal自定义的组件showModal自定义的组件showModal',
// showNoCancel:true,//是否不显示 取消按钮
// pageNoBind:true,//是否不要页面点击关闭事件
// transparent: true,// 是否背景透明
frontColor: '#000000',//顶部文字颜色
backgroundColor: '#fbe8b9',//顶部背景色
success: function (res) {
// console.log(res);
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
} else if (res.change) {
console.log('用户点击页面')
}
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
clearInterval(setIntervalC)
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
- app.js:
//app.js
var successObj = null
App({
onLaunch: function () {
},
showModal: function (obj) {
var that = this
if (obj) {
var title = '提示';
var content = '';
var showNoCancel = false;
var pageNoBind = false;
var transparent = false;
var success
var frontColor = ''
var backgroundColor = '';
if (obj.frontColor)
frontColor = obj.frontColor
if (obj.backgroundColor)
backgroundColor = obj.backgroundColor
if (obj.title)
title = obj.title
if (obj.content)
content = obj.content
if (obj.showNoCancel) {
showNoCancel = obj.showNoCancel
}
if (obj.pageNoBind)
pageNoBind = obj.pageNoBind
if (obj.transparent)
transparent = obj.transparent
if (obj.success)
success = obj.success
var pages = getCurrentPages();
var thisPage = pages[pages.length - 1]
if (thisPage) {
thisPage.setData({
xsw_title: title,
xsw_content: content,
xsw_showModal: true,
xsw_showNoCancel: showNoCancel,
xsw_pageNoBind: pageNoBind,
xsw_transparent: transparent,
xsw_frontColor: frontColor,
xsw_backgroundColor: backgroundColor
})
if (success) {
successObj = success
}
}
}
},
callback: function (res) {
return successObj(res)
},
globalData: {
userInfo: null
}
})
- 组件部分：
1.component.wxml:
<view class='warp' style="background-color:{{transparent==false?'rgba(0,0,0,0.7)':'rgba(0,0,0,0)'}};" wx:if='{{showModal==true}}'>
<view class='mask_one' data-pan='0' bindtap="{{pageNoBind==false?'colse':''}}"></view>
<view class='bubble' direction="all">
<view class='tishi'>{{title}}</view>
<scroll-view scroll-y class='bubble_one'>
{{content}}
</scroll-view >
<view class='border'></view>
<view class='bFooter'>
<view wx:if='{{showNoCancel==false}}' data-pan='1' bindtap='colse' class='bFooter_z1'>取消</view>
<view wx:if='{{showNoCancel==false}}' class='bFooter_z_B'></view>
<view wx:if='{{showNoCancel==false}}' data-pan='2' bindtap='colse' class='bFooter_z2'>确定</view>
<view wx:if='{{showNoCancel==true}}' data-pan='2' bindtap='colse' class='bFooter_z'>确定</view>
</view>
</view>
</view>
2.component.js:
// component/showModal.js
var colorRgb = function (sColor) {
sColor = sColor.toLowerCase();
//十六进制颜色值的正则表达式
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
// 如果是16进制颜色
if (sColor && reg.test(sColor)) {
if (sColor.length === 4) {
var sColorNew = "#";
for (var i = 1; i < 4; i += 1) {
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
}
sColor = sColorNew;
}
//处理六位的颜色值
var sColorChange = [];
for (var i = 1; i < 7; i += 2) {
sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
}
return "RGB(" + sColorChange.join(",") + ")";
}
return sColor;
};
var colorHex = function (color) {
var that = color;
//十六进制颜色值的正则表达式
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
// 如果是rgb颜色表示
if (/^(rgb|RGB)/.test(that)) {
var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
var strHex = "#";
for (var i = 0; i < aColor.length; i++) {
var hex = Number(aColor[i]).toString(16);
if (hex.length < 2) {
hex = '0' + hex;
}
strHex += hex;
}
if (strHex.length !== 7) {
strHex = that;
}
return strHex;
} else if (reg.test(that)) {
var aNum = that.replace(/#/, "").split("");
if (aNum.length === 6) {
return that;
} else if (aNum.length === 3) {
var numHex = "#";
for (var i = 0; i < aNum.length; i += 1) {
numHex += (aNum[i] + aNum[i]);
}
return numHex;
}
}
return that;
};
var colorHunHe = function (color) {
var zhi = colorRgb(color)
var rgb = zhi.substr(4, zhi.length - 5)
var rgbArr = rgb.split(',')
// 两种颜色混合后，混色的色值计算，RGB分别用这个公式计算：颜色A - (颜色A - 颜色B) * (1 - 颜色A的百分比)
// 例如：绿和白混合，绿(192, 229, 112)70 %，白(255, 255, 255)30 %R: 192-(192-255)*(1-0.7) = 210.9
// G: 229 - (229 - 255) * (1 - 0.7) = 234.8
// B: 112 - (112 - 255) * (1 - 0.7) = 154.9
// 四舍五入后得到混合色值：(211, 235, 155)
var R = Math.round(0 - (0 - parseInt(rgbArr[0])) * (1 - 0.7))
var G = Math.round(0 - (0 - parseInt(rgbArr[1])) * (1 - 0.7))
var B = Math.round(0 - (0 - parseInt(rgbArr[2])) * (1 - 0.7))
return colorHex('rgb(' + R + ',' + G + ',' + B + ')')
}
var app = getApp()
Component({
/**
* 组件的属性列表
*/
properties: {
title: {
type: String,
value: '提示',
},
content:{
type: String,
value: '',
},
showModal: {
type: Boolean,
value: false,
},
showNoCancel:{
type: Boolean,
value: false,
},
pageNoBind: {
type: Boolean,
value: false,
},
transparent: {
type: Boolean,
value: false,
},
frontColor: {
type: String,
value: '',
},
backgroundColor: {
type: String,
value: '',
},
},
created: function () {
},
ready: function () {
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
ready: function () {
var that = this
if (that.data.frontColor != '' && that.data.backgroundColor != '') {
var yanSe = colorHunHe(that.data.backgroundColor)
wx.setNavigationBarColor({
frontColor: that.data.frontColor,
backgroundColor: yanSe,
})
wx.hideTabBar({ animation: true })
}
},
methods: {
colse: function (e) {
var that = this
if (that.data.frontColor != '' && that.data.backgroundColor != '') {
wx.setNavigationBarColor({
frontColor: that.data.frontColor,
backgroundColor: that.data.backgroundColor,
})
wx.showTabBar({ animation: true })
}
var change = false, cancel = false, confirm = false;
if (e.currentTarget.dataset.pan==0){
change=true
}
else if (e.currentTarget.dataset.pan == 1){
cancel = true
}
else if (e.currentTarget.dataset.pan == 2){
confirm = true
}
var that = this
that.setData({
showModal: false
})
return app.callback({ confirm: confirm, cancel: cancel, change: change })
},
}
})
3.component.wxss:
.warp{
position:fixed;
z-index: 999999999;
top:0;
left:0;
right:0;
bottom:0;
display: flex;
flex-direction:row;
align-items: center;
justify-content: center;
height:100vh;
width: 100vw;
}
.allow{
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.mask_one{
position: absolute;
z-index: 8;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.bubble{
margin-top: -70rpx;
position: relative;
width:490rpx;
background:rgba(255,255,255,1);
box-shadow:0rpx 4rpx 12rpx 0rpx rgba(205,164,61,0.36);
border-radius:10rpx;
z-index: 9;
}
.logo{
width: 83rpx;
height: 90rpx;
margin: 53rpx 0 0 199rpx;
}
.bubble_one{
width: calc(100% - 100rpx);
max-height:400rpx;
margin: 0 auto;
font-size:28rpx;
font-family:MicrosoftYaHei;
font-weight:400;
color:rgba(156,156,156,1);
line-height: 1.5;
overflow-y:hidden;
}
.tishi{
width: 100%;
height: 100rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
}
.border{
width:460rpx;
height:2rpx;
background:rgba(255,227,194,1);
margin: 25rpx auto 0 auto;
}
.bFooter{
width: 100%;
height: 84rpx;
display: flex;
align-items: center;
justify-content: flex-start;
}
.bFooter_z1{
position: relative;
height: 100%;
width: 49%;
font-size:26rpx;
font-family:MicrosoftYaHei;
font-weight:400;
color:rgba(255,228,209,1);
display: flex;
align-items: center;
justify-content: center;
}
.bFooter_z_B{
width:1rpx;
height:40rpx;
background:rgba(255,227,194,1);
}
.bFooter_z2{
position: relative;
height: 100%;
width: 49%;
font-size:26rpx;
font-family:MicrosoftYaHei;
font-weight:400;
color:rgba(247,150,82,1);
display: flex;
align-items: center;
justify-content: center;
}
.bFooter_z{
position: relative;
height: 100%;
width: 100%;
font-size:26rpx;
font-family:MicrosoftYaHei;
font-weight:400;
color:rgba(247,150,82,1);
display: flex;
align-items: center;
justify-content: center;
}
.colse{
position: absolute;
width: 59rpx;
height: 59rpx;
right: -12rpx;
top: -12rpx;
}