cart.vue 881 B

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. <template>
  2. <view class="demo">
  3. <view class="red" @touchstart="onChange" @touchmove="onCha" :style="{right: `${left}rpx`}"></view>
  4. </view>
  5. </template>
  6. <script>
  7. export default {
  8. name: "cart",
  9. data() {
  10. return {
  11. oldClientX: 100,
  12. newClientX: 0,
  13. left: 0,
  14. }
  15. },
  16. methods: {
  17. onChange(e) {
  18. this.oldClientX = e.touches[0].clientX;
  19. },
  20. onCha() {
  21. this.newClientX = this.newClientX +10;
  22. this.left = this.newClientX;
  23. if (this.left >= 350) return;
  24. }
  25. }
  26. }
  27. </script>
  28. <style scoped lang="scss">
  29. .demo {
  30. width: 100%;
  31. height: 100rpx;
  32. background-color: blue;
  33. }
  34. .red {
  35. width: 1000rpx;
  36. height: 100rpx;
  37. background-color: red;
  38. position: relative;
  39. right: 0;
  40. }
  41. </style>