微信小程序二维码弹窗

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

效果图：