[uniapp] scroll-view 简单实现 u-tabbar效果

文章目录

      • 方案
      • 踩坑
        • 1.scroll-view 横向失败
        • 2.点击item不滚动?
        • 3. scrollLeft从哪里来?

效果图
在这里插入图片描述

方案

官方scroll-view 进行封装

配合属性 scroll-left Number/String 设置横向滚动条位置 即可

scroll-into-view 属性尝试过,方案较难实现

踩坑

1.scroll-view 横向失败

安装官网的解释
使用竖向滚动时,需要给 <scroll-view> 一个固定高度,通过 css 设置 height;使用横向滚动时,需要给<scroll-view>添加white-space: nowrap;样式。

实际上,还需要再 v-for的子item上添加 display: inline-block;

那有人要说, 我要用display:flex怎么办?

那就在item外层再套个view, 给他设置 display: inline-block;即可

<scroll-view class="scroll-top-tab-bar-box" scroll-with-animation="true" scroll-x="true"
				enable-flex='true' :scroll-left="scrollLeft">
				<!-- 为了保scroll-top-tab-item的flex布局, 在外部套一个scroll-top-tab-item-box的inline-block布局 -->
				<view class="scroll-top-tab-item-box" v-for="(item,index) in tabs" :key="item.id">
					<view class="scroll-top-tab-item">
						<view :id="item.id" class="scroll-top-tab-item-title"
							:class="currentTag==index?'scroll-top-tab-item-title-selected':''"
							@tap="choose(index)">
							{{item.title}}
						</view>
						<image src="https://cdn.froglesson.com/static/cert/top_tab_bar_selected.png"
							v-if="index==currentTag"></image>
						<view class="scroll-top-tab-item-bottom-placeholder" v-else></view>
					</view>
				</view>
			</scroll-view>

2.点击item不滚动?

切记要配合 scroll-with-animation动画开启才有用, 这个好像官网没讲, 也是百度才知道的…

3. scrollLeft从哪里来?


		data() {
			return {
				scrollLeft: 0
			}
		},
		methods: {
		
			choose(index) {

					this.idd = this.tabs[index].id
					this.getScrollLeft(index)
				
			},

			getScrollLeft(index) {
				let query = uni.createSelectorQuery().in(this)
				query.selectAll('.scroll-top-tab-item').boundingClientRect(data => {
					this.scrollLeft = data[index].left - 100
				}).exec()
			},
		},
	};

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

阿里云服务器和腾讯云服务器折扣对比_哪家折扣低?

阿里云服务器和腾讯云服务器根据购买时长可以享受一定的优惠折扣&#xff0c;综合对比下来腾讯云折扣更低&#xff0c;阿腾云来对比下阿里云和腾讯云的云服务器根据购买时长可以享受的常规折扣对比&#xff1a; 目录 阿里云和腾讯云折扣对比 阿里云服务器常规折扣 腾讯云服…

架构评估-架构师之路(十二)

软件系统质量属性 软件系统质量熟悉分为 开发期质量属性 和 运行期质量属性。 质量属性 性能&#xff1a;指 系统的响应能力&#xff0c;如 响应时间&#xff0c;吞吐率。 设计策略&#xff1a;优先级队列、增加计算资源、减少计算开销、引入并发机制、采用资源调度。 可靠…

html学习第2篇---标签(1)

html学习第2篇---标签 1、标题标签h1---h62、段落标签p3、换行标签br4、文本格式化标签5、div标签和span标签6、图像标签img6.1、图像属性6.2、相对路径、绝对路径 7、超链接标签a7.1、属性7.2、分类 8、注释标签和特殊字符8.1、注释8.2、特殊字符 1、标题标签h1—h6 为了使网…

数学——七桥问题——图论

当涉及数学&#xff0c;有很多不同的话题可以讨论。你是否有特定的数学领域、概念或问题想要了解更多&#xff1f;以下是一些常见的数学领域和主题&#xff0c;你可以选择一个或者告诉我你感兴趣的具体内容&#xff0c;我将很乐意为你提供更多信息&#xff1a; 代数学&#xff…

django开发流程

设计model django采用ORM映射&#xff0c;可以在代码中描述数据库的布局 只需要导入from django.db import models 并使类继承models.Model&#xff0c;models中的一个类对应数据库中的一个表&#xff0c;类的变量对应表字段。 创建数据库 $ python manage.py makemigration…

SpringIoC基于注解配置

目录 一、Bean注解标记和扫描 (IoC) 二、组件&#xff08;Bean&#xff09;作用域和周期方法注解 三、Bean属性赋值&#xff1a;引用类型自动装配 (DI) 四、Bean属性赋值&#xff1a;基本类型属性赋值 (DI) 一、Bean注解标记和扫描 (IoC) 一、注解方式介绍 1.注解介绍 和…

解决Springboot创建工程时,pom.xml文件中的插件spring-boot-maven-plugin报红

在初始创建工程完成之后&#xff0c;发现pom文件中有错误 spring-boot-maven-plugin这一行会报红 解决办法&#xff1a;在代码中添加版本信息 <build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-…

Android应用启动流程:从启动到可交互的过程解析

