欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-11-14 17:35:47
要实现的购物车效果如下: 小程序通过bind与catch绑定事件,没有event.stoppropagation()方法。 bind:不会阻止冒泡事件向上冒...

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

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

小程序通过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;
   }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。