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

2023-11-11

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

    

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

uniapp之scroll-view组件的练习使用 (制作可滑动的菜单) 的相关文章

随机推荐

  • 论文带读——3D Neural Field Generation using Triplane Diffusion

    论文带读 3D Neural Field Generation using Triplane Diffusion YssssMikey Tips 我会基本上几天更新一篇论文引读 一般是AIGC模型 3D Diffusion方向每日在Arxi
  • JDBC的实现(IDEA版)

    前期准备 开发环境 IDEA 2021 1 3 JAVA 1 8 MYSQL 8 0 32 msql用户名 root 密码 123 下载MySQL JDBC 驱动 前往MySQL官网下载对应版本的MySQL Connector J驱动 下载
  • pix2pix gan_用python构建pix2pix gan

    pix2pix gan There are times that we want to to transform an image into another style Let s say we have a fine collection
  • 基于WOA-SVM算法的乳腺肿瘤识别算法的MATLAB仿真

    基于WOA SVM算法的乳腺肿瘤识别算法的MATLAB仿真 随着医疗技术的发展 计算机在医学影像领域中的应用越来越广泛 乳腺肿瘤是女性常见的一种肿瘤 准确地进行乳腺肿瘤检测和诊断对女性健康至关重要 本文将介绍一种基于WOA SVM算法的乳腺
  • centos下git相关操作以及部分问题解决方案

    主要记录两件事情 一个是如何git clone github代码到本地 二是git clone到非空文件夹下出错的解决方案 第一 在电脑没有安装git的情况下 手动安装git 具体步骤如下 1 安装依赖的包 yum install curl
  • c++使用curl库发送https请求

    一 环境win7 64位 vs2010 二 文件准备 2 1文件下载 libcurl 下载页面 http curl haxx se download html 我下载的是https curl haxx se download curl 7
  • angular项目打包发布流程

    1 从git更新代码 运行测试看有没有错误 测试ie兼容性 2 修改配置文件并编译打包代码 修改连接服务器的配置文件 双击 3 拷贝文件到服务器 xshell连接到linux 命令 pwd 查看当然文件目录 ll 列出该文件下所有的文件列表
  • Visual Studio 2019解决右侧工具栏消失

    项目场景 准备打开Visual Studio 2019却发现右侧的工具栏消失了 问题描述 新建项目后发现右侧的解决方案资源管理器消失了 不便于添加源文件书写代码 如图 原因分析 可能是以前在操作中将项目移除或删除等等将窗口删掉了 解决方案
  • 用jquery实现简单的表单验证效果

    看了 锋利的jquery 一书 练习了下期中的一个用jquery写表单验证的例子 效果如图 总结 这是个比较简单的表单验证 主要验证了表单中的用户名和邮箱两个必填选项 表单验证其实质是个不断往下过滤的过程 主要思路
  • selenium自动化录入数据

    将csv或者txt里的数据通过selenium自动录入到网页系统里 输入一个数据操作完后自动输入下一个数据 依次遍历所有的数据 比如百度搜索 有十个词要搜索 输入第一个词搜出结果后再接着输入第二个继续搜 依次遍历十个 求大神赐教 给个思路或
  • 21天打卡挑战学习MySQL——《SQL基础入门》第二周 第四篇

    活动地址 CSDN21天学习挑战赛 一 什么是SQL MySQL是一个关系型数据库管理系统 前世 瑞典MySQLAB公司 今生 属于Oracle旗下产品 MySQL是最好的RDBMS Relational Database Manageme
  • Unity游戏界面点击深色模式,游戏会退出问题的解决方法

    问题 在Unity游戏接入到android平台上时 经常会遇到这样的问题 游戏玩着玩着 点击深色模式 游戏会突然退出 具体情形下图所示 一 点击深色模式游戏退出 二 正常情况 三 解决方法 在AndroidManifest xml里 对继承
  • 【Linux】线程详解之线程概念

    前言 在我们的教材中 对线程给出以下的概念 是进程内部的一个执行分支 在进程的内部运行 属于进程的一部分 比进程更加轻量化 可能有的人看完之后都是懵的 什么叫在进程的内部运行 什么又是执行分支 为什么比进程轻量化 我们就带着这三个问题 重新
  • 2023超细致的性能测试流程,你get了吗?

    性能测试 利用工具模拟大量用户操作 验证系统承受的负载情况 性能测试的目的 找到潜在的性能问题或瓶颈 分析并解决 找出性能变化趋势 为后续扩展系统提供参考 测试监控 基准测试 配置测试 负载测试 稳定性测试 对硬件和中间件进行监控 1 学习
  • ubuntu安装ftp服务器(一般配置)

    ubuntu安装ftp服务器 1 安装vsftpd sudo apt get install vsftpd ubuntu10 10自己装了 这步省略 2 配置vsftpd 2 1 修改vsftpd的配置文件 此类配置文件通常位于 etc 目
  • Mysql建立中英文全文索引(mysql5.7以上)

    一 概念 使用索引是数据库性能优化的必备技能之一 在MySQL数据库中 有四种索引 主键索引 普通索引 唯一索引以及我们这里将要介绍的全文索引 FUNLLTEXT INDEX MySQL全文检索是利用查询关键字和查询列内容之间的相关度进行检
  • innodb存储引擎探究(一)

    mysql 体系结构和存储引擎 数据库 物理操作系统文件或者其他形式的文件 实例 mysql数据库由一个共享内存区和后台进程组成 启动mysql实例时 会读取配置文件 安装以下顺序 mysql体系结构 mysql插件式的一个存储引擎可以根据
  • java.nio.file.NoSuchFileException: /usr/share/elasticsearch/config/jvm.options es启动出错(解决)

    今天重新搭建es的时候出现这个问题 以及给相关的文件夹权限但是还是不可以 这里提供一个解决问题的方法 解决思路 放弃自动挂载 采用手动进行将容器内的文件粘贴出来 问题解决 1 直接运行es docker run d name elastic
  • window编写代码,在ubuntu服务器上面远程训练yolov5

    用途 主要用来在window上面编写python相关代码 使用ubuntu的依赖 编写完成后 在ubuntu上面进行训练 此方法其实就是方便在window写代码而已 因为它的代码都会同步到ubuntu上面的 而且它在window上面的pyc
  • uniapp之scroll-view组件的练习使用 (制作可滑动的菜单)

    今天仔细研究了一下uniapp的scroll view组件使用 顺便就做了一个可滑动的菜单 点击后能够切换样式 欢迎到https www uniapp club thread 57 htm交流学习 其中 还有用到其他知识点有 1 v for