uniapp之scroll-view组件的练习使用（制作可滑动的菜单）

最新推荐文章于 2025-11-07 16:57:10 发布

原创最新推荐文章于 2025-11-07 16:57:10 发布 · 2.3w 阅读

7 ·

CC 4.0 BY-SA版权

uni-app开发专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用uniapp的scroll-view组件创建一个可滑动的菜单。在实践中，通过v-for循环展示菜单项，利用navigator组件进行页面跳转，并探讨了CSS样式设置，包括white-space: nowrap和display: inline-block，以实现菜单项的横向排列。同时，提到了navigator动画效果的使用和关闭。

今天仔细研究了一下uniapp的scroll-view组件使用,顺便就做了一个可滑动的菜单，点击后能够切换样式

欢迎到https://www.uniapp.club/thread-57.htm交流学习

其中，还有用到其他知识点有：

1.v-for循环数据把菜单名字循环显示出来（注意一定要加：:key=""）,不然编辑器会报错，虽然不影响使用，但是看着不舒服

1	`v-for="(menu, indexs) in categories"` `:key="indexs"`

2.navigator标签组件，也就是相当于HTML的A 标签，最新的1.70版本更新了可以设置页面动画效果。

但是实际使用中感觉没有动画更流畅，animation-type="none"就是关闭动画，支持的动画有：

animation-type

String

pop-in/out

当 open-type 为 navigateTo、navigateBack 时有效，窗口的显示/关闭动画效果，详见：窗口动画

1	`<navigator` `url="../pages/scroll-view"` `animation-type="none">文档</navigator>`

3.CSS样式设置：主要是下面两个需要注意，不然不会横排

在scroll-view控件的属性里设置：white-space: nowrap; (不换行)

在子控件里设置： display: inline-block;

4.点击后切换样式

  methods: {

            taps(e) {

                console.log(e)

                _this.currentIndex = e;

            }

        }

<scroll-view class="menus" scroll-x="true">

<view v-for="(menu, indexs) in categories" :key="indexs" :class="[indexs == currentIndex ? 'menuActive' : '']" @tap="taps(indexs)">

{{menu.name}}

</view>

</scroll-view>

100

101

102

103

104

105

<template>

<view class="">

<view class="header-cate">

<scroll-view class="menus" scroll-x="true">

<view v-for="(menu, indexs) in categories" :key="indexs" :class="[indexs == currentIndex ? 'menuActive' : '']" @tap="taps(indexs)">

{{menu.name}}

</view>

</scroll-view>

</view>

<view class="swiper-item center uni-h3 uni-link">

<navigator url="../pages/scroll-view" animation-type="none">文档</navigator>

</view>

</template>

<script>

var _this;

export default {

data: {

currentIndex: 0,

categories:[

{cateId : 0, name : "热点推荐"},

{cateId : 1, name : "uniapp文档"},

{cateId : 2, name : "uniapp教程"},

{cateId : 3, name : "demo"},

{cateId : 4, name : "前端开发"},

],

},

onLoad: function(options) {

console.log("onLoad");

_this = this;

},

onHide: function() {

console.log("onHide");

},

onShow: function() {

console.log("onShow");

},

methods: {

taps(e) {

console.log(e)

_this.currentIndex = e;

}

</script>

<style>

/*

.menus {

white-space: nowrap;

width: 100%;

}

.menus view {

display: inline-block;

width:100upx;

height: 80upx;

line-height: 80upx;

text-align: center;

font-size: 36upx;

}

.menuActive {

color: #900;

border-bottom: 2px solid #900;

} */

/* 首页分段器 */

.header-cate {

width: 100%;

height: 42px;

background: #FFF;

border-bottom: 2px solid #F0F0F0;

/* position: fixed; */

/* z-index: 1; */

/* left: 0; */

/* top: 100upx; */

}

/* 头部滚蛋菜单 */

.menus {

white-space: nowrap;

text-align: center;

}

.menus view {

width: auto;

padding: 0 12px;

margin: 0 8px;

line-height: 42px;

display: inline-block;

text-align: center;

font-size: 30upx;

}

.menus view:first-child {

margin-left: 0;

}

.menus view:last-child {

margin-right: 0;

}

.menuActive {

border-bottom: 2px solid #DE533A !important;

color: #DE533A;

}

/* 文字相关 */

.center {

justify-content: center;

text-align: center;

}

</style>

uniapp之scroll-view组件的练习使用 （制作可滑动的菜单）

3 条评论

uniapp之scroll-view组件的练习使用（制作可滑动的菜单）