小程序弹出动画（分享类）

- 日理万妓 2022-05-09 17:33 144阅读 0赞

点击分享弹出一个动画 出现分享类型

wxml:

<view>
        <view animation="{
       {animationData}}" class="buydes-dialog-container" wx:if="{
       {showModalStatus}}">
            <view class="buydes-dialog-container-top" bindtap="hideModal">
            </view>
            <view class="buydes-dialog-container-bottom">
                <view class="fl bottom-image-fen">
                    <button open-type="share" hover-class="other-button-hover" class="button-bg">
                        <image src="../../img/weixin.png" style="width: 80rpx; height: 80rpx;" class="bottom-img"></image>
                        <view class="image-txt">发送好友</view>
                    </button>
                </view>
                <view class="fl bottom-image-fen">
                    <view style="margin-top: 5rpx;" bindtap="saveShareImg">
                        <image src="../../img/down.png" style="width: 60rpx; height: 60rpx;" class="bottom-img-right "></image>
                        <view class="image-txt">保存卡片</view>
                    </view>
                </view>
                <view class="clear"></view>
                <view bindtap="hideModal" class="buydes-dialog-container-bottom-item" >取消</view>
            </view>
        </view>
        <image bindtap="showModal" bindload="imageLoad" style="width:200px;" src="../../img/xingli.png"/>
    </view>

js:

let animationShowHeight = 300;
    Page({
        data:{
            animationData:"",
            showModalStatus:false,
        },
        // 显示遮罩层
        showModal: function () {
            let that = this;
            let animation = wx.createAnimation({
                duration: 200,
                timingFunction: "linear",
            });
            that.animation = animation;
            animation.translateY(animationShowHeight).step();
            that.setData({
                animationData: animation.export(),
                showModalStatus: true
            });
            setTimeout(function () {
                animation.translateY(0).step();
                that.setData({
                    animationData: animation.export()
                })
            }.bind(that), 200);
    
            that.setData({
                shareImgHidden: true,
            });
        },
         // 隐藏遮罩层
        hideModal: function () {
            let that = this;
            let animation = wx.createAnimation({
                duration: 200,
                timingFunction: "linear",
                delay: 0
            });
            that.animation = animation;
            animation.translateY(animationShowHeight).step();
            that.setData({
                animationData: animation.export(),
            });
            setTimeout(function () {
                animation.translateY(0).step();
                that.setData({
                    animationData: animation.export(),
                    showModalStatus: false
                })
            }.bind(that), 200);
        },
    
        onShow:function(){
            let that = this;
            wx.getSystemInfo({
                success: function(res) {
                    animationShowHeight = res.windowHeight;
                }
            });
        },
    });

wxss:

.buydes-dialog-container{
        width: 100%; height: 100%; background-color:rgba(15, 15, 26, 0.3); 
        position: fixed; z-index: 999;
    }
    .buydes-dialog-container-top { height: 80vh; }
    
    .buydes-dialog-container-bottom { background-color: #ffffff; }
    
    .buydes-dialog-container-bottom-item{
        background-color: #eeeeee; padding:24rpx; text-align: center; 
        border-bottom: 1rpx solid #eeeeee;
    }
    .bottom-img { border: 0; margin-bottom: -20rpx; }
    button::after { border: 0; }
    .button-bg {
        background-color: #ffffff; height: 160rpx; padding-top: 20rpx;
    }
    .bottom-image-fen { width: 50vw; }
    .image-txt { line-height: 30rpx; text-align: center; font-size: 24rpx;}
    .bottom-img-right {
        background-color: #3EBDFE; border-radius: 50rpx; padding: 10rpx; margin-top: 20rpx;
        margin-left: 20vw; margin-bottom: 5rpx;
    }

![70][]![70 1][]

参考： [微信小程序自定义对话框+弹出和隐藏动画详解][Link 1]

[70]: https://img-blog.csdn.net/2018101710575332?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTQ2MTQ4Nw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220506/ac33628e58824567a1a83f6747814b1e.png
[Link 1]: https://blog.csdn.net/pcaxb/article/details/56276180

发表评论取消回复

表情：

评论列表（有 0 条评论，144人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序之自定义底部弹出框动画

1 wxml <view class="modals modals-bottom-dialog" hidden="{ {hideModal}}"> <

浅浅的花香味﹌/ 2023年06月17日 13:56/ 0 赞/ 35 阅读

相关小程序开发之弹出框

小程序开发过程中，很多地方为了便利我们多采用小程序自带弹出框来实现交互效果。这也够大多数开发使用，下面我给大家详细介绍下小程序弹出框官方api传送门：[https://de

朴灿烈づ我的快乐病毒、/ 2023年01月20日 14:56/ 0 赞/ 27 阅读

相关小程序开发之弹出框

小程序开发过程中，很多地方为了便利我们多采用小程序自带弹出框来实现交互效果。这也够大多数开发使用，下面我给大家详细介绍下小程序弹出框官方api传送门：https://de

ゝ一纸荒年。/ 2023年01月08日 11:28/ 0 赞/ 199 阅读

相关小程序底部弹出框效果

问题描述：点击使用说明，弹出消息框，显示相关信息（1）wxml页面 <view class='explain' bindtap="show"> <te

淩亂°似流年/ 2022年05月15日 05:21/ 0 赞/ 550 阅读

相关小程序弹出动画（分享类）

点击分享弹出一个动画出现分享类型 wxml: <view> <view animation="{ {animationData}}"

- 日理万妓/ 2022年05月09日 17:33/ 0 赞/ 145 阅读

相关小程序弹出框

[https://www.cnblogs.com/bgwhite/p/9335648.html][https_www.cnblogs.com_bgwhite_p_9335648

逃离我推掉我的手/ 2022年04月22日 16:16/ 0 赞/ 308 阅读

相关微信小程序实现消息框弹出动画

js： Page({ data: { showModalStatus: false }, powerDrawer: func

系统管理员/ 2021年12月12日 19:57/ 0 赞/ 426 阅读

相关微信小程序-弹出对话框

什么是对话框对话框是微信小程序的，界面交互的一种方式，其他的还有`toast`等。 > [https://developers.weixin.qq.com/minip

阳光穿透心脏的1/2处/ 2021年11月01日 14:06/ 0 赞/ 666 阅读

相关底部弹出框动画

qq微信小程序学习交流群：581478349 ![20190319101910350.png][]

傷城~/ 2021年09月18日 13:14/ 0 赞/ 503 阅读

相关小程序弹出框详解

![标题图][1240] 小程序弹出框详解 qjlx: function() { var itemList = ['病假', '事假'];

待我称王封你为后i/ 2021年09月17日 04:40/ 0 赞/ 428 阅读