关于——在小程序遇到的问题如何解决(持续更新...)

最新推荐文章于 2023-06-20 21:30:45 发布

萧先生.

最新推荐文章于 2023-06-20 21:30:45 发布

阅读量349

点赞数

分类专栏：小程序文章标签：小程序

本文链接：https://blog.youkuaiyun.com/qq_45955475/article/details/110355078

版权

小程序专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在小程序中处理scroll-view组件滚动的方法，包括水平和垂直滚动的配置，以及scroll-top和scroll-left的使用。同时，详细讲解了如何设置和操作tabBar，包括颜色、图标、文字内容的设定，以及动态修改tabBar内容的技巧。对于navigator组件和wx.switchTab API的使用也进行了说明。

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

1.scroll-view组件

水平滚动使用方法：

（1） scroll-view的css需要设置white-space:nowrap;这个属性。还有需要设置scroll-x

（2） scroll-view的子集需要设置display:inline-block

垂直滚动使用方法：需要给scroll-view一个固定高度

通用说明：

（1） scroll-top，scroll-left是指定滚动条滚动到设置的位置，不带单位，就一个数值。

（2） scroll-left是水平滚动的时候用的，scroll-top是垂直滚动的时候用的。它们的值可以是动态的，也就是可以通过setData来动态设置数值。

（3） scroll-with-animation 是水平或者垂直滚动时的动画效果，如果没有这个属性，当设置scroll-top，scroll-left的值的时候，就是直接跳转到指定位置，并没有滑到指定位置的动画效果。

在这里插入图片描述

方法：在 app.json中设置tabar属性

"tabBar": {

    "color": "#333",

    "selectedColor": "#972524",

    "backgroundColor": "#fff",

    "list": [

        {

            "pagePath": "pages/index/index",

            "iconPath": "/public/img/index/idx-k.png",

            "selectedIconPath": "/public/img/index/idx-s.png",

            "text": "首页"

        },

        {

            "pagePath": "pages/examNewsIfo/examNewsIfo",

            "iconPath": "/public/img/index/zx-k.png",

            "selectedIconPath": "/public/img/index/zx-s.png",

            "text": "招考资讯"

        },

        {

            "pagePath": "pages/startCourseList/startCourseList",

            "iconPath": "/public/img/index/kb-k.png",

            "selectedIconPath": "/public/img/index/kb-s.png",

            "text": "近期开班"

        },

        {

            "pagePath": "pages/myCenter/myCenter",

            "iconPath": "/public/img/index/my-k.png",

            "selectedIconPath": "/public/img/index/my-s.png",

            "text": "我的"

        }]

    }