feature: 添加无限滚动

jsxiaosi · Jan 20, 2022 · 25cf6b5 · 25cf6b5
1 parent 2aca6aa
commit 25cf6b5
Show file tree

Hide file tree

Showing 6 changed files with 119 additions and 1 deletion.
diff --git a/src/layouts/pageLayouts/components/Sidebar/SidebarItem.vue b/src/layouts/pageLayouts/components/Sidebar/SidebarItem.vue
@@ -100,7 +100,8 @@
     if (isExternal(props.basePath)) {
       return props.basePath;
     }
-    return `${props.basePath}/${routePath}`;
+    console.log(`${props.basePath}     ${routePath}`);
+    return `${props.basePath}${routePath ? '/' + routePath : routePath}`;
   };
 </script>
 

diff --git a/src/locales/en/modules/route.ts b/src/locales/en/modules/route.ts
@@ -5,6 +5,7 @@ const route = {
     dragCpts: 'DragComponents',
     countTo: 'DigitalAnimation',
     form: 'Form',
+    seamlessScroll: 'SeamlessScroll',
     userInfo: 'UserInfo',
     userList: 'UserList',
     userDateil: 'UserDateil',

diff --git a/src/locales/zh-ch/modules/route.ts b/src/locales/zh-ch/modules/route.ts
@@ -5,6 +5,7 @@ const route = {
     dragCpts: '拖拽组件',
     countTo: '数字动画',
     form: '表单',
+    seamlessScroll: '无限滚动',
     userInfo: '用户管理',
     userList: '用户列表',
     userDateil: '用户详情',

diff --git a/src/router/modules/otherRoute/otherRoute.ts b/src/router/modules/otherRoute/otherRoute.ts
@@ -50,6 +50,12 @@ const safeManagerRoutes: Array<AppRouteRecordRaw> = [
         component: () => import('@/views/components/form/index.vue'),
         meta: { title: t('route.pathName.form') },
       },
+      {
+        path: 'seamless-scroll',
+        name: 'RtSeamlessScroll',
+        component: () => import('@/views/components/seamless-scroll/index.vue'),
+        meta: { title: t('route.pathName.seamlessScroll') },
+      },
     ],
   },
   {

diff --git a/src/views/components/seamless-scroll/index.vue b/src/views/components/seamless-scroll/index.vue
@@ -0,0 +1,106 @@
+<template>
+  <el-card class="box-card">
+    <template #header>
+      <div class="card-header">
+        <span>无缝滚动示例</span>
+        <el-button class="button" type="text" @click="changeDirection('top')">
+          <span :style="{ color: classOption.direction === 'top' ? 'red' : '' }">向上滚动</span>
+        </el-button>
+        <el-button class="button" type="text" @click="changeDirection('bottom')">
+          <span
+            :style="{
+              color: classOption.direction === 'bottom' ? 'red' : '',
+            }"
+            >向下滚动</span
+          >
+        </el-button>
+        <el-button class="button" type="text" @click="changeDirection('left')">
+          <span :style="{ color: classOption.direction === 'left' ? 'red' : '' }">向左滚动</span>
+        </el-button>
+        <el-button class="button" type="text" @click="changeDirection('right')">
+          <span :style="{ color: classOption.direction === 'right' ? 'red' : '' }">向右滚动</span>
+        </el-button>
+      </div>
+    </template>
+    <SeamlessScroll ref="scroll" :data="listData" :class-option="classOption" class="warp">
+      <ul class="item">
+        <li v-for="(item, index) in listData" :key="index">
+          {{ item.title }}
+        </li>
+      </ul>
+    </SeamlessScroll>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+  import { ref, reactive, unref } from 'vue';
+  import { templateRef } from '@vueuse/core';
+  import SeamlessScroll from '@/components/SeamlessScroll/index.vue';
+
+  // eslint-disable-next-line no-undef
+  const scroll = templateRef<HTMLElement | null>('scroll', null);
+
+  let listData = ref([
+    {
+      title: '无缝滚动第一行无缝滚动第一行！！！！！！！！！！',
+    },
+    {
+      title: '无缝滚动第二行无缝滚动第二行！！！！！！！！！！',
+    },
+    {
+      title: '无缝滚动第三行无缝滚动第三行！！！！！！！！！！',
+    },
+    {
+      title: '无缝滚动第四行无缝滚动第四行！！！！！！！！！！',
+    },
+    {
+      title: '无缝滚动第五行无缝滚动第五行！！！！！！！！！！',
+    },
+    {
+      title: '无缝滚动第六行无缝滚动第六行！！！！！！！！！！',
+    },
+    {
+      title: '无缝滚动第七行无缝滚动第七行！！！！！！！！！！',
+    },
+    {
+      title: '无缝滚动第八行无缝滚动第八行！！！！！！！！！！',
+    },
+    {
+      title: '无缝滚动第九行无缝滚动第九行！！！！！！！！！！',
+    },
+  ]);
+
+  let classOption = reactive({
+    direction: 'top',
+  });
+
+  function changeDirection(val: string) {
+    // @ts-ignore
+    unref(scroll).reset();
+    unref(classOption).direction = val;
+  }
+</script>
+
+<style lang="scss" scoped>
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    span {
+      margin-right: 20px;
+    }
+  }
+
+  .warp {
+    height: 200px;
+    width: 400px;
+    margin: 0 auto;
+    overflow: hidden;
+
+    ul {
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>
diff --git a/src/views/useradmin/userlist/index.vue b/src/views/useradmin/userlist/index.vue
@@ -2,6 +2,7 @@
   <div class="page-container">
     <span>听说这个是用户列表</span>
     <TsComponents />
+    <TsComponents2></TsComponents2>
     <!-- <el-icon><iEL-baseball /></el-icon>
 		<SvgIcon name="daosanjiao"></SvgIcon>
 		{{ t('login.title') }}
@@ -16,6 +17,8 @@
 
 <script setup lang="ts">
   import TsComponents from '@/components/tscomponents';
+  import TsComponents2 from '@/components/tscomponents2.vue';
+
   // import SvgIcon from '@/components/SvgIcon/index.vue'
   // import { getCurrentInstance } from 'vue'