uniapp,导航栏(切换项)有多项,溢出采取左滑右滑的形式展示

一、实现效果

当有多项的导航,或者说切换项,超出页面的宽度,我们采取可滑动的方式比较好一些!并且在页面右边加个遮罩,模拟最右边有渐变效果!

二、实现代码

html代码:

<!-- 头部导航栏 --><view class="scroll-con"><scroll-view class="scroll-box" scroll-x="true" @scroll="scroll"><view class="scroll-item" :class="current == index? 'move':''" v-for="(item,index) in routeList" :key="item.id"@click="onchange(index)">{{item.text}}</view></scroll-view><view class="mask"></view></view>

选中的样式:

.move {background: url("../../static/image/index_pages/item-bg.png") no-repeat;background-position: center;background-size: contain;}

所有样式:

  .scroll-box {white-space: nowrap;width: 100%;}.scroll-item {position: relative;display: inline-block;background-color: #F4F4F4;height: 58rpx;text-align: center;width: 128rpx;border-radius: 8rpx;font-size: 24rpx;line-height: 58rpx;font-weight: 400;color: #000;margin-right: 16rpx;}.scroll-con {margin-bottom: 32rpx;position: relative;}.mask {position: absolute;right: 0;top: 0;width: 100rpx;height: 58rpx;background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);}.move {background: url("../../static/image/index_pages/item-bg.png") no-repeat;background-position: center;background-size: contain;}

js里面定义的数据:

routeList: [{id: 1,text: '路线1'},{id: 2,text: '路线2'},{id: 3,text: '路线3'},{id: 4,text: '路线4'},{id: 5,text: '路线5'},{id: 6,text: '路线6'}],current: 0,

methods里面的切换方法:

onchange(index) {this.current = index},

 不是很难对吧,其实也是使用了uniapp官网现成的!加以利用。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/758539.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

鸿蒙Harmony应用开发—ArkTS-转场动画(共享元素转场)

当路由进行切换时&#xff0c;可以通过设置组件的 sharedTransition 属性将该元素标记为共享元素并设置对应的共享元素转场动效。 说明&#xff1a; 从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 属性 名称参数参数描述…

F. Microcycle(dfs 搜寻路径 + 并查集)

解析&#xff1a; 本题的意思是&#xff0c;求一个环的最小的那条边。 并且输出其这个环的点。 我们可以利用并查集&#xff0c;进行确定其是否有环路。在将所用的边从大到小排序。 利用 vector容器&#xff0c;pop_back() 和 push的特性。 起点为 u终点为 v寻找路径。 代…

投简历没回复?9位DBA公众号集结,快上车!

&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是【IT邦德】&#xff0c;江湖人称jeames007&#xff0c;10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】&#xff01;&#x1f61c;&#x1f61c;&#x1f61c; 中国DBA联盟(ACD…

寄快递很麻烦怎么办?无脑方法教会你便宜寄快递!快冲!

现在我们每天都会去寄快递&#xff0c;不仅寄大件还会发物流&#xff0c;但是我们真的了解快递的价格吗&#xff1f;寄快递必须拿到快递驿站吗&#xff1f;去菜鸟驿站寄快递会给我们便宜吗&#xff1f;有没有什么便宜的寄快递的方法呢&#xff1f;驿站会有包装快递的包装袋吗&a…

Wireshare捕获接口中没有本地连接

1. 查看npf服务是否启动 服务名无效&#xff0c;需要安转WinPcap 2. 勾选Npcap Packet Driver (NPCAP) 3. 重新启动Wireshark 重新启动Wireshark后&#xff0c;本地连接有了

SpringCloud从入门到精通速成(一)

文章目录 1.认识微服务1.0.学习目标1.1.单体架构1.2.分布式架构1.3.微服务1.4.SpringCloud1.5.总结 2.服务拆分和远程调用2.1.服务拆分原则2.2.服务拆分示例2.2.1.导入Sql语句2.2.2.导入demo工程 2.3.实现远程调用案例2.3.1.案例需求&#xff1a;2.3.2.注册RestTemplate2.3.3.实…

学生信息管理系统--修改信息(非常详细的修改,更新,撤销,删除逻辑)

目录 概述修改包括的操作修改在每个模块中的应用 详解修改与更新取消删除 特殊概念数据集游标 总结 概述 学生信息管理系统&#xff0c;功能相对简单且代码重复性高&#xff0c;应该采用复用的思想来减少代码的冗余和提高代码的可维护性。然而&#xff0c;对于基础入门项目来说…

NVM使用教程

文章目录 ⭐️写在前面的话⭐️1、卸载已经安装的node2、卸载nvm3、安装nvm4、配置路径以及下载源5、使用nvm下载node6、nvm常用命令7、全局安装npm、cnpm8、使用淘宝镜像cnpm9、配置全局的node仓库&#x1f680; 先看后赞&#xff0c;养成习惯&#xff01;&#x1f680;&#…

Word2vec学习笔记

&#xff08;1&#xff09;NNLM模型&#xff08;神经网络语言模型&#xff09; 语言模型是一个单纯的、统一的、抽象的形式系统&#xff0c;语言客观事实经过语言模型的描述&#xff0c;比较适合于电子计算机进行自动处理&#xff0c;因而语言模型对于自然语言的信息处理具有重…

MySQL学习八:窗口函数(一)

目录 一、窗口函数1. 窗口函数定义2. 窗口函数语法3. 演示表格一4. 窗口的确定4.1 例1&#xff1a;查询各班级总分4.2 例2&#xff1a;查询各班级累计总分4.3 分区子句&#xff08;partition by&#xff09;4.4 排序子句&#xff08;order by&#xff09;4.5 窗口子句&#xff…

单片机-- 数电(3)

编码器与译码器 译码 &#xff1a;将二进制代码转化为其他进制的代码 编码 &#xff1a;就是将其他代码转换为二进制码 编码器的类型 1二进制编码器 用n位二进制数码对2的n次方个输入信号进行编码的电路 2二-十进制编码器 将0到9十个十进制数转化为二进制代码的电路 2…

crossover虚拟机 crossover软件干嘛的 虚拟机软件的使用方法 mac虚拟机装windows

与传统的虚拟机软件&#xff08;如VMware、VirtualBox&#xff09;相比&#xff0c;CrossOver具有更高的运行效率和更好的用户体验。因为它并不创建一个完整的Windows虚拟机&#xff0c;而是仅模拟应用程序所需的运行环境。这使得CrossOver在启动和运行Windows应用程序时更加快…

手撕HashMap底层源码(学习内容全)

day28上 集合框架 标绿已经学习底层&#xff0c;深入底层主要是研究实现类底层 手撕HashMap底层源码 JDK1.7版本的HashMap为例&#xff08;注意实验代码时进行版本切换&#xff09; 代码注释参考理解 //day27初识 public class HashMap<K,V> extends AbstractMap<K,…

SpringBoot3整合Mybatis-Plus与PageHelper包冲突解决

&#x1f60a; 作者&#xff1a; 一恍过去 &#x1f496; 主页&#xff1a; https://blog.csdn.net/zhuocailing3390 &#x1f38a; 社区&#xff1a; Java技术栈交流 &#x1f389; 主题&#xff1a; SpringBoot3整合Mybatis-Plus与PageHelper包冲突解决 ⏱️ 创作时间&a…

Elasticsearch - Docker安装Elasticsearch8.12.2

前言 最近在学习 ES&#xff0c;所以需要在服务器上装一个单节点的 ES 服务器环境&#xff1a;centos 7.9 安装 下载镜像 目前最新版本是 8.12.2 docker pull docker.elastic.co/elasticsearch/elasticsearch:8.12.2创建配置 新增配置文件 elasticsearch.yml http.host…

大模型时代,微软AI投资的布局

这些领域涉及 3D、代码、销售、游戏等多个行业。其中&#xff1a; 在 3D 领域&#xff0c;blackshark.ai 利用 AI 技术提供地理空间数据解决方案&#xff1b;humane 专注于人机交互技术创新&#xff1b;Builder.ai 提供了无需编程知识的应用构建平台。代码方面&#xff0c;GitH…

Java基础学习笔记三

环境变量CLASSPATH classpath环境变量是隶属于java语言的&#xff0c;不是windows操作系统的&#xff0c;和PATH环境变量完全不同classpath环境变量是给classloader&#xff08;类加载器&#xff09;指路的java A 。执行后&#xff0c;先启动JVM&#xff0c; JVM启动classload…

GIS学习

匹配查询&#xff0c;先连接两个表&#xff0c;然后在一个表里面查询 合并两个形状 比较好的colormap http://soliton.vm.bytemark.co.uk/pub/cpt-city/views/totp-cpt.html https://docs.gmt-china.org/latest/cpt/builtin-cpt/ 计算坡度时就要捕捉栅格 重分类时也要捕捉栅…

数据结构:10、排序

本文将会介绍8种排序&#xff0c;并在文章末附上代码 一、排序的概念 排序&#xff1a;所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起来的操作。 稳定性&#xff1a;假定在待排序的记录序列中&#xff0c;…

[蓝桥杯 2019 省 A] 外卖店优先级

模拟 双指针 #include<iostream> #include<algorithm> using namespace std; using ll long long; #define int long long const int N 1e510; const int inf 0x3f3f3f3f; const int mod 1e97;int n,m,ts;bool vis[N]; int a[N]; int last[N]; pair<int,int…