布局滚动、分页滚动到页面顶部

杨泽宇
1 parent 1cf926f8
Showing 9 changed files with 440 additions and 36 deletions
README.md
src/App.vue
src/components/Pagination/index.vue
src/layout/enter.vue
src/layout/header.vue
src/layout/menu.vue
src/style/menu.scss
src/utils/scroll.ts
src/views/tengxi/about.vue
@@ -27,6 +27,9 @@ cnlive-community-web-vue 中国网+智慧社区平台
 + 测试：
    + test.community.api.cnlive.com
    + test.community.web.cnlive.com
+   + 服务器地址：120.92.119.11
+   + 账号：root
+   + 密码：du=K0dB1z
  
 ## 测试账号
  
@@ -65,6 +68,7 @@ cnlive-community-web-vue 中国网+智慧社区平台
      * varible.ts 全局静态变量
      * tool.ts 全局方法
      * validate.ts 格式验证方法
+     * scroll.ts 页面滚动
   * views 业务逻辑页面
      * dashboard 欢迎页
      * user 用户管理 包含登录注册
@@ -32,6 +32,6 @@
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  /* margin-top: 60px; */
+  overflow: hidden;
 }
 </style>
@@ -5,6 +5,8 @@
  * @author Tengxi
  */
  
+import { scrollTo } from '@/utils/scroll'
+
 // TIP 每个属性都必传，不带默认值
 // defineProps<{
 //   total: number;
