小程序下方滑出弹窗css解决方案

最新推荐文章于 2024-08-15 23:03:45 发布

oKven_

最新推荐文章于 2024-08-15 23:03:45 发布

阅读量2.6k

点赞数

分类专栏：小程序小程序升华之路

本文链接：https://blog.csdn.net/qq_40413396/article/details/85162854

版权

小程序同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

小程序升华之路

14 篇文章 1 订阅

订阅专栏

用css解决小程序点击按钮下方滑出弹窗

用@keyframes完成动画效果

.up{
  animation: up .7s;
}
.down{
  animation: down 1s;
}
@keyframes up
{
  0% { transform: translateY(550rpx); }
  100% { transform: translateY(0); }
}
@keyframes down
{
  0% { transform: translateY(0); }
  100% { transform: translateY(550rpx); }
}

绑定class

  <!-- 立即预约 -->
  <view wx:if="{{disTag}}" class='order'>
    <view class="order-box {{disTag== true ? 'up' : 'down'}}">   //绑定class完成加载效果
        <icon class='clear' type="clear" size="20" bindtap='clear'/>
        <view class='pro shop-prize'>
          门市价格：<text style=''>￥199</text>
        </view>
        <view class='pro order-prize'>
          支付金额：<text>￥{{yyPrice}}</text>
        </view>
        <button class='yd-submit' bindtap='payNow'>立即支付</button>
    </view>
  </view>