cube-ui顶部标签tab切换，内容在一个页面往上

最新推荐文章于 2025-06-05 10:25:15 发布

宝儿的程序生涯

最新推荐文章于 2025-06-05 10:25:15 发布

阅读量3.5k

点赞数

分类专栏： cube-ui

cube-ui 专栏收录该内容

8 篇文章

订阅专栏

本文通过实例代码介绍了使用cube-ui库如何实现顶部标签页的内容切换，内容展示在一个页面内平滑滚动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上效果图
在这里插入图片描述

源码：

<template>
<div>
    <div class="view-wrapper">
        <cube-scroll-nav @change="changeHandler">
          <cube-scroll-nav-panel
            v-for="item in data"
            :key="item.name"
            :label="item.name">
            <ul>
              <li v-for="food in item.foods" :key="food.index">
                <div>
                  <img :src="food.icon">
                  <p>{{food.name}}</p>
                </div>
              </li>
            </ul>
          </cube-scroll-nav-panel>
        </cube-scroll-nav>
      </div>
</div>

</template>
<script>
import Nav from '../components/common/Nav.vue'
import goodsData from '../data/goods-list.json'
const goods = goodsData.goods

export default {
    data() {
      return {
        data: goods
      }
    },
    methods: {
      changeHandler(label) {
        console.log('changed to:', label)
      }
    }
    
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.view-wrapper
    position: fixed
    top: 50px
    left: 0
    bottom: 0
    width: 100%
.cube-scroll-nav-bar
    border-bottom: 1px solid #f4f4f4
.cube-scroll-nav-panel
    width: 90%
    margin: auto
    img
        width: 114px
        height: 114px
    ul
        overflow: hidden
        font-size: 14px
        line-height: 1.4
        color: #666
    li
        float: left
        width: 50%
    div
        width: 114px
        margin: 0 auto 15px
        p
            overflow: hidden
            white-space: nowrap
            text-overflow: ellipsis
.cube-scroll-nav-panel-title
    padding: 15px
    font-size: 16px
    text-align: center
</style>