一弯拱桥对映着一弯晓月，桥下流水波光粼粼，昙花一般的月，在我眼中异香腾风，秀色媚景。夜的静谧是风景，昼的明媚是风景。江花胜火红，寒山伤心碧，空伫玉阶白，西风残照黄。处处皆风景，处处皆绝妙风景。
要实现的购物车效果如下：
小程序通过bind与catch绑定事件，没有event.stopPropagation()方法。
- bind：不会阻止冒泡事件向上冒泡，
- catch：可以阻止冒泡事件向上冒泡
用touchstart、touchmove、touchend实现滑块效果，无法动态js控制何时冒泡何时阻止冒泡，就会出现用bind时，左右上下滑动乱窜；用catch，商品区域只能左右滑动，无法上下滚动
而小程序提供的swiper通过css就可以实现删除滑块效果，同时不影响页面的正常滚动。具体如下
<!--html-->
<view class="goodsList ">
<!--商品-->
<view class="goodsItem">
<swiper previous-margin = "610rpx">
<swiper-item class="goodsMsg">
<!--xxx商品信息区域xxx-->
</swiper-item>
<swiper-item class="delBtn">
<view>删除</view>
</swiper-item>
</swiper>
</view>
</view>
/*css*/
.goodsItem swiper{
height:230rpx;
}
.goodsItem .goodsMsg{
height:170rpx;
padding:30rpx 0rpx;
width:750rpx!important;
background:#fff;
margin-left:-610rpx;
}
.goodsItem .goodsMsg .delBtn{
color:#fff;
line-height:230rpx;
font-size:30rpx;
text-align: center;
display:flex;
display:-webkit-flex;
justify-content: flex-end;
}
.goodsItem .delBtn view{
width:140rpx;
background:#ff4300;
}
以上就是微信小程序利用swiper+css实现购物车商品删除功能。成功者都是想尽一切办法往前走，哪怕是半步。更多关于微信小程序利用swiper+css实现购物车商品删除功能请关注haodaima.com其它相关文章！
