vue中使用vue-touch

最新推荐文章于 2024-05-12 09:30:27 发布

前端小凯

最新推荐文章于 2024-05-12 09:30:27 发布

阅读量6k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_43235503/article/details/128196112

版权

如果想让vue能够监听移动端的上滑、下滑、左滑、点击等等动作，可以使用vue-touch插件。vue-touch的使用十分简单。

首先在vue项目中安装vue-touch

npm install vue-touch@next --save

然后在main.js或mian.ts上导入并使用：

import VueTouch from "vue-touch";
Vue.use(VueTouch, {name: "v-touch"});

使用<v-touch></v-touch>来包裹要使用vue-touch的元素

 <v-touch @swipeleft="nowLeft()" @swiperight="nowRight()">
        <ul class="list">
          <li v-for="(item, index) in move_nowData" :key="item.id">
            <div>
              <img :src="item.cover" />
            </div>
            <h3>{{ item.title }}</h3>
            <p>{{ item.rate }}</p>
          </li>
        </ul>
</v-touch>

使用@touch.js的事件名="函数名( )"来使用vue-touch

methods: {
    nowLeft() {
      // 获取list
      let now = document.getElementsByClassName("list")[0];
      now.style.transform += "translateX(-30rem)";
      now.style.transition = "all ease 0.5s";
    },
    nowRight() {
      // 获取list
      let now = document.getElementsByClassName("list")[0];
      now.style.transform += "translateX(30rem)";
      now.style.transition = "all ease 0.5s";
      },
  },