微信小程序之一个超级简单的基础滑动实现~

最新推荐文章于 2024-05-31 13:44:50 发布

电烤牛上脑

最新推荐文章于 2024-05-31 13:44:50 发布

阅读量586

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_56396386/article/details/123623616

版权

本文介绍了微信小程序中实现基础滑动操作的简单方法，适合初学者了解和实践。

摘要由CSDN通过智能技术生成

微信小程序之一个超级简单的基础滑动实现~

<template>
  <view class="body">
    <view>当前显示页数：{
  { pageNum }}</view>
    <view
      class="swip"
      @touchstart="touchstart"
      @touchmove="touchMove"
      @touchend="touchEnd"
    >
      滑动内容
    </view>
  </view>
</template>

<script>
import { AtFlex, AtFlexItem, AtInput } from "taro-ui-vue3";
import "./introduce.scss";

export default {
  data() {
    return {
      pageNum: 0,
      moveFlag: true, // 判断执行滑动操作
      touchDot: null,
      touchMove: null,
      animation1: null,
      animation2: null,
    };
  },
  created() {},
  methods: {
    touchstart(e) {
      console.log(e);
      this.touchDot = e.touches[0].pageX;
      this.moveFlag = true;
    },
    touchMove(e) {
      this.touchMove = e.touches[0].pageX;