<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/mui.min.css">
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<link rel="stylesheet" type="text/css" href="css/shoppingcart.css"/>
<style>.sc_list{
width: 100%;
margin-bottom: 1.1rem;
}
.mui-draggable,.mui-off-canvas-right,.mui-inner-wrap,.mui-scroll-wrapper{
height: 2.3rem;
}
.mui-off-canvas-right{
width: 1.2rem;
height: 2.3rem;
color: white;
font-size: 0.24rem;
text-align: center;
line-height: 2.3rem;
background: white;
}
.mui-off-canvas-right .mui-scroll-wrapper .mui-scroll .del{
width:1.2rem;
height: 2.3rem;
background: #ff3434;
color: white;
font-size: 0.24rem;
line-height: 2.3rem;
text-align: center;
}
.mui-inner-wrap,.mui-scroll-wrapper .mui-scroll{
width: 100%;
height: 2.3rem;
background: white;
display: flex;
}
.mui-draggable{
position: relative;
margin-bottom: 0.1rem;
}
.mui-draggable .mui-off-canvas-right{
position: absolute;
right: 0;
top: 0;
z-index: 2;
background: red;
}
.mui-scroll-wrapper{
position: static;
}
.mui-inner-wrap .mui-scroll-wrapper .mui-scroll{
display: flex;
display: -webkit-flex;
width: 100%;
background: white;
height: 2.3rem;
padding: 0.3rem 0.28rem 0.3rem 0.28rem;
}
.mui-inner-wrap .mui-scroll-wrapper .mui-scroll .icon_select_left{
width: 0.46rem;
flex-shrink: 0;
-webkit-flex-shrink: 0;
position: relative;
}
.mui-inner-wrap .mui-scroll-wrapper .mui-scroll .icon_select_left span{
position: absolute;
left: 0rem;
top: 0.72rem;
}
.mui-inner-wrap .mui-scroll-wrapper .mui-scroll .sc_img{
width: 1.7rem;
height: 1.7rem;
background: #cecece;
margin-right: 0.2rem;
flex-shrink: 0;
-webkit-flex-shrink: 0;
position: relative;
}
.mui-inner-wrap .mui-scroll-wrapper .mui-scroll .sc_img .icon_sold{
width: 1.2rem;
height: 1.2rem;
background: url(../images/[email protected]) no-repeat;
background-size: 100% 100%;
position: absolute;
z-index: 2;
margin-left: 0.25rem;
margin-top: 0.25rem;
}
.mui-inner-wrap .mui-scroll-wrapper .mui-scroll .sc_img img{
width: 100%;
height: 100%;
}
.mui-inner-wrap .mui-scroll-wrapper .mui-scroll .sc_right{
flex: 1;
-webkit-flex: 1;
position: relative;
}
.sc_title{
width: 4.58rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.28rem;
color: #333333;
line-height: 0.44rem;
}
.sc_fu{
font-size: 0.22rem;
color: #888888;
line-height: 0.34rem;
}
.mui-inner-wrap .mui-scroll-wrapper .mui-scroll .sc_right .sc_right_bottom{
position: absolute;
bottom: 0.08rem;
height: 0.5rem;
line-height: 0.5rem;
width: 100%;
}
.sc_right_bottom .mui-pull-left{
font-size: 0.28rem;
/*font-weight: bold;*/
color: #FB1414;
}
.mui-inner-wrap .mui-scroll-wrapper .mui-scroll .sc_right .sc_right_bottom .mui-pull-right button{
width: 0.5rem;
height: 0.5rem;
border: 1px solid #999999;
border-radius: 0;
float: left;
}
.mui-inner-wrap .mui-scroll-wrapper .mui-scroll .sc_right .sc_right_bottom .mui-pull-right .icon_dishui{
background: url(../images/[email protected]) no-repeat center;
background-size: 0.2rem 0.2rem;
}
.mui-inner-wrap .mui-scroll-wrapper .mui-scroll .sc_right .sc_right_bottom .icon_dishei{
background: url(../images/[email protected]) no-repeat center;
background-size: 0.2rem 0.2rem;
}
.mui-inner-wrap .mui-scroll-wrapper .mui-scroll .sc_right .sc_right_bottom .mui-pull-right .icon_addhui{
background: url(../images/[email protected]) no-repeat center;
background-size: 0.2rem 0.2rem;
}
.mui-inner-wrap .mui-scroll-wrapper .mui-scroll .sc_right .sc_right_bottom .mui-pull-right .icon_addhei{
background: url(../images/[email protected]) no-repeat center;
background-size: 0.2rem 0.2rem;
}
.mui-inner-wrap .mui-scroll-wrapper .mui-scroll .sc_right .sc_right_bottom .mui-pull-right .num{
width: 1.2rem;
display: inline-block;
height: 0.5rem;
border: 1px solid #999999;
text-align: center;
font-size: 0.28rem;
color: #333333;
line-height: 0.48rem;
float: left;
margin: 0 0.06rem;
}</style>
</head>
<body>
<div class="sc_list"><div class="mui-draggable">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="del">
删除
</div>
</div>
</div>
</aside>
<div class="mui-inner-wrap">
<div class=" mui-scroll-wrapper">
<div class="mui-scroll">
<div class="icon_select_left">
<span class="icon_noselect"></span>
<span class="icon_select icon_hid"></span>
</div>
<div class="sc_img">
<img src=""/>
</div>
<div class="sc_right">
<p class="sc_title">最美天气预报员,最美天气预报员,最美天气预报员,</p>
<p class="sc_fu">颜色随机 叶子香型</p>
<div class="sc_right_bottom">
<div class="mui-pull-left">
¥<span>26.00</span>
</div>
<div class="mui-pull-right">
<button class=""></button>
<span class="num">1</span>
<button class="icon_addhei"></button>
</div>
</div>
</div>
</div>
</div>
<!-- off-canvas backdrop -->
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script src="js/shoppingcart.js" type="text/javascript" charset="utf-8"></script>
<script>
mui.init({
swipeBack: false,
});
</script>
</body>
<script>$(function(){
//选择
$('.sc_list').on('click','.mui-scroll .icon_select_left',function(){
$(this).find('.icon_select').toggleClass('icon_hid');
$(this).find('.icon_noselect').toggleClass('icon_hid');
});
$('.sc_img').on('click',function(){
$(this).siblings('.icon_select_left').find('.icon_select').toggleClass('icon_hid');
$(this).siblings('.icon_select_left').find('.icon_noselect').toggleClass('icon_hid');
});
$('.sc_right p').on('click',function(){
$(this).parent('.sc_right').siblings('.icon_select_left').find('.icon_select').toggleClass('icon_hid');
$(this).parent('.sc_right').siblings('.icon_select_left').find('.icon_noselect').toggleClass('icon_hid');
});
$('.sc_right_bottom .mui-pull-left').on('cilck',function(){
$(this).parents('.sc_right').siblings('.icon_select_left').find('.icon_select').toggleClass('icon_hid');
$(this).parents('.sc_right').siblings('.icon_select_left').find('.icon_noselect').toggleClass('icon_hid');
})
//加减
var num;
mui('.sc_list').on('touchstart','button',function(e){
num = parseInt($(this).siblings('.num').text());
if($(this).index()==0&&num>1){
num=num-1;
if(num==1){
$(this).addClass('icon_dishui').removeClass('icon_dishei');
}
$(this).siblings('.num').text(num);
}else if($(this).index()==2){
num=num+1;
$(this).siblings('.num').text(num);
$(this).siblings('button').addClass('icon_dishei').removeClass('icon_dishui');
}
});
//定义减号
for(var i =0;i<$('.sc_list .mui-draggable').length;i++){
if($('.num:eq('+i+')').text()==1){
$('.num:eq('+i+')').siblings('button:eq(0)').addClass('icon_dishui');
}else if($('.num:eq('+i+')').text()>1){
$('.num:eq('+i+')').siblings('button:eq(0)').addClass('icon_dishei');
}
}
//全选
var selectflag=1;
$('.sc_foot .mui-pull-left').on('tap',function(){
$(this).find('.icon_select_div span').toggle();
if(selectflag%2!=0){
$('.icon_select').removeClass('icon_hid');
$('.icon_noselect').addClass('icon_hid');
}else{
$('.icon_select').addClass('icon_hid');
$('.icon_noselect').removeClass('icon_hid');
$('.count_price').text('0.00')
}
selectflag++;
})
//高度
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if(isAndroid){
$('.num').css({
'line-height':'0.58rem'
})
}
var startX,startY,endX,endY,X,Y,wid=0;
$('.sc_list .mui-draggable').on('touchstart',function(e){
// alert('a')
var touch=e.originalEvent.targetTouches[0];
startX=touch.pageX;
startY=touch.pageY;
}).on('touchend',function(e){
var touch = e.originalEvent.changedTouches[0];
endX=touch.pageX;
endY=touch.pageY;
X=endX-startX;
Y=endY-startY;
if(X<-50&&Y<50){
$(this).find('aside').css({
'visibility':'visible'
});
$(this).find('.mui-inner-wrap').animate({
'margin-left':'-1.2rem'
})
$(this).siblings('.mui-draggable').find('aside').css({
'visibility':'hidden'
});
$(this).siblings('.mui-draggable').find('.mui-inner-wrap').animate({
'margin-left':'0'
});
}else if(X>50&&Y<50){
$(this).find('aside').css({
'visibility':'hidden'
});
$(this).find('.mui-inner-wrap').animate({
'margin-left':'0'
})
}
})
$('.mui-scroll').css('color','red');
})
</script>
</html>