移动端底部基于mui的加入购物车相关的事件

Posted 2022-09-04 progress-

header头部样式文件导入

<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
<link rel="stylesheet" href="css/mui.min.css">

<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.js"></script>

html 内容部分

<!-- 加入购物车的功能 -->
<div id="popover" class="mui-popover">
<div class="xuanze">

<img src="images/123456.jpg" >
<div class="jiage" >
<p >这里是关于产品的一些相关介绍</p>
<span style="color:#F1B728 ; font-size:1rem;">售价：￥2000.00</span>
<span style="text-decoration: line-through; font-size: 0.625rem;" >￥3000.00</span>
</div>
</div>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<div class="box-type leixing">
<div class="type">颜色</div>
<span>红色</span>
<span>蓝色</span>
<span>粉色</span>
<span>灰色</span>
<span>黑色</span>

<div class="type" >尺寸</div>
<div class="chicun" >
<span>X</span>
<span>XX</span>
<span>XL</span>
<span>M</span>
</div>
</div>
</li>

<li class="mui-table-view-cell">
<div class="box-num">
<div>数量：</div>
<div class="anniu" >
<div class="mui-numbox" data-numbox-step=‘1‘ data-numbox-min=‘1‘ data-numbox-max=‘10000‘>
<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
<input class="mui-numbox-input" type="number" />
<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
</div>
</div>
</div>
</li>
</ul>
</div>

 

CSS 部分样式

/* 加入购物车按钮的颜色 */
.mui-btn-primary
background-color: #FFFFFF;

/* 组件自带的底部小箭头,删除 */
.mui-popover .mui-popover-arrow.mui-bottom
display: none;

/* 弹出框的大小 */
#popover
width: 100%;
top: 15.85rem!important;
left: 0!important;
position: fixed;
bottom: 0;

.mui-popover .mui-table-view
/* max-height: 500px!important; */
overflow-y: auto;

/* 弹出框的位置 */

.cart .add
float: left;
width:35%;
height: 100%;
font-size: 1rem;
text-align: center;
color: #FFFFFF;
border: 0;
background-color: #FFC21F;

.cart .buy
float: left;
width:35%;
height: 100%;
font-size: 1rem;
color: #FFFFFF;
background-color: #FF384F;
text-align: center;
border: 0;
border-radius:0;

/* 选择商品相关信息 */
/* .add-car
width: 100%;
height: 25rem;
overflow: auto;
position: fixed;
bottom: 0;
z-index: 55;
*/
.active
width: 100%;
height: 25rem;
overflow: auto;
position: fixed;
bottom: 0;
z-index: 55;
display: block;
background-color: #FFFFFF;
padding: 1.25rem;

.container
position: relative;
background-color: #FFFFFF;

padding-bottom: 2.1875rem;

display: none;

/* 头部价格区域 */
.box-ders
/* display: flex;
justify-content: flex-start; */
/* position: relative; */

.xuanze
/* position: fixed; */
width:100%;
height: 6.25rem;
border: 0.0625rem solid #eee;
border-radius: 0.625rem;
display: flex;
justify-content: flex-start;
/* z-index: 99999; */

.xuanze img
position: relative;
top:-1.25rem;
left: 0.9375rem;
width:30%;
height: 100%;
border-radius: 0.625rem;

.xuanze .jiage
width:12.5rem ;
margin-top: 0.3125rem;
margin-left:1.875rem;

/* .jiage
position: absolute;
top:0.3125rem;
left: 6.25rem;
*/
.jiage p
color: #000000;

/* 商品类型 */
.mui-table-view-cell
padding: 0.3125rem 0.9375rem;

.box-type .type
margin: 0.3125rem 0;

.mui-table-view-cell .box-type span
display: inline-block;
width:7.5rem;
height: 1.5625rem;
text-align: center;
border-radius: 0.3125rem;
color: #000000;
border: 0.0625rem solid #ccc;
margin: 0.3125rem 0.625rem;

.type-css
color: white;
background-color:red ;

/* 数量区域 */
.box-num
padding:0.625rem 0 2.5rem;

.box-num p
font-size: 1.25rem;
font-weight: 400;

.mui-numbox
width: 6.25rem;
height: 1.5625rem;
padding: 0 1.875rem;
margin-top: 0.625rem;
border-radius: 0.9375rem;

jquery 内容

<script type="text/javascript">

// 点击收藏
var toggle = true;
$(".imgclick").click(function()
if (toggle)
$(".imgclick").attr("src", "images/1111.png")  //空心的图片
toggle = false;
else
$(".imgclick").attr("src", "images/2222.png")//实心的图片
toggle = true;

);

// 加入购物车
$(‘#add-cart‘).on(‘tap‘,function()
$(‘#jiu‘).css(‘opacity‘, ‘0.5‘)
$(‘.container‘).attr(‘class‘,‘active‘)
mui.toast(‘添加商品成功‘);
)

//点击每个商品类型修改样式
$(‘.box-type‘).on(‘tap‘,‘p‘,function()
$(this).attr(‘class‘,‘type-css‘)
$(this).siblings(‘p‘).attr(‘class‘,‘‘)

)
//点击确认按钮，
$(‘#button‘).on(‘tap‘,function()
$(‘#jiu‘).css(‘opacity‘, ‘1‘)
$(‘.active‘).attr(‘class‘,‘container‘)
mui.toast(‘添加商品成功‘);
)

//点击取消按钮
$(‘.mui-icon-close‘).on(‘tap‘,function()
$(‘#jiu‘).css(‘opacity‘, ‘1‘)
$(‘.active‘).attr(‘class‘,‘container‘)
)
// 点击商品类型、
$(‘.leixing‘).on(‘tap‘,‘span‘,function()
$(this).attr(‘class‘,‘type-css‘)
$(this).siblings(‘span‘).attr(‘class‘,‘‘)
if($(this).hasClass(‘type-css‘))
$(this).css(‘color‘:‘white‘)
$(this).siblings(‘span‘).css(‘color‘:‘#000000‘)

)

</script>

 

补充说明：

很大一部分内容都是来自广大聪明的网友，我只是根据自己的实际需求进行相关的修改，希望对大家有所帮助，欢迎提出修改