小程序开发_关于我们弹窗_二维码

在这里插入图片描述
wxml文件

<!--屏幕背景变暗的背景 -->
 <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  show-menu-by-longpress="true"  class="guanyu_img" />
            </view>
        </view>
        <view class="center mag">长按图片【识别二维码】关注公众号</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 >1.打开微信,点击'添加朋友'</view>
                <view >2.点击'公众号'</view>
                <view >3.搜索公众号:99999999999</view>
                <view >4.点击'关注',完成</view>
            </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;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)
 }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值