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

今天仔细研究了一下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;

            }

        }

1 2 3 4 5 6

"menus" scroll-x="true">     for="(menu, indexs) in categories" :key="indexs" :class="[indexs == currentIndex ? 'menuActive' : '']" @tap="taps(indexs)">                  {{menu.name}}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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>     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>