微信小程序购物车 滑动删除效果

往左边滑动出现删除按钮， 只对当前滑动的对象 *** 作

<view class="shop-list">

    <view class="check-all-box" bindtap="onCheckAll">

      <view>

        <label class="check-around8"  bindtap="selected" data-lor='1'>

          <radio checked="{{allSelected?true:false}}" color="#000"></radio>

          <text class="check-all">{{checkAllText}}全选</text>

        </label> 

      </view>

    </view>

    <view class="item-box  {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for="{{list}}" wx:key="{{index}}">

      <view class="item">

        <view class="check-around-box" data-id="{{item.id}}" >

     空早吵       <label bindtap="selected" data-id="{{item.id}}" data-isSelect="{{item.isSelect}}">

              <radio checked="{{item.isSelect>0?true:false}}" color="#000"></radio>

            </label>   

          </view>

        <view class="item-img-box">

          <image class="item-img" src="{{item.thumbUrl}}" />

        </view>

        <view class="item-info-box">

          <text class="item-title">{{item.title}}</text>

          <text class="item-spec">{{item.spec}}</text>

          <text class="item-price">¥{{item.price}}</text>

          <view class="num-box">

            <view class="num-desc" data-id="{{item.id}}" data-total="{{item.total}}" bindtap="reduce">-</view>

     斗侍       <input class="item-input" type="number"disabled="boolean" value="{{item.total}}" />

            <view class="num-plus" data-id="{{item.id}}" data-total="{{item.total}}" bindtap="plus">+</view>

          </view>

        </view>睁神

      </view>

      <view class="remove" data-id="{{item.id}}" bindtap="remove">{{remove}}删除</view>

    </view>

  </view>

page{

  background-color: #f8f8f8

}

.shop-list {

  display: flex

  flex-direction: column

  margin-top: 30rpx

  padding-bottom:120rpx

}

.check-all-box {

  display: flex

  align-items: center

  padding: 30rpx

  background-color: #fff

}

.check-all-box  .check-all {

  margin-left: 20rpx

  font-size: 30rpx

}

.check-around {

  width: 35rpx

  height: 35rpx

  margin-right:20rpx

  border-radius: 50rpx

  border: 1rpx solid #f8f8f8

}

.check-active {

  width: 35rpx

  height: 35rpx

  border-radius: 50rpx

  background-color: #999999

}

.item-box {

  margin-bottom: 20rpx

  position: relative

  z-index: 99

  font-size: 14px

  display: flex

  justify-content: space-between

  border-bottom:1px solid #ccc

  width: 100%

  overflow: hidden

}

.item {

  display: flex

  align-items: center

  padding: 30rpx

  background-color: #fff

  position: relative

  z-index: 99

  width: 100%

  margin-right:0

  -webkit-transition: all 0.4s

  transition: all 0.4s

  -webkit-transform: translateX(90px)

  transform: translateX(90px)

  margin-left: -90px

}

.item .item-img {

  width: 180rpx

  height: 180rpx

  border-radius: 5rpx

  border: 1rpx solid #eaeaea

}

.item .item-info-box {

  display: flex

  flex-direction: column

  justify-content: space-between

  width: 420rpx

  height: 180rpx

  margin-left:20rpx

}

.item-info-box .item-title {

  font-size: 30rpx

  white-space: nowrap

  text-overflow: ellipsis

  overflow: hidden

  word-break: break-all

}

.item-info-box .item-spec {

  color: #676767

  margin-top: 15rpx

  text-overflow: -o-ellipsis-lastline

  overflow: hidden

  text-overflow: ellipsis

  display: -webkit-box

  -webkit-line-clamp: 2

  line-clamp: 2

  -webkit-box-orient: vertical

}

.item-info-box .item-price {

  display: flex

  margin-top: 15rpx

}

.item-info-box .num-box {

  display: flex

  align-items: center

  justify-content: flex-end

  font-size: 30rpx

}

.num-box .num-desc {

  padding: 0 10rpx

  color: #999

  border: 4rpx solid #999

}

.num-box .item-input {

  width: 80rpx

}

.item-input {

  text-align: center

}

.num-box .num-plus {

  padding: 0 10rpx

  color: #fff

  background-color: #000

  border: 4rpx solid #000

}

.remove {

  background-color: orangered

  width: 90px

  display: flex

  flex-direction: column

  align-items: center

  justify-content: center

  color: #fff

  -webkit-transform: translateX(90px)

  transform: translateX(90px)

  -webkit-transition: all 0.4s

  transition: all 0.4s

}

.touch-move-active .item,

.touch-move-active .remove {

  -webkit-transform: translateX(0)

  transform: translateX(0)

}

var app = getApp()

