#利用UniApp打造独特的滑动效果：左侧标题变动，右侧内容滚动相应

2023-10-26 01:49:37

左右联动：在 UniApp 中实现优雅的页面设计

在 UniApp 中，实现左右联动的页面设计非常容易。这种设计不仅可以提升用户体验，还能让页面布局更加美观。本篇文章将逐步指导您如何在 UniApp 中创建左右联动的页面，并提供一些提示和最佳实践。

初始化项目

首先，使用以下命令创建一个新的 UniApp 项目：

npx create-uniapp my-app
cd my-app

创建组件

接下来，在 src 目录中创建 components 文件夹，并在其中创建两个组件文件：

LeftBar.vue：左侧标题栏
RightContent.vue：右侧内容区域

LeftBar 组件

LeftBar.vue 组件包含左侧的标题标签，当用户单击这些标签时，将会滚动到右侧内容区域中相应的锚点。

<template>
  <div class="left-bar">
    <ul>
      <li v-for="item in titleList" :key="item.id" @click="scrollToContent(item.id)">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      titleList: [
        { id: 1, title: '模块1' },
        { id: 2, title: '模块2' },
        { id: 3, title: '模块3' },
        { id: 4, title: '模块4' }
      ]
    }
  },
  methods: {
    scrollToContent(id) {
      this.$refs['rightContent'].scrollToAnchor(id)
    }
  }
}
</script>

RightContent 组件

RightContent.vue 组件包含右侧的内容区域，当 LeftBar 中的标题标签被单击时，它将滚动到相应的锚点。

<template>
  <div class="right-content">
    <div v-for="item in contentList" :key="item.id" :id="item.id">
      <h2>{{ item.title }}</h2>
      <p>{{ item.content }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      contentList: [
        { id: 1, title: '内容1', content: '这是内容1的详细介绍' },
        { id: 2, title: '内容2', content: '这是内容2的详细介绍' },
        { id: 3, title: '内容3', content: '这是内容3的详细介绍' },
        { id: 4, title: '内容4', content: '这是内容4的详细介绍' }
      ]
    }
  },
  methods: {
    scrollToAnchor(id) {
      const element = document.getElementById(id)
      element.scrollIntoView({ behavior: 'smooth' })
    }
  }
}
</script>

配置页面

在 pages.json 文件中，配置左右联动的页面。

{
  "pages": [
    {
      "path": "pages/index/index",
      "component": "pages/index/index"
    }
  ],
  "subPackages": [
    {
      "root": "pages/left-bar",
      "pages": [
        {
          "path": "left-bar",
          "component": "pages/left-bar/left-bar"
        }
      ]
    },
    {
      "root": "pages/right-content",
      "pages": [
        {
          "path": "right-content",
          "component": "pages/right-content/right-content"
        }
      ]
    }
  ]
}

添加样式

在 App.vue 文件中，添加左右联动的全局样式。

.left-bar {
  width: 200px;
  height: 100vh;
  background-color: #f5f5f5;
  border-right: 1px solid #ddd;
}

.left-bar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.left-bar li {
  padding: 10px;
  cursor: pointer;
}

.right-content {
  width: calc(100vw - 200px);
  height: 100vh;
  overflow-y: auto;
}

.right-content h2 {
  margin-bottom: 10px;
}

运行项目

最后，运行以下命令启动项目：

npm run dev

然后，在浏览器中访问 http://localhost:8080 即可查看效果。

常见问题解答

Q：如何更改左侧栏的宽度？
- A：修改 App.vue 文件中 .left-bar 样式的 width 属性。
Q：如何添加更多内容到右侧区域？
- A：在 RightContent.vue 组件中的 contentList 数据中添加更多内容。
Q：如何让左侧栏始终固定在左侧？
- A：在 App.vue 文件中 .left-bar 样式中添加 position: fixed 属性。
Q：如何让滚动更平滑？
- A：在 RightContent.vue 组件中 scrollToAnchor 方法中使用 behavior: 'smooth' 选项。
Q：如何在其他页面中使用左右联动？
- A：在其他页面中引用 LeftBar.vue 和 RightContent.vue 组件即可。