微信小程序自定义全屏遮罩弹窗showLoading、showModal组件（可以加载gif图片）

链接: https://pan.baidu.com/s/1PZFCQFMmOWq50moOZAM9gQ   (提取码: f774 )

组件一：

• wxml.wxml:

 

• 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:

{{showloadingTitle}}

 

    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:

 

• 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

}

thisPage.showModal = thisPage.selectComponent("#showModal")

thisPage.showModal.gaibian();

}

}



},

callback: function (res) {

return successObj(res)

},

globalData: {

userInfo: null

}

})

 

• 组件部分：

   1.component.wxml:

{{title}}



{{content}}







取消



确定

确定

 

    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

that .gaibian();

},

methods: {

gaibian:function (e) {

    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 })

    }

},

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;

}