微信小程序二维码弹窗

wxml:

<view>
<!--屏幕背景变暗的背景 -->
<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
<!--弹出框 -->
<view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">
    <view  class="guan">
        <view class="_flex">
            <view class="guanyu">
                <image mode="aspectFit" style="width: 400rpx;height: 400rpx;" show-menu-by-longpress="true"  bindtap="previewImage" class="guanyu_img"  src="{{jiaoliu.image_jidi}}" ></image>
            </view>
        </view>
        <view class="center mag">{{jiaoliu.desc_name}}</view>
        <view class="_flex mag"><view class="_flex line solid"></view></view>
        <!-- <view class="center fon mag">你还可以</view> -->
        <view class="_flex">
            <view class="left line tex">
                <view wx:for="{{jiaoliu.desc_text}}">{{item}}</view>
                <button type="warn" style="width:50%;color:#fff;margin-top:10px; font-size:15px;" bindtap="hideModal">关  闭</button>
            </view>
        </view>
    </view>
</view>

wxss:

/*使屏幕变暗 */
.commodity_screen {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 background: #000;
 opacity: 0.8;
 overflow: hidden;
 z-index: 1000;
 color: #fff;
 }
/*对话框 */

.commodity_attr_box {
width: 100%;
overflow: hidden;
position: fixed;
/* bottom: 280rpx; */
bottom: 10%;
left: 0;
z-index: 2000;
padding-top: 20rpx;
display: flex;
justify-content: center;
color: #fff;
}
.guan{font-size: 16px;}
.fon{font-size: 20px;}
.line{line-height: 60rpx;}
.guanyu{
width: 400rpx;
height: 400rpx;
background: #fff;
}
._flex{
width: 100%;
display: flex;
justify-content: center;
}
.center{
width: 100%;
text-align: center;
}
.left{
width: 100%;
text-align: left;
}
.solid{
width: 100%;
height: 1px;
background-color: #666;
}
.mag{margin: 10px 0;}
.tex{margin-left: 50rpx;}

js:

/**
 * 显示对话框
 * */
showModal: function () {
    // 显示遮罩层
    var animation = wx.createAnimation({
    duration: 200,
    timingFunction: "linear",
    delay: 0
    })
    this.animation = animation
    animation.translateY(300).step()
    this.setData({
    animationData: animation.export(),
    showModalStatus: true
    })
    setTimeout(function () {
    animation.translateY(0).step()
    this.setData({
    animationData: animation.export()
    })
    }.bind(this), 200)
},
/**
 *  隐藏对话框
 * */
hideModal: function () {
    // 隐藏遮罩层
    var animation = wx.createAnimation({
    duration: 200,
    timingFunction: "linear",
    delay: 0
    })
    this.animation = animation
    animation.translateY(300).step()
    this.setData({
    animationData: animation.export(),
    })
    setTimeout(function () {
    animation.translateY(0).step()
    this.setData({
    animationData: animation.export(),
    showModalStatus: false
    })
    }.bind(this), 200)
},

效果图:

在这里插入图片描述

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

刘溜鎏

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值