另一个vue-scroll-to的例子

<template>
  <div class="m-3">
    <ul class="menu">
      <li
        v-for="(item, index) in videoList"
        :key="index"
        v-scroll-to="{ element: '#v' + index, offset: -20 }"
      >
        {{ item.title }}
      </li>
    </ul>

    <div class="top" style="display: inline-block; margin-left: 220px;">
      <el-card
        v-for="(item, index) in videoList"
        :key="index"
        class="mb-4"
        shadow="never"
        :id="'v' + index"
      >
        <div slot="header">{{ item.title }}</div>
        <video controls="controls" width="1280" :src="item.url">
          您的浏览器不支持 HTML5 video 标签。
        </video>
      </el-card>
    </div>
  </div>
</template>
 
<script>
import Vue from "vue";
import VueScrollTo from "vue-scrollto";

Vue.use(VueScrollTo, options);

let options = {
  container: "body", //滚动的容器
  duration: 500, //滚动时间
  easing: "ease", //缓动类型
  offset: 0, //滚动时应应用的偏移量。此选项接受回调函数
  force: true, //是否应执行滚动
  cancelable: true,
  onStart: false,
  onDone: false,
  onCancel: false,
  x: false,
  y: true
};

export default {
  name: "faq",
  data() {
    return {
      videoList: [
        {
          title: "安装读卡器驱动",
          url:
            "https://meishutest-1256675553.cos.ap-chengdu.myqcloud.com/%E7%88%B1%E6%85%A7%E5%AE%B6APP(%E7%94%9F%E4%BA%A7)/mp4/%E5%AE%89%E8%A3%85%E8%AF%BB%E5%8D%A1%E5%99%A8%E9%A9%B1%E5%8A%A8.mp4"
        },
        {
          title: "录入小区",
          url:
            "https://meishutest-1256675553.cos.ap-chengdu.myqcloud.com/%E7%88%B1%E6%85%A7%E5%AE%B6APP(%E7%94%9F%E4%BA%A7)/mp4/%E5%BD%95%E5%85%A5%E5%B0%8F%E5%8C%BA.mp4"
        },
        {
          title: "单个创建房间",
          url:
            "https://meishutest-1256675553.cos.ap-chengdu.myqcloud.com/%E7%88%B1%E6%85%A7%E5%AE%B6APP(%E7%94%9F%E4%BA%A7)/mp4/%E5%8D%95%E4%B8%AA%E5%88%9B%E5%BB%BA%E6%88%BF%E9%97%B4.mp4"
        },
        {
          title: "批量创建房间",
          url:
            "https://meishutest-1256675553.cos.ap-chengdu.myqcloud.com/%E7%88%B1%E6%85%A7%E5%AE%B6APP(%E7%94%9F%E4%BA%A7)/mp4/%E6%89%B9%E9%87%8F%E5%88%9B%E5%BB%BA%E6%88%BF%E9%97%B4.mp4"
        },
        {
          title: "新增单元",
          url:
            "https://meishutest-1256675553.cos.ap-chengdu.myqcloud.com/%E7%88%B1%E6%85%A7%E5%AE%B6APP(%E7%94%9F%E4%BA%A7)/mp4/%E6%96%B0%E5%A2%9E%E5%8D%95%E5%85%83.mp4"
        },
        {
          title: "新建楼栋",
          url:
            "https://meishutest-1256675553.cos.ap-chengdu.myqcloud.com/%E7%88%B1%E6%85%A7%E5%AE%B6APP(%E7%94%9F%E4%BA%A7)/mp4/%E6%96%B0%E5%BB%BA%E6%A5%BC%E6%A0%8B.mp4"
        },
        {
          title: "修改授权手机号码",
          url:
            "https://meishutest-1256675553.cos.ap-chengdu.myqcloud.com/%E7%88%B1%E6%85%A7%E5%AE%B6APP(%E7%94%9F%E4%BA%A7)/mp4/%E4%BF%AE%E6%94%B9%E6%8E%88%E6%9D%83%E6%89%8B%E6%9C%BA%E5%8F%B7%E7%A0%81.mp4"
        },
        {
          title: "已解绑卡重复使用",
          url:
            "https://meishutest-1256675553.cos.ap-chengdu.myqcloud.com/%E7%88%B1%E6%85%A7%E5%AE%B6APP(%E7%94%9F%E4%BA%A7)/mp4/%E5%B7%B2%E8%A7%A3%E7%BB%91%E5%8D%A1%E9%87%8D%E5%A4%8D%E4%BD%BF%E7%94%A8.mp4"
        },
        {
          title: "添加用户卡-使用读卡器读取卡号",
          url:
            "https://meishutest-1256675553.cos.ap-chengdu.myqcloud.com/%E7%88%B1%E6%85%A7%E5%AE%B6APP(%E7%94%9F%E4%BA%A7)/mp4/%E6%B7%BB%E5%8A%A0%E7%94%A8%E6%88%B7%E5%8D%A1-%E4%BD%BF%E7%94%A8%E8%AF%BB%E5%8D%A1%E5%99%A8%E8%AF%BB%E5%8F%96%E5%8D%A1%E5%8F%B7.mp4"
        },
        {
          title: "添加用户卡-手动添加卡号",
          url:
            "https://meishutest-1256675553.cos.ap-chengdu.myqcloud.com/%E7%88%B1%E6%85%A7%E5%AE%B6APP(%E7%94%9F%E4%BA%A7)/mp4/%E6%B7%BB%E5%8A%A0%E7%94%A8%E6%88%B7%E5%8D%A1-%E6%89%8B%E5%8A%A8%E6%B7%BB%E5%8A%A0%E5%8D%A1%E5%8F%B7.mp4"
        },
        {
          title: "添加管理卡-读卡器读取卡号",
          url:
            "https://meishutest-1256675553.cos.ap-chengdu.myqcloud.com/%E7%88%B1%E6%85%A7%E5%AE%B6APP(%E7%94%9F%E4%BA%A7)/mp4/%E6%B7%BB%E5%8A%A0%E7%AE%A1%E7%90%86%E5%8D%A1-%E8%AF%BB%E5%8D%A1%E5%99%A8%E8%AF%BB%E5%8F%96%E5%8D%A1%E5%8F%B7.mp4"
        },
        {
          title: "发布公告-门禁设备端发布",
          url:
            "https://meishutest-1256675553.cos.ap-chengdu.myqcloud.com/%E7%88%B1%E6%85%A7%E5%AE%B6APP(%E7%94%9F%E4%BA%A7)/mp4/%E5%8F%91%E5%B8%83%E5%85%AC%E5%91%8A-%E9%97%A8%E7%A6%81%E8%AE%BE%E5%A4%87%E7%AB%AF%E5%8F%91%E5%B8%83.mp4"
        },
        {
          title: "发布通知-手机app端发布",
          url:
            "https://meishutest-1256675553.cos.ap-chengdu.myqcloud.com/%E7%88%B1%E6%85%A7%E5%AE%B6APP(%E7%94%9F%E4%BA%A7)/mp4/%E5%8F%91%E5%B8%83%E9%80%9A%E7%9F%A5-%E6%89%8B%E6%9C%BAapp%E7%AB%AF%E5%8F%91%E5%B8%83.mp4"
        }
      ]
    };
  }
};
</script>
 