@@ -41,6 +43,7 @@ const props = withDefaults(defineProps&lt;Props&gt;(), {
  * @description 每页内容条数变化响应
  */
 const handleSizeChange = (val) => {
+  scrollTo(0, 800)
   emit("pageChange", props.currentPage, val, props.tagName);
 };
 /**
@@ -48,6 +51,7 @@ const handleSizeChange = (val) =&gt; {
  * @description 当前页码变化响应
  */
 const handleCurrentChange = (val) => {
+  scrollTo(0, 800)
   emit("pageChange", val, props.pageSize, props.tagName);
 };
 const emit = defineEmits<{
@@ -8,7 +8,7 @@ import { ref } from &quot;vue&quot;;
 import Header from "./header.vue";
 import Menu from "./menu.vue";
 import * as store from "@/pinia/index";
-let key = ref("/")
+let key = ref("/");
 </script>
  
 <template>
@@ -22,25 +22,30 @@ let key = ref(&quot;/&quot;)
     </div>
     <!-- TIP 左侧菜单结束 -->
     <!-- TIP 右侧具体页面内容 -->
-    <div :class="store.family.appStore().isCollapse? 'thinMenu': 'fatMenu'">
-      <router-view v-slot="{ Component, route }">
-        <transition :name="route.meta.transitionName">
-          <keep-alive v-if="route.meta.keepAlive">
-            <component :is="Component" />
-          </keep-alive>
-          <component :is="Component" v-else />
-        </transition>
-      </router-view>
+    <div
+      class="view-container"
+      :class="store.family.appStore().isCollapse ? 'thinMenu' : 'fatMenu'"
+    >
+      <el-scrollbar wrap-class="scrollbar-wrapper">
+        <router-view v-slot="{ Component, route }">
+          <transition :name="route.meta.transitionName">
+            <keep-alive v-if="route.meta.keepAlive">
+              <component :is="Component" />
+            </keep-alive>
+            <component :is="Component" v-else />
+          </transition>
+        </router-view>
+      </el-scrollbar>
     </div>
     <!-- TIP 右侧具体页面内容结束 -->
   </div>
 </template>
  
 <style scoped lang="scss">
-  .fatMenu {
-    margin-left: $sideBarWidth!important;
-  }
-  .thinMenu {
-    margin-left: $sideBarWidthThin!important;
-  }
+.fatMenu {
+  margin-left: $sideBarWidth !important;
+}
+.thinMenu {
+  margin-left: $sideBarWidthThin !important;
+}
 </style>
@@ -24,11 +24,13 @@ const toggleMenu = () =&gt; {
   <div class="header-container clearfix">
     <!-- TIP logo -->
     <div class="left-logo" :class="store.family.appStore().isCollapse? 'thinLogo': 'fatLogo'">
-      <el-image
-        :src="globalProperties.$cnliveLogo"
-        fit="contain"
-        style="height: 40px"
-      ></el-image>
+      <router-link to="/">
+        <el-image
+          :src="globalProperties.$cnliveLogo"
+          fit="contain"
+          style="height: 40px"
+        ></el-image>
+      </router-link>
     </div>
     <!-- TIP logo结束 -->
     <!-- TIP 控制菜单collapse的按钮 -->
@@ -39,6 +41,8 @@ const toggleMenu = () =&gt; {
     <!-- TIP 控制菜单collapse的按钮结束 -->
     <!-- TIP 功能键 -->
     <div class="right-buttons">
+      <el-button type="text">站内消息</el-button>
+      <el-button type="text"><router-link to="/">首页</router-link></el-button>
       <el-button type="text">帮助</el-button>
       <el-button type="text">用户：管理员</el-button>
       <el-button type="text">退出</el-button>
@@ -51,6 +55,10 @@ const toggleMenu = () =&gt; {
 .header-container {
   padding: 0 20px 0 0;
   height: 60px;
+  top: 0;
+  position: fixed;
+  z-index: 1000;
+  width: 100%;
   line-height: 60px;
   background-color: white;
   box-shadow: 0 1px 4px rgba(0,21,41,.08);
@@ -49,6 +49,240 @@ let styleData = computed(()=&gt;{
           <el-menu-item index="1-4-1">item one</el-menu-item>
         </el-sub-menu>
       </el-sub-menu>
+      <el-sub-menu index="1">
+        <template #title>
+          <el-icon><location /></el-icon>
+          <span>Navigator One</span>
+        </template>
+        <el-menu-item-group>
+          <template #title><span>Group One</span></template>
+          <el-menu-item index="1-1">item one</el-menu-item>
+          <el-menu-item index="1-2">item two</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="Group Two">
+          <el-menu-item index="1-3">item three</el-menu-item>
+        </el-menu-item-group>
+        <el-sub-menu index="1-4">
+          <template #title><span>item four</span></template>
+          <el-menu-item index="1-4-1">item one</el-menu-item>
+        </el-sub-menu>
+      </el-sub-menu>
+      <el-sub-menu index="1">
+        <template #title>
+          <el-icon><location /></el-icon>
+          <span>Navigator One</span>
+        </template>
+        <el-menu-item-group>
+          <template #title><span>Group One</span></template>
+          <el-menu-item index="1-1">item one</el-menu-item>
+          <el-menu-item index="1-2">item two</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="Group Two">
+          <el-menu-item index="1-3">item three</el-menu-item>
+        </el-menu-item-group>
+        <el-sub-menu index="1-4">
+          <template #title><span>item four</span></template>
+          <el-menu-item index="1-4-1">item one</el-menu-item>
+        </el-sub-menu>
+      </el-sub-menu>
+      <el-sub-menu index="1">
+        <template #title>
+          <el-icon><location /></el-icon>
+          <span>Navigator One</span>
+        </template>
+        <el-menu-item-group>
+          <template #title><span>Group One</span></template>
+          <el-menu-item index="1-1">item one</el-menu-item>
+          <el-menu-item index="1-2">item two</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="Group Two">
+          <el-menu-item index="1-3">item three</el-menu-item>
+        </el-menu-item-group>
+        <el-sub-menu index="1-4">
+          <template #title><span>item four</span></template>
+          <el-menu-item index="1-4-1">item one</el-menu-item>
+        </el-sub-menu>
+      </el-sub-menu>
+      <el-sub-menu index="1">
+        <template #title>
+          <el-icon><location /></el-icon>
+          <span>Navigator One</span>
+        </template>
+        <el-menu-item-group>
+          <template #title><span>Group One</span></template>
+          <el-menu-item index="1-1">item one</el-menu-item>
+          <el-menu-item index="1-2">item two</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="Group Two">
+          <el-menu-item index="1-3">item three</el-menu-item>
+        </el-menu-item-group>
+        <el-sub-menu index="1-4">
+          <template #title><span>item four</span></template>
+          <el-menu-item index="1-4-1">item one</el-menu-item>
+        </el-sub-menu>
+      </el-sub-menu>
+      <el-sub-menu index="1">
+        <template #title>
+          <el-icon><location /></el-icon>
+          <span>Navigator One</span>
+        </template>
+        <el-menu-item-group>
+          <template #title><span>Group One</span></template>
+          <el-menu-item index="1-1">item one</el-menu-item>
+          <el-menu-item index="1-2">item two</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="Group Two">
+          <el-menu-item index="1-3">item three</el-menu-item>
+        </el-menu-item-group>
+        <el-sub-menu index="1-4">
+          <template #title><span>item four</span></template>
+          <el-menu-item index="1-4-1">item one</el-menu-item>
+        </el-sub-menu>
+      </el-sub-menu>
+      <el-sub-menu index="1">
+        <template #title>
+          <el-icon><location /></el-icon>
+          <span>Navigator One</span>
+        </template>
+        <el-menu-item-group>
+          <template #title><span>Group One</span></template>
+          <el-menu-item index="1-1">item one</el-menu-item>
+          <el-menu-item index="1-2">item two</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="Group Two">
+          <el-menu-item index="1-3">item three</el-menu-item>
+        </el-menu-item-group>
+        <el-sub-menu index="1-4">
+          <template #title><span>item four</span></template>
+          <el-menu-item index="1-4-1">item one</el-menu-item>
+        </el-sub-menu>
+      </el-sub-menu>
+      <el-sub-menu index="1">
+        <template #title>
+          <el-icon><location /></el-icon>
+          <span>Navigator One</span>
+        </template>
+        <el-menu-item-group>
+          <template #title><span>Group One</span></template>
+          <el-menu-item index="1-1">item one</el-menu-item>
+          <el-menu-item index="1-2">item two</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="Group Two">
+          <el-menu-item index="1-3">item three</el-menu-item>
+        </el-menu-item-group>
+        <el-sub-menu index="1-4">
+          <template #title><span>item four</span></template>
+          <el-menu-item index="1-4-1">item one</el-menu-item>
+        </el-sub-menu>
+      </el-sub-menu>
+      <el-sub-menu index="1">
+        <template #title>
+          <el-icon><location /></el-icon>
+          <span>Navigator One</span>
+        </template>
+        <el-menu-item-group>
+          <template #title><span>Group One</span></template>
+          <el-menu-item index="1-1">item one</el-menu-item>
+          <el-menu-item index="1-2">item two</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="Group Two">
+          <el-menu-item index="1-3">item three</el-menu-item>
+        </el-menu-item-group>
+        <el-sub-menu index="1-4">
+          <template #title><span>item four</span></template>
+          <el-menu-item index="1-4-1">item one</el-menu-item>
+        </el-sub-menu>
+      </el-sub-menu>
+      <el-sub-menu index="1">
+        <template #title>
+          <el-icon><location /></el-icon>
+          <span>Navigator One</span>
+        </template>
+        <el-menu-item-group>
+          <template #title><span>Group One</span></template>
+          <el-menu-item index="1-1">item one</el-menu-item>
+          <el-menu-item index="1-2">item two</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="Group Two">
+          <el-menu-item index="1-3">item three</el-menu-item>
+        </el-menu-item-group>
+        <el-sub-menu index="1-4">
+          <template #title><span>item four</span></template>
+          <el-menu-item index="1-4-1">item one</el-menu-item>
+        </el-sub-menu>
+      </el-sub-menu>
+      <el-sub-menu index="1">
+        <template #title>
+          <el-icon><location /></el-icon>
+          <span>Navigator One</span>
+        </template>
+        <el-menu-item-group>
+          <template #title><span>Group One</span></template>
+          <el-menu-item index="1-1">item one</el-menu-item>
+          <el-menu-item index="1-2">item two</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="Group Two">
+          <el-menu-item index="1-3">item three</el-menu-item>
+        </el-menu-item-group>
+        <el-sub-menu index="1-4">
+          <template #title><span>item four</span></template>
+          <el-menu-item index="1-4-1">item one</el-menu-item>
+        </el-sub-menu>
+      </el-sub-menu>
+      <el-sub-menu index="1">
+        <template #title>
+          <el-icon><location /></el-icon>
+          <span>Navigator One</span>
+        </template>
+        <el-menu-item-group>
+          <template #title><span>Group One</span></template>
+          <el-menu-item index="1-1">item one</el-menu-item>
+          <el-menu-item index="1-2">item two</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="Group Two">
+          <el-menu-item index="1-3">item three</el-menu-item>
+        </el-menu-item-group>
+        <el-sub-menu index="1-4">
+          <template #title><span>item four</span></template>
+          <el-menu-item index="1-4-1">item one</el-menu-item>
+        </el-sub-menu>
+      </el-sub-menu>
+      <el-sub-menu index="1">
+        <template #title>
+          <el-icon><location /></el-icon>
+          <span>Navigator One</span>
+        </template>
+        <el-menu-item-group>
+          <template #title><span>Group One</span></template>
+          <el-menu-item index="1-1">item one</el-menu-item>
+          <el-menu-item index="1-2">item two</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="Group Two">
+          <el-menu-item index="1-3">item three</el-menu-item>
+        </el-menu-item-group>
+        <el-sub-menu index="1-4">
+          <template #title><span>item four</span></template>
+          <el-menu-item index="1-4-1">item one</el-menu-item>
+        </el-sub-menu>
+      </el-sub-menu>
+      <el-sub-menu index="1">
+        <template #title>
+          <el-icon><location /></el-icon>
+          <span>Navigator One</span>
+        </template>
+        <el-menu-item-group>
+          <template #title><span>Group One</span></template>
+          <el-menu-item index="1-1">item one</el-menu-item>
+          <el-menu-item index="1-2">item two</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="Group Two">
+          <el-menu-item index="1-3">item three</el-menu-item>
+        </el-menu-item-group>
+        <el-sub-menu index="1-4">
+          <template #title><span>item four</span></template>
+          <el-menu-item index="1-4-1">item one</el-menu-item>
+        </el-sub-menu>
+      </el-sub-menu>
       <el-menu-item index="2">
         <el-icon><icon-menu /></el-icon>
         <template #title>Navigator Two</template>
@@ -3,9 +3,14 @@
   *zoom: 1; position: relative;
   .sidebar-container {
     width: $sideBarWidth;
-    position: absolute; 
+    height: 100vh;
+    position: fixed; 
     left: 0; 
-    top: 0;
+    top: 60px;
+  }
+  .view-container {
+    height: 100vh;
+    padding-top: 60px;
   }
 }
  
+const easeInOutQuad = function (t, b, c, d) {
+  t /= d / 2
+  if (t < 1) {
+    return c / 2 * t * t + b
+  }
+  t--
+  return -c / 2 * (t * (t - 2) - 1) + b
+}
+
+// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
+var requestAnimFrame = (function() {
+  return globalThis.requestAnimationFrame || globalThis.webkitRequestAnimationFrame || globalThis.mozRequestAnimationFrame || function(callback) { globalThis.setTimeout(callback, 1000 / 60) }
+})()
+
+/**
+ * Because it's so fucking difficult to detect the scrolling element, just move them all
+ * @param {number} amount
+ */
+function move(amount) {
+  document.documentElement.scrollTop = amount
+  // document.body.parentNode.scrollTop = amount
+  document.body.scrollTop = amount
+}
+
+function position() {
+  // return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
+  return document.documentElement.scrollTop || document.body.scrollTop
+}
+
+/**
+ * @param {number} to
+ * @param {number} duration
+ * @param {Function} callback
+ */
+export function scrollTo(to, duration, callback) {
+  const start = position()
+  const change = to - start
+  const increment = 20
+  let currentTime = 0
+  duration = (typeof (duration) === 'undefined') ? 500 : duration
+  var animateScroll = function() {
+    // increment the time
+    currentTime += increment
+    // find the value with the quadratic in-out easing function
+    var val = easeInOutQuad(currentTime, start, change, duration)
+    // move the document.body
+    move(val)
+    // do the animation unless its over
+    if (currentTime < duration) {
+      requestAnimFrame(animateScroll)
+    } else {
+      if (callback && typeof (callback) === 'function') {
+        // the animation is done so lets callback
+        callback()
+      }
+    }
+  }
+  animateScroll()
+}
 <script setup lang="ts">
 import { reactive,getCurrentInstance } from "vue";
 import {globalFilters} from '@/utils/tool'
+import Pagination from '@/components/Pagination/index.vue'
 // import {tengxiTestStore} from '@/pinia/index'
 import * as all from '@/pinia/index'
 console.log(all)
@@ -8,22 +9,16 @@ console.log(all)
 // console.log(store)
 const data = reactive([
   {
-    date: "2016-05-02",
-    name: "王小虎1",
-    address: "上海市普陀区金沙江路 1518 弄",
-    status: 1
-  },
-  {
-    date: "2016-05-04",
+    date: "2016-05-03",
     name: "王小虎",
-    address: "上海市普陀区金沙江路 1517 弄",
-    status: 2
+    address: "上海市普陀区金沙江路 1516 弄",
+    status: 0
   },
   {
-    date: "2016-05-01",
+    date: "2016-05-03",
     name: "王小虎",
-    address: "上海市普陀区金沙江路 1519 弄",
-    status: null
+    address: "上海市普陀区金沙江路 1516 弄",
+    status: 0
   },
   {
     date: "2016-05-03",
@@ -55,6 +50,20 @@ const thisLine = (obj) =&gt; {
   console.log(obj.status)
 }
  
+const pageDataStore = reactive({
+    page: 1,
+    pageSize: 10
+  })
+
+  const test = (page, size, tagName) => {
+    console.log('分页的回调')
+    console.log(page)
+    console.log(size)
+    console.log(tagName)
+    pageDataStore.page = page
+    pageDataStore.pageSize = size
+  }
+
 // const addAge = () => {
 //   console.log('add one age')
 //   console.log(store.age)
@@ -89,5 +98,81 @@ const thisLine = (obj) =&gt; {
         </template>
       </el-table-column>
     </el-table>
+    <el-table :data="data" style="width: 100%" border>
+      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
+      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
+      <el-table-column prop="address" label="地址"> </el-table-column>
+      <el-table-column prop="status" label="状态">
+        <template #default="scope">
+          {{globalFilters(scope.row.status, statusArray)}}
+        </template>
+      </el-table-column>
+      <el-table-column label="按钮">
+        <template #default="scope">
+        <el-button type="primary" @click="thisLine(scope.row)">哈哈</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-table :data="data" style="width: 100%" border>
+      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
+      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
+      <el-table-column prop="address" label="地址"> </el-table-column>
+      <el-table-column prop="status" label="状态">
+        <template #default="scope">
+          {{globalFilters(scope.row.status, statusArray)}}
+        </template>
+      </el-table-column>
+      <el-table-column label="按钮">
+        <template #default="scope">
+        <el-button type="primary" @click="thisLine(scope.row)">哈哈</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-table :data="data" style="width: 100%" border>
+      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
+      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
+      <el-table-column prop="address" label="地址"> </el-table-column>
+      <el-table-column prop="status" label="状态">
+        <template #default="scope">
+          {{globalFilters(scope.row.status, statusArray)}}
+        </template>
+      </el-table-column>
+      <el-table-column label="按钮">
+        <template #default="scope">
+        <el-button type="primary" @click="thisLine(scope.row)">哈哈</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <Pagination tagName="second" :total="data.length" :currentPage="pageDataStore.page" :pageSize="pageDataStore.pageSize" @pageChange="test"></Pagination>
+    <el-table :data="data" style="width: 100%" border>
+      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
+      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
+      <el-table-column prop="address" label="地址"> </el-table-column>
+      <el-table-column prop="status" label="状态">
+        <template #default="scope">
+          {{globalFilters(scope.row.status, statusArray)}}
+        </template>
+      </el-table-column>
+      <el-table-column label="按钮">
+        <template #default="scope">
+        <el-button type="primary" @click="thisLine(scope.row)">哈哈</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-table :data="data" style="width: 100%" border>
+      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
+      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
+      <el-table-column prop="address" label="地址"> </el-table-column>
+      <el-table-column prop="status" label="状态">
+        <template #default="scope">
+          {{globalFilters(scope.row.status, statusArray)}}
+        </template>
+      </el-table-column>
+      <el-table-column label="按钮">
+        <template #default="scope">
+        <el-button type="primary" @click="thisLine(scope.row)">哈哈</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
   </div>
 </template>