Vue3.0 无缝滚动组件

Overview

vue3-seamless-scroll

Vue3.0 无缝滚动组件

目前组件支持上下左右无缝滚动,单步滚动,并且支持复杂图标的无缝滚动,组件支持原生 css3动画 滚动,目前组件支持平台与Vue3.0支持平台一致。

效果展示

image

安装

  • npm

    npm install vue3-seamless-scroll --save
  • Yarn

    yarn add vue3-seamless-scroll
  • browser

    <script src="https://unpkg.com/browse/[email protected]/lib/vue3SeamlessScroll.umd.min.js"></script>

组件配置

  • datas

    无缝滚动列表数据,组件内部使用列表长度。

      type: Array
      required: true
  • v-model

    通过v-model控制动画滚动与停止,默认开始滚动

      type: Boolean,
      default: true,
      required: false
  • direction

    控制滚动方向,可选值updownleftright

      type: String,
      default: "up",
      required: false
  • isWatch

    开启数据更新监听

      type: Boolean,
      default: true,
      required: false
  • hover

    是否开启鼠标悬停

      type: Boolean,
      default: false,
      required: false
  • limitScrollNum

    开启滚动的数据量,只有列表长度大于等于该值才会滚动

      type: [Number, String],
      default: 5,
      required: false
  • step

    步进速度

      type: [Number, String],
      required: false

js版 特有参数配置文档

原生css3动画 特有参数组件配置文档

注意项

当使用原生css3动画滚动组件时,单步滚动控制需要durationstep两个参数协调使用

需要滚动的列表所在容器必须设置样式 overflow: hidden;

使用

注册组件

  • 全局单个组件注册 install
  // **main.js**
  import { createApp } from 'vue';
  import App from './App.vue';
  // 单个组件引用注册
  import { jsSeamlessScroll, cssSeamlessScroll } from "vue3-seamless-scroll";
  // 如果使用原生css3动画滚动组件时必须引入样式文件
  import "vue3-seamless-scroll/lib/vue3SeamlessScroll.css"
  const app = createApp(App);
  app.use(cssSeamlessScroll);
  app.use(jsSeamlessScroll);
  app.mount('#app');
  • 全局组件注册 install
  // **main.js**
  import { createApp } from 'vue';
  import App from './App.vue';
  // 单个组件引用注册
  import vue3SeamlessScroll from "vue3-seamless-scroll";
  // 如果使用原生css3动画滚动组件时必须引入样式文件
  import "vue3-seamless-scroll/lib/vue3SeamlessScroll.css"
  const app = createApp(App);
  app.use(vue3SeamlessScroll);
  app.mount('#app');
  • 单个.vue文件局部注册
<script>
  import { defineComponent } from "vue";
  import { jsSeamlessScroll, cssSeamlessScroll } from "vue3-seamless-scroll";
  import "vue3-seamless-scroll/lib/vue3SeamlessScroll.css"
   export default defineComponent({
      components: {
        jsSeamlessScroll,
        cssSeamlessScroll
      }
   })
</script>

使用组件

<template>
  <js-seamless-scroll :datas="datas" v-model="scroll" class="scroll">
    <div class="item" v-for="(item, index) in datas" :key="index">
      <span>{{item.title}}</span>
      <span>{{item.date}}</span>
    </div>
  </js-seamless-scroll>

  <css-seamless-scroll :datas="datas" v-model="scroll" class="scroll">
    <div class="item" v-for="(item, index) in datas" :key="index">
      <span>{{item.title}}</span>
      <span>{{item.date}}</span>
    </div>
  </css-seamless-scroll>
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue";
import { jsSeamlessScroll, cssSeamlessScroll } from "vue3-seamless-scroll";

export default defineComponent({
  name: "App",
  components: {
    jsSeamlessScroll,
    cssSeamlessScroll
  },
  setup() {
    const state = reactive({
      scroll: true,
      datas: [
        {
          title: "Vue3.0 无缝滚动组件展示数据第1条",
          date: Date.now(),
        },
        {
          title: "Vue3.0 无缝滚动组件展示数据第2条",
          date: Date.now(),
        },
        {
          title: "Vue3.0 无缝滚动组件展示数据第3条",
          date: Date.now(),
        },
        {
          title: "Vue3.0 无缝滚动组件展示数据第4条",
          date: Date.now(),
        },
        {
          title: "Vue3.0 无缝滚动组件展示数据第5条",
          date: Date.now(),
        },
        {
          title: "Vue3.0 无缝滚动组件展示数据第6条",
          date: Date.now(),
        },
        {
          title: "Vue3.0 无缝滚动组件展示数据第7条",
          date: Date.now(),
        },
        {
          title: "Vue3.0 无缝滚动组件展示数据第8条",
          date: Date.now(),
        },
        {
          title: "Vue3.0 无缝滚动组件展示数据第9条",
          date: Date.now(),
        },
      ]
    });
    return { ...toRefs(state) };
  },
});
</script>

