微信小程序 批量取消收藏 可类似 购物车的 批量删除
2019-02-28 本文已影响1人
郭的妻
wxss
.header {
width: 100%;
padding: 0rpx 24rpx;
height: 80rpx;
color: #333;
font-size: 30rpx;
}
/* 取消收藏 */
.bottom{
width: 100%;
height: 100rpx;
background-color: #fff;
position: fixed;
left: 0rpx;
bottom: 0rpx;
}
.bottom .right {
width:220rpx;
height:60rpx;
line-height:60rpx;
background-color:#027EE7;
color:#fff;
font-size:26rpx;
border-radius:10rpx;
margin:0 auto;
text-align:center;
}
/*列表*/
.hotel_list{
width: 100%;
background-color: #ffff;
border-bottom: 2rpx solid #f1f1f1;
}
.hotel_list .list_cons{
width:100%;
}
.hotel_list .icon_none{
width: 30rpx;
height: 30rpx;
border: 1rpx solid #d6d6d6;
border-radius: 50%;
margin-right: 14rpx;
}
.flex_center{
padding:24rpx;
}
.flex_between{
display: flex;
display: -webkit-flex;
justify-content: space-between;
align-items: center;
width:100%;
}
.flex_start{
display: flex;
display: -webkit-flex;
justify-content: flex-start;
align-items: center;
}
.flex_end{
display: flex;
display: -webkit-flex;
justify-content: flex-end;
align-items: center;
margin:0 auto;
}
/* 左边图片内容 */
.kecheng_left{
width:36%;
height:170rpx;
float:left;
}
.kecheng_left image{
width:100%;
height: 100%;
border-radius:6rpx;
}
/* 右边文字内容 */
.kecheng_right{
width:56%;
height: 170rpx;
float:left;
padding:9rpx 0rpx;
margin-left:4%;
}
.mingcheng{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
height:30rpx;
line-height:30rpx;
font-size:30rpx;
color: #333333;
}
.comments{
width:100%;
font-size:26rpx;
height:30rpx;
line-height:30rpx;
color:#999999;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
margin-top: 12rpx;
}
.money{
width:100%;
font-size:28rpx;
color:#f21a31;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
height:30rpx;
line-height:30rpx;
margin-top: 12rpx;
}
/* 门店收藏 */
.swiper-tab{
width: 100%;
border-bottom: 2rpx solid #F3F4F6;
text-align: center;
height: 100rpx;
line-height: 100rpx;
}
.swiper-tab-item{
display: inline-block;
width: 50%;
font-size: 28rpx;
color:#333333;
}
.active{
color:#0D82E8 !important;
border-bottom:3rpx solid #0D82E8;
height:93rpx;
line-height:94rpx;
}
.style{
display: none;
}
.block{
display: block;
}
wxml
<view class='header flex_end'>
<view class='flex_center' bindtap='bianjie'>
{{bianjie}}
</view>
</view>
<!-- 对应的内容 -->
<view class='hotel_list flex_center' wx:for="{{items}}" wx:key="items" wx:for-item="i" >
<view class='list_cons flex_start'>
<!-- 左边选择删除按钮 -->
<checkbox-group class="style {{checkbox==true?' block':'style'}}" style="margin-left:-1%;" data-index="{{index}}" bindtap='management'>
<checkbox checked='{{i.checked}}'></checkbox>
</checkbox-group>
<!-- 左边图片内容 -->
<view style="width:100%;" data-id="{{index}}" bindtap='select'>
<view class="kecheng_left">
<image src="{{i.url}}"></image>
</view>
<view class='right kecheng_right'>
<view class="mingcheng">
{{i.techer_name}}
</view>
<view class="comments">
{{i.pinglun}} / {{i.zan}} / {{i.yishou}}
</view>
<view class="money">{{i.kejjie}}</view>
</view>
</view>
</view>
</view>
<!-- 选择删除 -->
<view class='bottom {{checkbox==true?" block ":"style"}}'>
<view class='right' bindtap='deleteitem'>
取消收藏
</view>
</view>