选择商品属性弹框从底部弹出动画效果

最新推荐文章于 2024-09-05 15:56:58 发布

要成为光的女人

最新推荐文章于 2024-09-05 15:56:58 发布

阅读量726

点赞数

分类专栏：小程序文章标签：大数据

本文链接：https://blog.csdn.net/weixin_51614564/article/details/125485887

版权

小程序专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在微信小程序中实现商品详情页面的底部弹框效果，包括弹框的内容布局、动画效果和交互功能，如商品图片、名称、价格展示，库存信息，购买数量选择以及‘立即兑换’按钮的点击事件。代码示例展示了使用WXML和WXSS实现这一功能的详细过程。

摘要由CSDN通过智能技术生成

以上就是我们选择商品时，会出现一个动画效果模态弹框，相关代码的实现如下：

视图层的代码:

<!-- 底部弹出规格选择 -->
  <view class="animation" wx:if="{{showView}}">
  <!-- 内容框 -->
  <view class="animation_content">
  <!-- 上部分 -->
  <view class="animation_content_top">
  <view class="pic">
  <image src="{{goods_detail.points_goods_image}}" mode="aspectFit"></image>
  </view>
  <view class="store_name">
  <view style="margin-bottom: 10px;">{{goods_detail.points_goods_name}}</view>
  <view style="color: red;">帮豆{{goods_detail.points_goods_points}} + <text style="font-size: 25rpx;">现金:{{goods_detail.points_goods_buyprice}}</text></view>
  </view>
  <view class="close_kucun">
  <icon class="iconfont icon-close c-c6" bindtap='off'></icon>
  <view style="font-size: 27rpx;color: #999;">库存：{{goods_detail.points_goods_storage}}</view>
  </view>
  </view>
  <!-- 下部分 -->
  <view class="animation_content_bottom">
  <view style="width: 20%;">购买数量</view>
  <view class="nums">
  <button bindtap="cut"> - </button>
  <view>{{num}}</view>
  <button bindtap="addition"> + </button>
  </view>
  <view>
  </view>
  </view>
  <!-- 立即兑换 -->
  <button style="background: #fe244b;color: #fff;font-size: 28rpx;" bindtap="buyNow">立即兑换</button>
  </view>
  </view>

css相关的样式

/* 底部弹框动画 */
.animation{background: rgba(0,0,0,.5);position: fixed;width: 100%;top: 0;right: 0;animation: animation 1s ease;height: 100%;z-index: 3;}
@keyframes animation{
  0%{position: fixed;width: 100%;top:500rpx;right: 0;}
  100% {position: fixed;width: 100%;bottom:0;right: 0;height: 100%;}
  }
  .animation_content{
  display: block;
  position: absolute;
   bottom:0 ;
   z-index: 4;
   width: 100%;
   background: #ffff;
  }
  .animation_content_top{
    padding: 18px 10px;
    box-sizing: border-box;
    border-bottom: 1rpx solid #999;
    display: flex;
    justify-content: space-between;
    margin-bottom: 85px;
  }
  .store_name{margin-left: 30%;font-size: 27rpx;}
  .close_kucun{display: flex;flex-direction: column;align-items: flex-end;}
  .close_kucun icon{margin-top: -18px;margin-bottom: 18px;}

 .animation_content_top .pic{width: 95px;height: 95px;border-radius: 10px;position: absolute;top: -25px;}
 .pic image{width: 100%;height: 100%;border-radius: 10px;}
 .animation_content_bottom {
   border-top: 1rpx solid #9999;
   padding: 10px;
   display: flex;
   justify-content: space-between;
   color: #999;
   font-size: 28rpx;
   font-weight: 400;
 }
 .animation_content_bottom .nums{width: 20%;display: flex;align-items: flex-end;margin-left: 50%;}
 .animation_content_bottom button{width: 40rpx;height: 40rpx;line-height: 40rpx;}
 .bottom_duihuan{background: #fe244b;color: #fff;font-size: 30rpx;position: fixed;width: 100%;bottom: 0;left: 0;right: 0;height: 80rpx;line-height: 80rpx;}