关于作者&#xff1a;CSDN内容合伙人、技术专家&#xff0c; 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 &#xff0c;擅长java后端、移动开发、人工智能等&#xff0c;希望大家多多支持。 目录 一、导读1.1 启动知识储备1.2 Zygote进程1.3 SystemServer进程1.4 …

Git gui教程---第八篇 Git gui的使用 创建一个分支

一般情况下一个主分支下代码稳定的情况下会新建出一个分支&#xff0c;然后在分支上修改&#xff0c;修改完成稳定后再合并到主分支上。 或者几个人合作写一份代码&#xff0c;每个人各一个分支&#xff0c;测试稳定再合并到主分支上。 在git gui选择菜单栏“分支”&#xff0…

Python“牵手”易贝(Ebay)商品列表数据,关键词搜索ebayAPI接口数据,ebayAPI接口申请指南

Ebay平台API接口是为开发电商类应用程序而设计的一套完整的、跨浏览器、跨平台的接口规范&#xff0c; EbayAPI接口是指通过编程的方式&#xff0c;让开发者能够通过HTTP协议直接访问Ebay平台的数据&#xff0c;包括商品信息、店铺信息、物流信息等&#xff0c;从而实现Ebay平…

看个电影就能学会类的加载过程?我不信!

O、前言 今天我们来了解一下关于类的加载过程&#xff0c;这个问题在面试过程中属于高频面试题了。 那么回答的时候&#xff0c;我们往往会采取死记硬背的方式&#xff0c;告诉面试官类的加载过程包括&#xff1a;加载、验证、准备、解析和初始化这5个阶段。 但是如果面试官…

数字孪生引领智慧港口新纪元

随着数字化时代的到来&#xff0c;港口行业也在不断寻求创新&#xff0c;以提高运营效率、优化资源分配&#xff0c;并实现可持续发展。数字孪生技术作为一种强大的虚拟仿真工具&#xff0c;正日益成为智慧港口解决方案的核心。本文带大家一起探讨数字孪生在智慧港口领域的应用…

智慧政务,长远布局——AIGC引领,加速推进数字化政府建设

在人工智能、虚拟现实等领域迅猛发展且日益成熟的背景下&#xff0c;AI行业正迈向蓬勃发展的全新阶段&#xff0c;市场规模持续扩张。与此同时&#xff0c;数字服务也正在蓬勃兴起&#xff0c;新一代信息技术为数字政府构建了坚实支撑&#xff0c;重塑了政务信息化管理、业务架…

SQL 大小敏感问题

在SQL中&#xff0c;关键字和函数名 是不区分 大小写的 比如&#xff08;select、where、order by 、group by update 等关键字&#xff09;&#xff0c;以及函数(ABS、MOD、round、min等) window系统默认是大小写不敏感 &#xff08;ZEN文件和zen 文件 不能同时存在&#xff…

方案:AI边缘计算智慧工地解决方案

一、方案背景 在工程项目管理中&#xff0c;工程施工现场涉及面广&#xff0c;多种元素交叉&#xff0c;状况较为复杂&#xff0c;如人员出入、机械运行、物料运输等。特别是传统的现场管理模式依赖于管理人员的现场巡查。当发现安全风险时&#xff0c;需要提前报告&#xff0…

自己搭建Minecraft服务器并通过cpolar内网穿透实现与公网小伙伴联机我的世界

文章目录 1. Java环境搭建2.安装我的世界Minecraft服务3. 启动我的世界服务4.局域网测试连接我的世界服务器5. 安装cpolar内网穿透6. 创建隧道映射内网端口7. 测试公网远程联机8. 配置固定TCP端口地址8.1 保留一个固定tcp地址8.2 配置固定tcp地址 9. 使用固定公网地址远程联机 …

tomcat更改端口号和隐藏端口号

因为默认端口:8080不会自动隐藏&#xff0c;因此为了更显格调需要将其改为:80 进入tomcat的server文件 将其改为80&#xff0c;之后将tomcat重新启动即可 tomcat启动流程 [rootshang ~]# cd /usr/local/tomcat/apache-tomcat-8.5.92 [rootshang apache-tomcat-8.5.92]# cd b…

【Unity学习笔记】DOTween(2)官方案例

本文中大部分内容学习来自DOTween官方文档 此处无法展示动图&#xff08;懒得录GIF&#xff09;&#xff0c;请下载官方案例场景自行学习 文章目录 场景1 基本补间场景2 动态补间场景3 Shader修改场景4 路径拟合运动场景5 序列播放场景6 UGUI 场景1 基本补间 案例一展示了最基…

Orchestrator自身高可用性方案

目录 获得 HA 的方法 一 没有高可用性 &#xff08;No high availability&#xff09; 使用场景 架构组成 架构图 二 半高可用性&#xff08;Semi HA&#xff09; 三 基于共享数据库后端高可用&#xff08;HA via shared backend&#xff09; 四 基于Raft协议高可用 五…

服务器数据恢复-AIX PV完整镜像方法以及误删LV的数据恢复方案

AIX中的PV相当于物理磁盘&#xff08;针对于存储来说&#xff0c;PV相当于存储映射过来的卷&#xff1b;针对操作系统来说&#xff0c;PV相当于物理硬盘&#xff09;&#xff0c;若干个PV组成一个VG&#xff0c;AIX可以将容量不同的存储空间组合起来统一分配。AIX把同一个VG的所…