Page({

  data: {

    list: [

      {

        id: '1',

        thumbUrl: 'https://cdnimg.pfhoo.com/Pro/s/20180404/8a22565d-9bb3-4b87-bf58-00e9db0e2d28.jpg',

        title: '大英博物馆珠宝首饰系列“OK”首饰',

        spec: 'K黄',

        price: '199.10',

        num: 1,

        total: 10

      }, {

        id: '2',

        thumbUrl: 'https://cdnimg.pfhoo.com/Pro/s/20180404/8a22565d-9bb3-4b87-bf58-00e9db0e2d28.jpg',

        title: '大英博物馆珠宝首饰系列“OK”首饰',

        spec: 'K黄',

        price: '899.20',

        num: 1,

        total: 1

      }

    ],

    startX: 0, //开始坐标

    startY: 0

  },

  onLoad: function () {

  },

  //手指触摸动作开始 记录起点X坐标

  touchstart: function (e) {

    //开始触摸时 重置所有删除

    this.data.list.forEach(function (v, i) {

      if (v.isTouchMove)//只 *** 作为true的

        v.isTouchMove = false

    })

    this.setData({

      startX: e.changedTouches[0].clientX,

      startY: e.changedTouches[0].clientY,

      list: this.data.list

    })

  },

  //滑动事件处理

  touchmove: function (e) {

    var that = this,

      index = e.currentTarget.dataset.index,//当前索引

      startX = that.data.startX,//开始X坐标

      startY = that.data.startY,//开始Y坐标

      touchMoveX = e.changedTouches[0].clientX,//滑动变化坐标

      touchMoveY = e.changedTouches[0].clientY,//滑动变化坐标

      //获取滑动角度

      angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY })

    that.data.list.forEach(function (v, i) {

      v.isTouchMove = false

      //滑动超过30度角 return

      if (Math.abs(angle) >30) return

      if (i == index) {

        if (touchMoveX >startX) //右滑

          v.isTouchMove = false

        else //左滑

          v.isTouchMove = true

      }

    })

    //更新数据

    that.setData({

      list: that.data.list

    })

  },

  /**

  * 计算滑动角度

  * @param {Object} start 起点坐标

  * @param {Object} end 终点坐标

  */

  angle: function (start, end) {

    var _X = end.X - start.X,

      _Y = end.Y - start.Y

    //返回角度 /Math.atan()返回数字的反正切值

    return 360 * Math.atan(_Y / _X) / (2 * Math.PI)

  },

  //删除事件

  remove: function (e) {

    let that =this

    let index = e.currentTarget.dataset.index

    let list = that.data.list

    wx.showModal({

      title: 'w温馨提示！',

      content: '你确认删除吗？',

      success: function (res) {

        if (res.confirm) {

          console.log('444')

          list.splice(index, 1)

          that.setData({

            list:list

          })

        } else{

          console.log('用户点击取消')

        }

      }

    })

  }

})

温故而知新，本文为一时兴起写出，如有错误还请指正

本文后台基于SpringBoot2.5.6编写，前端基于Vue2 + axios和微信小程序JS版分别编写进行联调测试，用于理解前后端分离式开发的交互流程，如果没用过axios可以点我看之前的帖子

如果你没有学过SpringBoot也不要紧，把他看做成SpringMVC即可，写法完全一致（其实我不说你也发现不了）

本文主要讲前后端交互流程，力求帮助新人快速入门前后端分离式开发，不会讲关于数胡环境搭建部分的内容

在文章开头快速的过一遍SpringMVC接收参数的几种方式，一定要记住这几种方式，看不懂或不理解都没关系，后续会结合前端代码过一遍，这里就不过多解释了，直接上代码

细心的人应该留意到了，最后使用变量接收参数的时候只接收了 username 这一个值，并没有接收 password ，作为扩展在这里解释一下， 不看也可以，看了不理解也没关系，知道这个事儿就够了，以后接触多了就理解了

如果请求参数放在了请求体中，只有参数列表第一个变量能接收到值，这里需要站在Servlet的角度来看：

可以看到请求体内容是存到了 InputStream 输入流对象中，想要知道请求体中的内容是什么必须读流中的数据，读取到数据后会将值给第一个变量，而流中的数据读取一次之后就没了，当第二个变量读流时发现流已经被关闭了，自然就接收不到

SpringMVC回顾到此为止，只需要记住那三种方式即可，在前后端交互之前先在Controller中写个测试接口

这个接口对应的是GET类型的请求，这里直接在浏览器地址栏访问测试一下：

这里推荐一个Chrome浏览器的插件 JSONView ，它可以对浏览器显示的JSON数据进行格式化显示，推荐的同时也提个醒，安装需谨慎，如果JSON数据量太大的话页面会很卡

之前已经写好一个GET请求的测试接口了，这里就在前端写代码访问一下试试看

代码已经写完了，接下来打开页面试一下能不能调通：州凳

可以看到请求代码报错了，查看报错信息找到重点关键词 CORS ，表示该请求属于 跨域请求

