cart.vue 974 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  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. console.log(this.oldClientX);
  20. },
  21. onCha(e) {
  22. this.newClientX = this.newClientX +10;
  23. this.left = this.newClientX;
  24. if (this.left >= 350) return;
  25. console.log(this.newClientX);
  26. }
  27. }
  28. }
  29. </script>
  30. <style scoped lang="scss">
  31. .demo {
  32. width: 100%;
  33. height: 100rpx;
  34. background-color: blue;
  35. }
  36. .red {
  37. width: 1000rpx;
  38. height: 100rpx;
  39. background-color: red;
  40. position: relative;
  41. right: 0;
  42. }
  43. </style>