当前位置:网站首页>Select the product attribute pop-up box to pop up the animation effect from the bottom
Select the product attribute pop-up box to pop up the animation effect from the bottom
2022-07-07 07:09:00 【To be a woman of light】
The above is when we choose products , An animation effect modal pop-up will appear , The relevant code is implemented as follows :
Code of view layer :
<!-- The specification selection pops up at the bottom -->
<view class="animation" wx:if="{
{showView}}">
<!-- The content box -->
<view class="animation_content">
<!-- Upper part -->
<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;"> Bangdou {
{goods_detail.points_goods_points}} + <text style="font-size: 25rpx;"> cash :{
{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;"> stock :{
{goods_detail.points_goods_storage}}</view>
</view>
</view>
<!-- Lower part -->
<view class="animation_content_bottom">
<view style="width: 20%;"> Purchase quantity </view>
<view class="nums">
<button bindtap="cut"> - </button>
<view>{
{num}}</view>
<button bindtap="addition"> + </button>
</view>
<view>
</view>
</view>
<!-- Exchange now -->
<button style="background: #fe244b;color: #fff;font-size: 28rpx;" bindtap="buyNow"> Exchange now </button>
</view>
</view>
css Related styles
/* Bottom pop-up animation */
.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;}
边栏推荐
- 企業如何進行數據治理?分享數據治理4個方面的經驗總結
- Circulating tumor cells - here comes abnova's solution
- Special behavior of main function in import statement
- 服装门店如何盈利?
- 带你刷(牛客网)C语言百题(第一天)
- Abnova membrane protein lipoprotein technology and category display
- Basic introduction of JWT
- 联合索引ABC的几种索引利用情况
- . Net core accesses uncommon static file types (MIME types)
- Common function detect_ image/predict
猜你喜欢
随机推荐
Matlab tips (29) polynomial fitting plotfit
毕业设计游戏商城
华为机试题素数伴侣
Please answer the questions about database data transfer
LC 面试题 02.07. 链表相交 & LC142. 环形链表II
Comment les entreprises gèrent - elles les données? Partager les leçons tirées des quatre aspects de la gouvernance des données
2018年江苏省职业院校技能大赛高职组“信息安全管理与评估”赛项任务书第二阶段答案
MySQL view bin log and recover data
健身房如何提高竞争力?
请教一个问题,flink oracle cdc,读取一个没有更新操作的表,隔十几秒就重复读取全量数据
Tool class: object to map hump to underline underline hump
选择商品属性弹框从底部弹出动画效果
SolidWorks GB Library (steel profile library, including aluminum profile, aluminum tube and other structures) installation and use tutorial (generating aluminum profile as an example)
Can 7-day zero foundation prove HCIA? Huawei certification system learning path sharing
Network foundation - header, encapsulation and unpacking
Matlab tips (30) nonlinear fitting lsqcurefit
Leetcode t1165: log analysis
$refs:组件中获取元素对象或者子组件实例:
多个kubernetes集群如何实现共享同一个存储
Libcurl returns curlcode description