什么是跨域请求？跨域请求主要体现在跨域两个字上，当发起请求的客户端和接收请求的服务端他们的【协议、域名、端口号】有任意一项不一致的情况都属于跨域请求，拿刚刚访问的地址举例，VUE页面运行在9000端口上，后台接口运行在8080端口上，端口号没有对上所以该请求为跨域请求

如果在调试的时候仔细一点就会发现，虽然前端提示请求报错了，但是后端还是接收到请求了，那为什么会报错呢？是因为后端返回数据后，浏览器接收到响应结果发现该请求跨域，然后给我们提示错误信息，也就是说问题在浏览器这里

怎样才能让浏览器允许该请求呢？我们需要在后端动点手脚，在返回结果的时候设置允许前端访问即可

首先配置一个过滤器，配置过滤器有很多种实现的方法，我这里是实现Filter接口

过滤器创建完成了，回来看前端提示的报错信息为 Access-Control-Allow-Origin ，意思是允许访问的地址中并不包含当前VUE的地址，那么我们就在响应结果时将VUE的地址追加上

添加完成后重启项目后台就会发现请求已经成功并且拿到了返回值

再次册毕旅进行测试，将后台的GetMapping修改为PostMapping，修改前端请求代码后重新发起请求进行测试

可以看到POST请求还是提示跨域请求，对应的错误信息则是 Access-Control-Allow-Headers ，也就是说请求头中包含了不被允许的信息，这里图省事儿用 * 通配符把所有请求头都放行

这样处理之后，请求就可以正常访问啦

路径占位参数，就是将参数作为请求路径的一部分，例如你现在正在看的这篇博客使用的就是路径占位传参

这种传参方法很简单，就不细讲了，可以效仿他这种方法写个测试案例

这里需要注意区分【路径占位传参】和【路径传参】两个概念，不要记混

什么是路径传参？发起一个请求 http://localhost:8080/index?a=1&b=2 ，在路径 ? 后面的都属于路径传参，路径传参就是将参数以明文方式拼接在请求地址后面

路径传参使用【正常接收参数】中的实例代码即可接收到值

除了自己手动拼接请求参数之外，axios在config中提供了params属性，也可以实现该功能

表单类型参数，就是通过form表单提交的参数，通常用在例如HTML、JSP页面的form标签上，但如果是前后端分离的话就不能使用form表单提交了，这里可以手动创建表单对象进行传值

需要注意，GET请求一般只用于路径传参，其他类型传参需要使用POST或其他类型的请求

表单类型参数也是【正常接收参数】中的实例代码接收值

小程序删除了FormData对象，不能发起表单类型参数的请求，如果非要写的话可以试着使用 wx.uploadFile 实现，这里就不尝试了

请求体传参，是在发起请求时将参数放在请求体中

表单类型参数需要使用上面【请求体接收参数】中的实例代码接收值

axios如果发起的为POST类型请求，默认会将参数放在请求体中，这里直接写即可

小程序代码也是一样的，当发起的时POST类型的请求时，默认会把参数放在请求体中

在实际开发中大概率不用写前端代码，只负责编写后台接口，但怎样才能知道前端请求是什么类型参数？

关于这点可以通过浏览器开发者工具的【网络】面板可以看出来，网络面板打开时会录制网页发起的所有请求

路径占位传参就不解释了，没啥好说的，这里介绍一下路径传参、表单传参和请求体传参

编写好路径传参的请求代码后切换到网络面板，点击发起请求：

编写好请求体传参的请求代码后切换到网络面板，点击发起请求：

编写好表单类型传参的请求代码后切换到网络面板，点击发起请求：

掌握了前后端交互的流程就可以正常开发网站了，这里推荐后端返回一套规定好的模板数据，否则某些情况可能会比较难处理，例如这个查询用户列表的接口：

该接口乍一看没毛病，拿到用户列表数据后返回给前端用于渲染，合情合理，可是如果后端业务逻辑有BUG可能会导致前端接收到的结果为空，这种情况下前端就需要判断，如果接收到的值为空，就提示请求出错，问题貌似已经解决，但是如果表中本来就没有任何数据的话有应该怎么处理

上述的就是最常见的一种比较头疼的情况，所以针对这种情况最好指定一套标准的返回模板进行处理

根据刚刚的举例来看，返回结果中应该有一个标识来判断该请求是否执行成功，如果执行失败的话还应该返回失败原因，响应给前端的数据会被转换为JSON数据，使用Map集合来返回最合适不过了

在后台接口编写完成后，一般情况下我们都需要进行测试，GET请求还好，浏览器直接就访问呢了，如果是POST请求还要去写前端代码就很烦，这里介绍一款接口调试工具ApiPost

你可能没听过ApiPost，但是你大概率听说过Postman，他们的用法几乎一致，且ApiPost是国人开发的免费的接口调试工具，界面中文很友好

这里也可以看出来，form表单传参其实也算在了请求体里面，只不过使用的是 multipart/form-data 类型的参数而已，而之前提到的请求体传参对应的就是 application/json

---