草庐IT

【微信小程序】实现页面tab切换效果

小余努力搬砖 2023-04-16 原文

目录

前言

本次效果展示

一、如何实现页面tab

1.使用内置组件scroll-view

2.实现点击时出现的背景样式

3.使用scroll-into-view,实现点击时自动滚动


前言

本次主要内容是介绍页面tab的开发,如何实现tab与页面内容联动呢?关注我就知道!

本次效果展示

 

一、如何实现页面tab

1.使用内置组件scroll-view

如下图所示,我们需要使用到红色框框中的属性,此属性可也实现滚动

这里有一个大坑,不管是使用scroll-x还是scroll-y遍历数据都是出现在左边一数列(这里我们只关注scroll-x、scroll-y)

<scroll-view scroll-x="true" class='scroll-view-t' :scroll-into-view="scrollinto">
<view v-for="(item,index) in 20 " :key='index' :id="'tab'+index" 
		:class="currentIndex==index?'active':''" @click="changeTab(index)">
	{{item}}
</view>
</scroll-view>
<scroll-view scroll-y="true" :style="'height:'+scrollH+'px'">
	<view v-for="(item,index) in 100 " :key='index'>
		{{item}}
	</view>
</scroll-view>

我们只能通过样式来改变它,让它横过来

    .scroll-view-t view {
		display: inline-block;
		font-size: 32rpx !important;
		margin: 0 15rpx;
	}
	.scroll-view-t {
		white-space: nowrap;
		height: 88rpx;
		line-height: 88rpx;
	}

 

2.实现点击时出现的背景样式

这里我们需要定义一个默认的索引currentIndex,在通过点击事件所传出去的索引进行判断,从而获得当前所点击的对象给到样式,样式我们就用三元表达式判断赋予样式,如下点击方法

changeTab(index) { //nabbar栏点击切换
				// if (this.currentIndex === index) return
				this.currentIndex = index
				// this.scrollinto = 'tab' + index
				// if (this.currentIndex < 10) {
				// 	this.scrollinto = 'tab0'
				// }
			},

如下是绑定的点击事件和三元表达式判断赋予样式,其中背景样式提前写好了 

<view v-for="(item,index) in 20 " :key='index' :id="'tab'+index" 
	:class="currentIndex==index?'active':''" @click="changeTab(index)">
	{{item}}
</view>

 不过现在只实现了通过点击样式发生改变,感觉实现了tab切换,眼下要解决点击时tab这个导航条也要自己滚动起来,不能一边手动滚动,然后再点击吧

3.使用scroll-into-view,实现点击时自动滚动

使用它的目的主要是,在点解tab时可以实现,你向那个方向点,他就往那个方向滚动,不过在点回去的时候,就有坑了,需要对其作出判断 

 阅读文档很难理解对吧,我在这里说说我的理解,这里是想要我们通过在scroll-view中属性scroll-into-view绑定一个元素,此元素还要获得id,此id还不能已数字开头,此id就是移动的关键,需要绑定,所遍历内容的索引,从而实现往哪里滚动,不过想点回去就需要进行判断

如下代码中在scroll-view,使用scroll-into-view绑定了一个自己定义的空元素scrollinto

在v-for遍历后获得了索引,id就通过索引进行了绑定,拼接了以tab开头

<scroll-view scroll-x="true" class='scroll-view-t' :scroll-into-view="scrollinto">
			<view v-for="(item,index) in 20 " :key='index' :id="'tab'+index" 
			:class="currentIndex==index?'active':''" @click="changeTab(index)">
				{{item}}
			</view>
</scroll-view>

实现点击滚动很简单,要滚动回去就要判断了,如下代码,只要当前的this.scrollinto = 'tab' + index就能实现点击就滚动,回去是就要判断当前点击的缩影,手动赋值,给一个最好的区间,这样效果更好

changeTab(index) { //nabbar栏点击切换
				if (this.currentIndex === index) return
				this.currentIndex = index
				this.scrollinto = 'tab' + index
				if (this.currentIndex < 10) {
					this.scrollinto = 'tab0'
				}
			},

结束语:

本次分享到此结束,有问题可以找我嗷!!!

 

有关【微信小程序】实现页面tab切换效果的更多相关文章

  1. ruby-on-rails - Ruby on Rails with Haml - 如何从 erb 切换 - 2

    我正在从erb文件切换到HAML。我将hamlgem添加到我的系统中。我创建了app/views/layouts/application.html.haml文件。我应该只删除application.html.erb文件吗?此外,仍然有/public/index.html文件被呈现为默认页面。我想创建自己的默认index.html.haml页面。我应该把它放在哪里以及如何使系统呈现该文件而不是默认索引文件?谢谢! 最佳答案 是的,您可以删除任何已转换为HAML的View的ERB版本。至于你的另一个问题,删除public/index/h

  2. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征,我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现,但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  3. ruby CSV : How can I read a tab-delimited file? - 2

    CSV.open(name,"r").eachdo|row|putsrowend我得到以下错误:CSV::MalformedCSVErrorUnquotedfieldsdonotallow\ror\n文件名是一个.txt制表符分隔文件。我是专门做的。我有一个.csv文件,我转到excel,并将文件保存为.txt制表符分隔的文件。所以它是制表符分隔的。CSV.open不应该能够读取制表符分隔的文件吗? 最佳答案 尝试像这样指定字段分隔符:CSV.open("name","r",{:col_sep=>"\t"}).eachdo|row|

  4. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目:明明的随机数题目输入描述输出描述:示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od,od薪资待遇,od机试题清单华为OD机试真题大全,用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  5. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  6. MIMO-OFDM无线通信技术及MATLAB实现(1)无线信道:传播和衰落 - 2

     MIMO技术的优缺点优点通过下面三个增益来总体概括:阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下,MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中,可以获得复用增益,即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中,可以获得分集增益,即可靠性性能的改善。分集增益用独立衰落支路数来描述,即分集指数。在使用了空时编码的MIMO系统中,由于接收天线或发射天线之间的间距较远,可认为它们各自的大尺度衰落是相互独立的,因此分布式MIMO

  7. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说,前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可,但要是匹配的code码比较多或者多个页面用到时,为了便于后期维护,后台就会使用字典表让前端匹配,下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs?{{method(a,b)}}可以看到,上述代码是一个调用方法传值的操作,在vue中很常见,多用于数据之间的转换,但由于微信小程序诸多限制的原因,你并不能优雅的这样操作,可能有人会说,为什么不用if判断实现呢?但是if判断的局限性在于如果存在数据量过大时,大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  8. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  9. 微信小程序开发入门与实战(Behaviors使用) - 2

    @作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中,用于实现

  10. 【Java入门】使用Java实现文件夹的遍历 - 2

    遍历文件夹我们通常是使用递归进行操作,这种方式比较简单,也比较容易理解。本文为大家介绍另一种不使用递归的方式,由于没有使用递归,只用到了循环和集合,所以效率更高一些!一、使用递归遍历文件夹整体思路1、使用File封装初始目录,2、打印这个目录3、获取这个目录下所有的子文件和子目录的数组。4、遍历这个数组,取出每个File对象4-1、如果File是否是一个文件,打印4-2、否则就是一个目录,递归调用代码实现publicclassSearchFile{publicstaticvoidmain(String[]args){//初始目录Filedir=newFile("d:/Dev");Datebeg

随机推荐