当前位置:网站首页>选择商品属性弹框从底部弹出动画效果
选择商品属性弹框从底部弹出动画效果
2022-07-07 03:12:00 【要成为光的女人】
以上就是我们选择商品时,会出现一个动画效果模态弹框,相关代码的实现如下:
视图层的代码:
<!-- 底部弹出规格选择 -->
<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;}
边栏推荐
- 异步组件和Suspense(真实开发中)
- 根据IP获取地市
- 使用net core优势/为什么使用
- Several index utilization of joint index ABC
- How can flinksql calculate the difference between a field before and after update when docking with CDC?
- Lvs+kept (DR mode) learning notes
- Big coffee gathering | nextarch foundation cloud development meetup is coming
- Answer to the second stage of the assignment of "information security management and evaluation" of the higher vocational group of the 2018 Jiangsu Vocational College skills competition
- What books can greatly improve programming ideas and abilities?
- Multidisciplinary integration
猜你喜欢
随机推荐
Test of transform parameters of impdp
什么情况下考虑分库分表
Learning records on July 4, 2022
Use of completable future
Can 7-day zero foundation prove HCIA? Huawei certification system learning path sharing
一文带你了解静态路由的特点、目的及配置基本功能示例
剑指offer-高质量的代码
偏执的非合格公司
Unity3d learning notes
Stack and queue-p79-10 [2014 unified examination real question]
2018年江苏省职业院校技能大赛高职组“信息安全管理与评估”赛项任务书第二阶段答案
常用函数detect_image/predict
Big coffee gathering | nextarch foundation cloud development meetup is coming
MySQL binlog related commands
Get the city according to IP
分布式id解决方案
品牌·咨询标准化
Matlab tips (30) nonlinear fitting lsqcurefit
How can gyms improve their competitiveness?
SVN version management in use replacement release and connection reset