微信小程序自定义分享弹窗

效果图：

多种触发条件使用同一个弹窗：

*.js触发处：

this.setData({

isWrong:true,

wrongtap:1,

dialogWord:"wrong",

wrongDec:"答案错误，是否向好友求助？"

})

 

*.wxml布局：

<view class="wrongDialog" wx:if="{{isWrong}}">

<view class="box">

<image class="bg" src="../../images/wrong_bg.png">

</image>

<view class="main">

<view class="wrong1">{{wrongDec}}</view>

 

<view class="wrong2">

 

<block wx:if="{{wrongtap == 1}}">

<view class="wrongBtnBox">

<view class="wrongBtn">

<!--答案错误取消-->

<image bindtap='wrongQx' src="../../images/wrongQx.png" mode="aspectFit" />

</view>

<view class="wrongBtn">

<!--答案错误确定-->

<image src="../../images/wrongOk.png" mode="aspectFit"></image>

<button class='shareOk' data-word="{{dialogWord}}" open-type="share" bindtap='wrongOk'></button>

</view>

</view>

</block>

 

<block wx:if="{{wrongtap == 2}}">

<view class="wrongBtnBox">

<view class="wrongBtn">

<!--提示取消-->

<image bindtap='tishiQx' src="../../images/wrongQx.png" mode="aspectFit" />

</view>

<view class="wrongBtn">

<!--提示确定-->

<image src="../../images/wrongOk.png" mode="aspectFit"></image>

<button class='shareOk' data-word="{{dialogWord}}" open-type="share" bindtap='tishiOk'></button>

</view>

</view>

</block>

 

<block wx:if="{{wrongtap == 3}}">

<view class="wrongBtnBox">

<view class="wrongBtn">

<!--点击金币取消-->

<image bindtap='goldQx' src="../../images/wrongQx.png" mode="aspectFit" />

</view>

<view class="wrongBtn">

<!--点击金币确定-->

<image src="../../images/wrongOk.png" mode="aspectFit"></image>

<button class='shareOk' data-word="{{dialogWord}}" open-type="share" bindtap='goldOk'></button>

</view>

</view>

</block>

</view>

</view>

</view>

 

*.wxss布局：

 

.wrongDialog {

position: fixed;

z-index: 100;

left: 0;

top: 0;

width: 100%;

height: 83%;

background-color: rgba(0, 0, 0, 0.5);

}

 

.wrongDialog .box {

width: 80%;

height: 364rpx;

position: absolute;

left: 10%;

top: 30%;

z-index: 9

}

 

.wrongDialog .box .bg {

width: 90%;

height: 100%;

margin: auto;

}

 

.wrongDialog .box .main {

position: absolute;

left: 50%;

top: 0;

-webkit-transform: translate(-50%, 0);

transform: translate(-50%, 0);

width: 522rpx;

height: 100%;

}

 

.wrongDialog .box .main .wrong1 {

color: #a65d1c;

font-size: 30rpx;

padding: 140rpx 0 0 0;

text-align: center;

}

 

.wrongDialog .box .main .wrong2 .wrongBtnBox {

width: 100%;

height: 100rpx;

vertical-align: middle;

text-align: center;

margin-top: 13%

}

 

.wrongDialog .box .main .wrong2 .wrongBtnBox .wrongBtn {

position: relative;

width: 160rpx;

height: 100rpx;

display: inline-block;

margin: 0 20rpx;

}

 

.wrongDialog .box .main .wrong2 .wrongBtnBox .wrongBtn image{

vertical-align: middle;

display: inline

}

 

.wrongDialog .box .main .wrong2 .wrongBtnBox .wrongBtn .shareOk{

position: absolute;

display: block;

left: 0;

top:0;

width: 100%;

height: 100%;

background: transparent;

}

 

button::after{

border:none;

}