最近项目在使用mpvue开发微信商城小程序和H5,不得不说美团点评的这款基于Vue的框架同时开发小程序和H5确实是还算好用的,基本上一套代码可以同时兼容微信小程序和H5页面,当然在一些特殊的地方还是需要做区分兼容的。需要从头开始看的可以看看这篇博客https://blog.csdn.net/Aimee1608/article/details/81084553。
在做到购物车和收藏列表的时候,由于客户大多用苹果手机,所以习惯于向左滑动删除,需要做一个向左滑动出现删除的功能,如图:
之前做移动端,这个左滑删除在安卓机里面的体验貌似不是很好,不过既然客户提需求了,那也得完成咯,查看了一下mpvue的文档,发现有支持的滑动事件可以直接使用,话不多说,上代码,在.vue文件的template内容,也就是html代码:
<template>
<div class="showcart counter-warp">
<div class="userfor_show">
<div v-if="user_cart_data.length>0">
<div class="cart_header" :class="{more_height:!this.appisH5()}">
<ul class="cart_shop_content">
<li class="cart_shop_list" v-for="(item, index) in user_cart_data" :key="index"
@touchstart="touchStart($event)" @touchend="touchEnd($event,index)" :data-type="item.silder" @click="recover(index)">
<div class="chooseBtn" @click="turn_chose_type(index)">
<img v-if=