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

2020-03-21 16:00:55

字体：大中小

来源：转载

供稿：网友

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

微信小程序,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;   }

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

上一篇：mpvue微信小程序多列选择器用法之省份城市选择的实现

下一篇：微信小程序性能优化之checkSession的使用