<style>
.scroll {
  height: 270px;
  width: 500px;
  margin: 100px auto;
  overflow: hidden;
}

.scroll .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
}
</style>
Issues
🚀🚀🚀Vue3,Vue3.0,Vue,Vue3.x,Vuex,Typescript,TSX,ts,vue后台管理,admin,vue-admin,vue3-admin,vue-element-admin,iooc-admin,iooc-vue-admin主线版本基于element-plus、Typescript开发维护.集成CRUD,JsonSchema、大量节省业务代码.

iooc-admin(element-plus) 演示地址(数据库五分钟重置一次) ⚡️ vue3.x + element-plus + TypeScript ⚡️ vue3.x + element-plus + TypeScript (视频) 项目地址 ⚡️ vue3.x + element-pl

Jacking 51 Jun 20, 2021
vue3 表单生成;vue3 elementui-next 自动生成代码; vue3 form make

简介 本项目以 https://github.com/JakHuang/form-generator 为基础,对vue3 和elementu-next 进行了适配 在线预览 地址 使用方法 main.js import { createApp } from 'vue' import App from

null 29 Nov 22, 2021
⚡️Starter template with Vite2 Vue3 and Electron 11.x /使用 Vite2 Vue3 以及 Electron 11.x 打造的快速启动模版。

vite-electron-quick ?? A fast Simple Vite2 Vue3 and Electron 11.x template. ⚡️ If you want to fast create a Vite 2 + Vue 3 + Electron 11.x project: ??

qicoo 134 Nov 23, 2021
✨ ✨ ✨ A vue3 style Admin based on Vite2, vue3.0, ant-design-vue 2.x, typescript,vuex,vue-router,Efforts to update in progress...

VUE VBEN ADMIN2.0 Chinese | English CHANGELOG Introduction GitHub Thin Preview Documentation Preinstallation Environmental requirements UI framework I

Vben 7.6k Nov 25, 2021
✨ ✨ ✨ A vue3 style Admin based on Vite2, vue3.0, ant-design-vue 2.x, typescript,vuex,vue-router,Efforts to update in progress...

✨ ✨ ✨ A vue3 style Admin based on Vite2, vue3.0, ant-design-vue 2.x, typescript,vuex,vue-router,Efforts to update in progress...

Vben 7.6k Nov 25, 2021
zhihu system written with vue3+ts, using most of the functions of vue3.0,composition Api.

zhihu system written with vue3+ts, using most of the functions of vue3.0,composition Api.

null 4 May 11, 2021
Vue3 + Vite + WindiCSS (Tailwind) Boilerplate for quick starting your Vue3 app with full support for tailwind

Use this boilerplate to quickly start your Vue3 project with WindiCSS (TailwindCSS), using vite as the build tool. Run the development server git clon

Hasin Hayder 6 Jun 19, 2021
vue3-ts-picker 一款基于 vue3+ts 的轻量级颜色取色器插件

vue3-ts-picker 一款基于 vue3+ts 的轻量级颜色取色器插件

null 3 Sep 22, 2021
🎉 A new generation vue3 admin template using vue3(script-setup) + vite2 + element-plus

?? A new generation vue3 admin template using vue3(script-setup) + vite2 + element-plus

kuanghua 49 Nov 12, 2021
👏A magical vue3 admin using vue3(script-setup) + vite2 + element-plus

vue3-admin-plus English | 中文 vue3 admin plus provides enterprise-level development demo A new generation admin construct using vue3(setup-script)+vite

kuanghua 63 Nov 24, 2021
🎉 A new generation vue3 admin template using vue3(script-setup) + vite2 + element-plus + typescript

vue3-admin-ts English | 中文 A basic vue3 admin template with vite2 & Element-Plus UI & axios & svg-icon& permission control & lint A new generation adm

kuanghua 31 Nov 25, 2021
wt-vite-vue3-element-ruoyi-ts 若以 若依 typescript ts vue3 vue vite vite2.0 模版

