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

最新推荐文章于 2024-06-29 15:21:30 发布

小歪 | 前端

最新推荐文章于 2024-06-29 15:21:30 发布

阅读量1k

点赞数 2

分类专栏：微信小程序

本文链接：https://blog.csdn.net/weixin_44599931/article/details/105481259

版权

微信小程序专栏收录该内容

20 篇文章 0 订阅

订阅专栏

在这里插入图片描述
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)
 }