当前位置:   article > 正文

uniapp之scroll-view组件的练习使用 (制作可滑动的菜单)_uniapp swiper scroll-view

uniapp swiper 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">

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/2023面试高手/article/detail/117043
推荐阅读
相关标签
  

闽ICP备14008679号