wt-vite-vue3-element-ruoyi-ts ?? 全网首发 ?? 基于 Vite 2.0 + Vue 3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus + typescript 的后台管理系统 Project setup npm i -g

superDragon 1 Oct 25, 2021
实现最简 vue3 模型( Help you learn more efficiently vue3 source code )

CN / EN mini-vue 实现最简 vue3 模型,用于深入学习 vue3 Usage B 站 提供了视频讲解使用方式 想看更多关于 mini-vue 的课程可以加我 vx 哦 加我的公众号:阿崔cxr 公众号回复关键字:vx Why 当我们需要深入学习 vue3 时,我们就需要看源码来学习

阿崔cxr 3.6k Nov 20, 2021
vue3-qr-reader - A Vue 3 QR reader component. Refactor vue-qrcode-reader for vue 3 compatibility.

vue3-qr-reader Vue 3 qr reader. Credit to: vue-qrcode-reader refactor for vue 3. Demo Demo Demo Code Install yarn add vue3-qr-reader npm i --save vue3

null 31 Nov 4, 2021
A Vue & Vue3 reliable, simple and touch-ready panes splitter / resizer.

Splitpanes A Vue.js reliable, simple and touch-ready panes splitter / resizer. Vue 3 compatible. Installation npm i splitpanes Vue 3 npm i splitpanes

Antoni 844 Nov 22, 2021
A vue3 version of vue-element-admin

vue-element-admin is a production-ready front-end solution for admin interfaces. It is based on vue and uses the UI Toolkit element-ui.

Ziwen Mei 390 Nov 26, 2021
PPTist 一个基于 Vue3.x + TypeScript 的在线演示文稿应用

基于 Vue3.x + TypeScript 的在线演示文稿应用。实现PPT幻灯片的在线编辑、演示。

LLzzZZ 1.2k Nov 16, 2021
a front end template development by vue3.x typescript vite2.x vuex4.x vue-router 4.x mock element-plus

Vue 3 + Typescript + Vite + Vuex + Vue-Router This template should help get you started developing with Vue 3 and Typescript and Vuex and Vu

coderly 34 Nov 22, 2021
uni-app + vue3.0 + typescript + vue-cli 仿手机QQ聊天 qq表情包

uni-chat 基于composition-api + uni-app + ts + vue-cli 开发,在uni-app中使用vue3.0的语法。

bqy 37 Nov 15, 2021
A Vue & Vue3 reliable, simple and touch-ready panes splitter / resizer.

A Vue & Vue3 reliable, simple and touch-ready panes splitter / resizer.

Antoni 844 Nov 22, 2021
A very simple table component for vue3

A very simple table component for vue3

Lin Masahiro 54 Nov 22, 2021
Collapsible Panel / Accordion Component Using Vue3

Collapsible Panel / Accordion Component Using Vue3

Daf Coe 17 Nov 11, 2021
Swappable Card Component Using Vue3

Swappable Card Component Using Vue3

Daf Coe 0 Mar 31, 2021
Notification/Toast Component Using Vue3

Easy to use, customisable notification/toast library built using Vue3.

Daf Coe 22 Nov 11, 2021
基于 Vue3.x + TypeScript 的在线演示文稿应用。实现PPT幻灯片的在线编辑、演示。

基于 Vue3.x + TypeScript 的在线演示文稿应用。实现PPT幻灯片的在线编辑、演示。

LLzzZZ 1.2k Nov 21, 2021
A simple datepicker component for vue3.0

A simple datepicker component for vue3.0

Lin Masahiro 29 Nov 19, 2021
Vite2 + Vue3.0 + ant-design 2.x

vite2-vue3-admin Vite2 + Vue3.0 + ant-design 2.x 线上地址 tips:可注册成功后登入 目录树 ├─public └─src ├─api ├─assets │ ├─font │ ├─icon │ ├─img

Lwp2333 19 Nov 25, 2021
A Vue3 paginator component for the Laravel Jetstream/Breeze Inertia/Vue stack.

These are two basic Paginator components that work with the Laravel Jetstream/Breeze Inertia/Vue3 stack.

null 21 Sep 24, 2021
这是基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex,适配手机、平板、pc 的后台开源免费模板库(vue2.x请切换vue-prev-admin分支)

介绍 基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex,适配手机、平板、pc 的后台开源免费模板,希望减少工作量,帮助大家实现快速开发。 线上预览 vue3.x 版本

null 216 Nov 26, 2021