微信小程序抽屉

最新推荐文章于 2025-06-11 13:36:27 发布

hyzzhmbb

最新推荐文章于 2025-06-11 13:36:27 发布

阅读量528

点赞数 9

CC 4.0 BY-SA版权

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/hyzzhmbb/article/details/135377866

文章详细描述了在微信小程序中如何使用动画效果实现屏幕背景变暗和弹出对话框的显示与隐藏，涉及wx.createAnimationAPI和translateY属性的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!--屏幕背景变暗的背景  -->
<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
<!--弹出框  -->
<view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">
    <view class="commodity_tit"><text class="comtittext">这里写标题</text>
        <view class="clenrbox" bindtap="hideModal">
            <image class="clenr" src="/Images/communitysafety/clenr.png" mode="" />
        </view>
    </view>
    <!--这里写内容  -->
    <view class="contbox">
        
    </view>
</view>

  showModal() {
    // 显示遮罩层
    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),
      100
    );
  },
  //隐藏对话框
  hideModal: function () {
    // 隐藏遮罩层
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0,
    });
    this.animation = animation;
    animation.translateY(300).step();
    setTimeout(
      function () {
        animation.translateY(0).step();
        this.setData({
          animationData: animation.export(),
          showModalStatus: false,
        });
      }.bind(this),
      100
    );
  },

.commodity_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.2;
  overflow: hidden;
  z-index: 1000;
  color: #fff;
}
/*对话框 */
.commodity_attr_box {
  height: 70%;
  width: 100%;
  border-radius: 30rpx 30rpx 0 0;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2000;
  background: #fff;
  padding-top: 20rpx;
}
.commodity_tit {
  height: 10%;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 1px solid rgb(245, 245, 245);
  color: #777777;
  position: relative;
}

.clenrbox {
  position: absolute;
  right: 20px;
  height: 18px;
  width: 18px;
}
.clenr {
  display: block;
  width: 100%;
  height: 100%;
}