微信小程序怎么利用swiper+css实现购物车商品删除功能

这篇文章主要介绍了微信小程序怎么利用swiper+css实现购物车商品删除功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

专注于为中小企业提供成都做网站、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业凯里免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了成百上千企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

要实现的购物车效果如下：

小程序通过bind与catch绑定事件，没有event.stopPropagation()方法。

• bind：不会阻止冒泡事件向上冒泡，

• catch：可以阻止冒泡事件向上冒泡

用touchstart、touchmove、touchend实现滑块效果，无法动态js控制何时冒泡何时阻止冒泡，就会出现用bind时，左右上下滑动乱窜；用catch，商品区域只能左右滑动，无法上下滚动

而小程序提供的swiper通过css就可以实现删除滑块效果，同时不影响页面的正常滚动。具体如下

  
      
      
        
          
            
          
          
            删除
          
        
      
  

 /*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实现购物车商品删除功能”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!