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官网现成的!加以利用。
相关文章:
uniapp,导航栏(切换项)有多项,溢出采取左滑右滑的形式展示
一、实现效果 当有多项的导航,或者说切换项,超出页面的宽度,我们采取可滑动的方式比较好一些!并且在页面右边加个遮罩,模拟最右边有渐变效果! 二、实现代码 html代码: <!-- 头部导航栏 --…...
计算机网络面经-什么是IPv4和IPv6?
前言 Internet协议(IP)是为连接到Internet网络的每个设备分配的数字地址。它类似于电话号码,是一种独特的数字组合,允许用户与他人通信。IP地址主要有两个主要功能。首先,有了IP,用户能够在Internet上被识别…...
彻底讲透:如何写sql能够有效的使用到复合索引?
在MySQL中,有效的使用复合索引需要确保查询条件按照索引定义的列顺序进行。以下是一个具体的例子: 假设我们有一个sales表,它有四个字段:customer_id、product_category、sale_date和amount。为了优化包含这些字段查询的性能&…...
在Spring Boot中如何处理跨域请求(CORS)?
什么是跨域? 跨域(Cross-Origin Resource Sharing,CORS)是一种机制,它允许在 Web 页面上运行的脚本能够请求从不同源(域名、协议或端口)的资源。在浏览器安全策略中,有一条称为同源…...
好就业三种专业#信息安全#云计算#网络工程
一、信息安全专业 根据2021年网络安全宣传周白皮书的观察结果,网络安全产业对于人才的需求正以高速增长的趋势呈现,当前网络安全行业存在着巨大的人才缺口,平均供求比例约为1:2。这一现象导致了资深人才的储备不足,并且新人才的培…...
electron-builder打包
打包配置: "build": {"appId": "cc11001100.electron.example-001", // 程序包名"copyright": "CC11001100", // 版权相关信息"productName": "example-001", // 安装包文件名"direct…...
SQLiteC/C++接口详细介绍sqlite3_stmt类(四)
返回:SQLite—系列文章目录 上一篇:SQLiteC/C接口详细介绍sqlite3_stmt类(三) 下一篇:SQLiteC/C接口详细介绍sqlite3_stmt类(五) 7. sqlite3_bind_parameter_count函数 sqlite3_bind_param…...
微信小程序自定义组件
微信小程序中的自定义组件是指在微信小程序中创建的可重用的、可复用的组件,它可以被多个页面使用。自定义组件可以帮助我们提高开发效率,提高代码的可维护性和可重用性。以下是微信小程序中自定义组件的使用方法: 一. 创建自定义组件 首先…...
python练习3
用户登录注册案例 while True: print("\t\t\t英雄商城登录界面\n") print("~*"*38) print("\t\t\t1.用户登录\n") print("\t\t\t2.用户注册\n") print("\t\t\t3.退出系统\n") print("~*"*38) choice input("…...
docker离线安装并修改存储目录
docker下载 根据cpu选择不同版本,正常x86就选x86_64 下载地址:https://download.docker.com/linux/static/stable/ docker安装 tar -zxvf arm-docker-25.0.4.tgz sudo cp docker/* /usr/bin/ rm -rf docker/* mkdir /etc/docker vi /etc/docker/daemo…...
【云原生 • Kubernetes】认识 k8s、k8s 架构、核心实战
文章目录 Kubernetes基础概念1. 是什么2. 架构2.1 工作方式2.2 组件架构 3. k8s组件创建集群步骤一 基础环境步骤二 安装kubelet、kubeadm、kubectl步骤三 主节点使用kubeadm引导集群步骤四 副节点加入主节点步骤五 部署dashboard Kubernetes核心实战1. 资源创建方式2. Namespa…...
墨菲安全在软件供应链安全领域阶段性总结及思考
向外看:墨菲安全在软件供应链安全领域的一些洞察、思考、行动 洞察 现状&挑战: 过去开发安全体系是无法解决软件供应链安全问题的;一些过去专注开发安全领域的厂商正在错误的引导行业用开发安全思维解决软件供应链安全问题,治…...
智慧公厕:卫生、便捷、安全的新时代厕所变革
在城市快速发展的背景下,公共厕所的建设和管理变得越来越重要。智慧公厕作为厕所变革的一项全新举措,通过建立公共厕所全面感知监测系统,以物联网、互联网、大数据、云计算、自动化控制技术为支撑,实现对公共厕所的智能化管理和运…...
Idea 不能创建JDK1.8的spring boot项目
由于https://start.springboot.io/ 不支持JDK1.8,那么我们需要换idea的springboot创建源,需要换成 https://start.aliyun.com,这也是网上大部分教程说的,但是我这边会报这样的错误: Initialization failed for https:…...
【docker】Docker学习收集
写在前面 新公司开发使用docker来部署和统一大家的开发环境,故再次记录好用的学习链接和自己遇到的奇怪问题 实用链接 Docker教程详细 常用命令 个例问题 Q: docker在终端多开,A终端的修改会影响B吗 A: 会...
LoRa模块在野外科研与环境保护中的角色:科技守护自然之宝
随着科技的不断发展,LoRa(低功耗广域网)模块在野外科研与环境保护中正发挥着越来越重要的作用。其卓越的通信能力、低功耗特性以及良好的穿透能力,为科学家和环保人士提供了一种先进的技术手段,有助于更深入、更全面地…...
全国媒体公关服务资源分析,媒体邀约资源包括哪些?-51媒体网
传媒如春雨,润物细无声,大家好,我是51媒体网胡老师。 全国媒体公关服务资源分析是一个涵盖多方面的复杂议题,主要涉及到不同媒体类型、传播渠道、以及公关策略等多个维度。在当前媒体环境下,媒体公关服务资源主要包括…...
【Springboot3+Mybatis】文件上传阿里云OSS 基础管理系统CRUD
文章目录 一、需求&开发流程二、环境搭建&数据库准备三、部门管理四、员工管理4.1 分页(条件)查询4.2 批量删除员工 五、文件上传5.1 介绍5.2 本地存储5.3 阿里云OSS1. 开通OSS2. 创建存储空间Bucket 5.4 OSS快速入门5.5 OSS上传显示文件 六、配置文件6.1 yml配置6.2 C…...
音频和视频标签
音频用audio标签 controls表示控制栏 loop循环播放音频 autoplay自动播放(浏览器基于隐私一般不支持) <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Com…...
计算机组成原理 运算器的组成实验
一、实验目的 1、认识模拟器 2、熟悉模拟器构建 3、运算器的组成的实验 二、实验内容 1、仿真面板 2、数据通路总体图 3、解释ALU、DR1H、DR1L、DR2H、DR2L、SW_BUS 4、运算器的组成的实验。 (1)连接模拟板线路组成运算器,展示仿真面板图,数据通…...
四旋翼变形控制:RL与MPC在混合动力学中的对比
1. 四旋翼变形控制的技术挑战与解决方案四旋翼变形控制(Quadrotor Morpho-Transition)是当前机器人领域最具挑战性的前沿技术之一。这项技术使机器人能够在空中完成形态变换,实现从飞行模式到地面模式的平滑切换。想象一下,一架四…...
Python基础语法:访问器@property和修改器@xxx.setter
一、简介 访问器和修改器也是装饰器的一种。 property: 访问器,getter xxx.setter: 修改器,setter 访问器和修改器的根本目的是想将属性私有化,提供getter&setter去访问。 访问器和修改器能够做到访问属性其实在调用getter方法࿰…...
Unity安卓打包实战指南:从环境配置到APK生成全链路排错
1. 这不是“入门教程”,而是一份写给真实开发现场的生存指南你打开Unity,新建一个3D项目,拖进一个Cube,点击Play——它动了。你松了口气,觉得“Unity好像也没那么难”。但当你把APK打包发给测试同事,对方回…...
告别沉浸式白屏!UniApp中iOS/Android底部安全区与顶部状态栏颜色自定义全攻略
告别沉浸式白屏!UniApp中iOS/Android底部安全区与顶部状态栏颜色自定义全攻略当开发者尝试在UniApp中实现沉浸式设计时,往往会遇到一个令人头疼的问题——默认的白色安全区和状态栏导致界面元素(如电池图标、信号强度)几乎不可见。…...
top50 BF16算力(TFLOPS) 显卡排行榜 天梯图
排名显卡型号BF16算力(TFLOPS)售价(元)单TFLOPS价格(元)1B200(SXM)45002200000488.892H200(SXM)19801200000606.063MI300X1307750000573.834H100 SXM519501100000564.105RTX PRO 6000 Blackwell1150780000678.266H100 PCIe 80GB1560850000544.877RTX 50906803400050.008A100 80…...
Python开发者首次使用Taotoken接入大模型API的完整步骤指南
🚀 告别海外账号与网络限制!稳定直连全球优质大模型,限时半价接入中。 👉 点击领取海量免费额度 Python开发者首次使用Taotoken接入大模型API的完整步骤指南 对于Python开发者而言,接入大模型API进行应用开发已成为一…...
ARM PMU外部接口与性能监控寄存器详解
1. ARM性能监控寄存器外部接口深度解析性能监控单元(PMU)是现代处理器架构中用于硬件性能分析的核心模块,它通过一组可编程计数器实时捕获处理器微架构层面的各类事件。在ARMv8/v9架构中,PMU不仅可以通过系统寄存器访问,还提供了标准化的外部…...
自制BLE112串口编程器:基于Bootloader的免调试器烧录方案
1. 项目概述:为BLE112模块打造一款免调试器的RS232编程器在嵌入式开发,特别是早期的蓝牙低功耗(BLE)模块应用中,我们常常会遇到一个棘手的问题:官方开发工具链的依赖和限制。以Silicon Labs(当时…...
2026 新视角:化妆品开发的底层逻辑,做好一款产品,从选对原料开始
在化妆品研发链条中,配方架构、生产工艺、包装设计固然重要,但决定一款产品上限的,永远是原料。一款稳定、安全、表现优异的护肤成品,离不开纯净、达标、批次一致的优质原料。对于品牌方、配方师、代工企业而言,原料不…...
Windows 10/11系统下,SecureCRT 8.7.2保姆级安装与激活图文指南(含Keygen使用避坑点)
Windows平台SecureCRT 8.7.2全流程部署与安全配置指南在当今远程运维与网络管理的日常工作中,一款可靠的终端仿真工具如同工程师的瑞士军刀。作为行业标杆的SecureCRT,其8.7.2版本在Windows 10/11环境下的部署却常让新手陷入各种技术陷阱——从安装路径选…...