<style>
.menu {
  position: fixed;
  width: 200px;
  margin: 0;
  padding: 5px 20px;
  list-style: none;
  font-size: 14px;
  background-color: #eee;
}
.menu li {
  cursor: pointer;
  margin: 15px 0;
}
video:focus {
  outline: none;
}
</style>

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue-ScrollTo是一个Vue.js插件,用于在页面中滚动到指定位置。它可以用于单页应用程序或多页应用程序,支持元素滚动和页面滚动。 ## 安装 你可以通过npm或yarn来安装Vue-ScrollTo: ``` npm install --save vue-scrollto ``` 或 ``` yarn add vue-scrollto ``` ## 使用 在您的Vue.js应用程序中,您需要先导入Vue-ScrollTo: ```javascript import VueScrollTo from 'vue-scrollto' ``` 然后,您需要将Vue-ScrollTo添加为Vue.js插件: ```javascript Vue.use(VueScrollTo) ``` 现在,您可以在组件内使用`v-scroll-to`指令来滚动到指定位置。例如: ```html <button v-scroll-to="'#element'">Scroll to #element</button> ``` 您还可以将选项对象传递给指令以使用自定义设置: ```html <button v-scroll-to="{ el: '#element', duration: 500, easing: 'ease-in' }">Scroll to #element</button> ``` 在这个例子中,我们指定了要滚动到的元素ID、动画持续时间和缓动函数。 您还可以在Vue.js组件中使用`this.$scrollTo`方法来编程方式滚动到指定位置: ```javascript this.$scrollTo('#element', 500, { easing: 'ease-in' }) ``` 在这个例子中,我们指定了要滚动到的元素ID、动画持续时间和缓动函数。 ## 选项 Vue-ScrollTo支持以下选项: - `el`:要滚动到的元素的选择器或DOM元素。默认为`null`,这意味着它将滚动到页面顶部。 - `duration`:动画持续时间(以毫秒为单位)。默认为`500`。 - `easing`:缓动函数。默认为`ease-out`。 - `offset`:滚动偏移量(以像素为单位)。默认为`0`。 - `cancelable`:是否可以取消滚动。默认为`true`。 - `onDone`:滚动完成后调用的回调函数。 - `onCancel`:当滚动被取消时调用的回调函数。 ## 示例 以下是一些示例,演示如何在Vue.js应用程序中使用Vue-ScrollTo: ### 滚动到页面顶部 ```html <button v-scroll-to>Scroll to top</button> ``` ### 滚动到具有ID的元素 ```html <button v-scroll-to="'#element'">Scroll to #element</button> ``` ### 滚动到具有ID的元素,并带有自定义选项 ```html <button v-scroll-to="{ el: '#element', duration: 1000, easing: 'ease-in' }">Scroll to #element</button> ``` ### 在组件中编程方式滚动 ```javascript this.$scrollTo('#element', 500, { easing: 'ease-in' }) ``` ## 结论 Vue-ScrollTo是一个非常有用的Vue.js插件,可以轻松地在应用程序中实现平滑滚动。它支持许多选项,可以自定义滚动体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值