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

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