uniapp 左右滑动切换页面并切换tab

实现效果如图

要实现底部内部的左右滑动切换带动上方tab栏的切换,并且下方内容要实现纵向滚动 ,所以需要swiper,swiper-item,scroll-view组合使用

tab栏部分

<view class="tabs"><view class="tab_item" v-for="(item,index) in tabList" :key="index" @click="tabSwitch(item,index)"><view class="tab_name" :class="activeTab==index?'act_name':''">{{item.name}}</view><view class="tab_cover" v-if="activeTab!=index"></view><image v-else :src="getimg('leaderboard_toggle.png')" style="width: 30rpx;height: 11rpx;"></image></view></view>

 tab栏点击切换,需要重新调取数据

tabSwitch(item, index) {this.scrollTop = 0this.activeTab = index// this.dataList = []this.getData()},

下方内容部分

<swiper class="data_list" @change="swipeIndex" :current="activeTab":duration="300" previous-margin="0" :style="{ height: (pageHeight-205)+'px' }" :circular="true"><swiper-item v-for="(val,idx) in tabList" :key="idx"><scroll-view v-if="dataList.length>0" scroll-y="true" :style="{ height: (pageHeight-205)+'px' }":scroll-top="scrollTop"><view style="padding-bottom: 100rpx;"><view class="data_item" :class="index*1+1<4?'act_item'+(index*1+1):''"v-for="(item,index) in dataList" :key="index" @click="goDetail(item,index)"><view class="le"><image :src="getimg('Leaderboard_'+(index*1+1)+'.png')" mode="heightFix"style="height: 112rpx;"></image><view class="item_content">{{item.idea_name}}</view></view><view class="like_num">{{item.likecount}}</view></view></view></scroll-view><view v-else class="data_none" :style="{ height: (pageHeight-205)+'px' }"><image :src="getimg('null-page.png')" style="width: 380rpx;height: 380rpx;"></image><view class="nothing">空空如也~</view></view></swiper-item></swiper>

滑动切换,改变上方tab栏状态,并重新调取数据

swipeIndex(e){this.activeTab = e.detail.currentthis.scrollTop = 0this.getData()}

以上即可实现页面左右滑动切换带动tab栏切换

但是,上面这种方式适合tab栏目比较少,内容列表也比较短的情况,如果tab栏项目很多,内容数据也很多,用swiper做切换会很卡顿,这个官方地址也有介绍swiper | uni-app官网

我懒得去研究怎么去优化他,不过这个博主的优化方式很厉害,可以借鉴一下,附上地址: 

uni-app swiper数量过多时卡顿优化方案_uniapp swiper卡顿_菜鸟驿站2020的博客-CSDN博客 

所以当数据很多时,我使用了touch事件加动画的方式做切换

如图,tab栏选项很多,内容列表数据也很多

 

tabs部分

<view class="tab_box"><view style="max-width: 600rpx;height:80rpx ;"><u-tabs :list="tabsList" :current="actTab" keyName="category_name" @click="tabSwitch" lineWidth="20"lineHeight="4" lineColor="#000000":activeStyle="{color: '#000000',fontWeight: 'bold',transform: 'scale(1.4)'}":inactiveStyle="{color: '#666666',transform: 'scale(1.2)'}"></u-tabs></view><view class="more" @click="cateShow = true"><image :src="getimg('originality_label.png')" style="width: 50rpx;height: 50rpx;"></image></view></view>

列表部分

<view class="data_list" @touchstart="touchStart" @touchend="touchEnd" :animation="animationData" :style="{ height: (pageHeight-(marginTop*1+65))+'px' }"><scroll-view scroll-y="true" :style="{ height: (pageHeight-(marginTop*1+65))+'px' }"@scrolltolower="getBottom" :lower-threshold="80" :scroll-top="scrollTop"><view v-if="dataList.length>0" style="padding-bottom: 100rpx;"><view class="data_item" v-for="(item,index) in dataList" :key="index"@click="goDetail(item,index)"><view class="data_top"><image :src="getimg('originality_quote.png')" style="width: 64rpx;height: 64rpx;"></image><view class="data_content">{{item.idea_name}}</view><view class="lab_box" v-if="item.tag_list && item.tag_list.length>0"><view class="lab_item" v-for="(val,idx) in item.tag_list" :key="idx">{{val.tag_name}}</view></view><view class="times">{{item.updatetime | getDateDiff}}</view></view><view class="data_bot"><view class="share" @click.stop="goShare(item,index)"><image :src="getimg('share_gray.png')" style="width: 36rpx;height: 36rpx;"></image><view class="share_tt">分享</view></view><view class="infos"><view class="comm"><image :src="getimg('review_gray.png')" style="width: 44rpx;height: 44rpx;"></image><view class="comm_num">{{item.comment_count}}</view></view><view class="comm" @click.stop="addLike(item,index)"><image :src="item.is_like?getimg('like_red.png'):getimg('like_gray.png')"style="width: 44rpx;height: 44rpx;"></image><view class="comm_num">{{item.like_count}}</view></view></view></view></view></view><view v-else class="data_none" :style="'margin-top:'+(marginTop*1+150)+'px;'"><image :src="getimg('null-page.png')" style="width: 380rpx;height: 380rpx;"></image><view class="nothing">空空如也~</view></view></scroll-view></view>

 如代码所以,我使用了touchstart,和touchend事件,并且加了:animation="animationData"

            data(){return{scrollTop: 0,startX: 0,startY: 0,animationData: {}, // 动画}}

onLoad中需要先创建动画实例 

onLoad() {uni.getSystemInfo({success: res => {this.pageHeight = res.windowHeight;}})// #ifdef MP-WEIXINconst systemInfo = wx.getSystemInfoSync();const res = wx.getMenuButtonBoundingClientRect();this.height = (res.top - systemInfo.statusBarHeight) * 2 + res.heightthis.marginTop = this.height + systemInfo.statusBarHeight// #endif// 创建动画实例this.animation = uni.createAnimation({timingFunction: 'ease',duration: 120})},

touchend结束事件中计算手指滑动距离,判断滑动方向并重新调用接口加载数据,并且在判断完滑动方向之后加动效,不让左右滑动看起来生硬

touchStart(event) {this.startX = event.touches[0].pageX;this.startY = event.touches[0].pageY;},touchEnd(event) {let deltaX = event.changedTouches[0].pageX - this.startX;  let deltaY = event.changedTouches[0].pageY - this.startY;if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX)>60) {if (deltaX < 0) { //往左if (this.actTab == this.tabsList.length - 1) {this.actTab = 0} else {this.actTab = this.actTab * 1 + 1}this.cate_id = this.tabsList[this.actTab].id// 动画:左出右进this.animation.translateX('-100%').step().opacity(0).step({duration: 10}).translateX('100%').step({duration: 10}).translateX(0).opacity(1).step()this.animationData = this.animation.export()setTimeout(() => {this.animationData = {}}, 250)this.dataList = []this.page = 1this.getData()this.goJust()  //scrollTop改为0} else if (deltaX > 0) { //往右if (this.actTab == 0) {this.actTab = this.tabsList.length - 1} else {this.actTab = this.actTab * 1 - 1}this.cate_id = this.tabsList[this.actTab].id// 动画:右出左进this.animation.translateX('100%').step()  //先横向向右移至100%,即整块移没.opacity(0).step({    //再使滑块部分透明duration: 10}).translateX('-100%').step({   //然后趁透明横向向左移至-100%duration: 10}).translateX(0).opacity(1).step() //接着横向向右移动至初始位置并恢复透明度this.animationData = this.animation.export()// 为避免uniapp动画只有第一次生效,必须延迟删除动画实例数据setTimeout(() => {this.animationData = {}}, 250)this.dataList = []this.page = 1this.getData()this.goJust()  //scrollTop改为0} else { // 挪动距离0}}else{}},

最后一步,因为内容包裹在scroll-view里,所以触底加载下一页写在scroll-view的触底事件里@scrolltolower="getBottom"

getBottom() {if (this.page < this.last_page) {this.page += 1this.getData()}},

 

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

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

相关文章

完成图像反差处理

bmp图像的前54字节为图像头&#xff0c;第19个字节开始4字节为图像宽&#xff0c;第23字节开始4字节为图像高&#xff0c;图像大小为&#xff1a;972*720*3542099574&#xff0c;为宽*高*像素点头&#xff0c;如下&#xff1a; 图像的反差处理

⌈算法进阶⌋图论::并查集——快速理解到熟练运用

目录 一、原理 1. 初始化Init 2. 查询 find 3. 合并 union 二、代码模板 三、练习 1、 990.等式方程的可满足性&#x1f7e2; 2、 1061. 按字典序排列最小的等效字符串&#x1f7e2; 3、721.账户合并 &#x1f7e1; 4、 839.相似字符串组&#x1f7e1; 5、 2812.找出最安全…

智能优化算法:猎豹优化算法-附代码

智能优化算法&#xff1a;猎豹优化算法 文章目录 智能优化算法&#xff1a;猎豹优化算法1.猎豹优化算法1.1 初始化1.2 搜索策略1.3坐等策略1.4攻击策略 2.实验结果3.参考文献4.Matlab5.python 摘要&#xff1a;CO算法是Mohammad AminAkbari等人于2022年受自然界猎豹狩猎启发而提…

JUL 日志 - 最简单易用的Java日志框架

在正式的生产环境下是不能使用 System.out 进行日志记录的 因为 System.out 不能提供时间、线程、执行过程 等信息&#xff0c;如果要手动打印输出则会非常麻烦 而日志就帮我们把这些事给干了 接下来我们学一个最简单的日志框架 JUL JUL全称Java util Logging是java原生的日志框…

支付整体架构

5.4 支付的技术架构 架构即未来&#xff0c;只有建立在技术架构设计良好的体系上&#xff0c;支付机构才能有美好的未来。如果支付的技术体系在架构上存在问题&#xff0c;那么就没有办法实现高可用性、高安全性、高效率和水平可扩展性。 总结多年来在海内外支付机构主持和参与…

Nginx负载均衡以及keepalived高可用实验

Vip 10.1.122 Keepalived-master 10.1.1.132Keepalied-backup 10.1.1.133Realserver_1 10.1.1.136Realserver_2 10.1.1.137 四台机器上安装nginx&#xff0c;编译安装的话需要另外安装pcre包支持&#xff0c;安装在/usr/local/nginx Keepalived-master 和backu…

Vue+SpringBoot后台管理系统:Vue3+TypeScript项目搭建(一)

写在开始:一个搬砖程序员的随缘记录文章目录 一、Node安装二、Vue CLI安装三、相关的版本四、创建Vue3TypeScript项目五、Vue项目初始化六、项目启动 一、Node安装 查看Note版本 node -v查看npm版本 npm -v然后将npm升级至最新版本 npm -g install npm将npm下载源换至http:…

项目中使用git vscode GitHubDesktopSetup-x64

一、使用git bash 1.使用git bash拉取gitee项目 1.在本地新建一个文件夹&#xff08;这个文件夹是用来存放从gitee上拉下来的项目的&#xff09; 2.在这个文件夹右键选择 git bash here 3.输入命令 git init (创建/初始化一个新的仓库) 4.输入命令 git remote add origin …

生成式人工智能模型:提升营销分析用户体验

使用生成式人工智能来改善分析体验&#xff0c;使业务用户能够询问有关我们数据平台中可用数据的任何信息。 在本文中&#xff0c;我们将解释如何使用新的生成式人工智能模型 ( LLM ) 来改善业务用户在我们的分析平台上的体验。假设我们为零售销售经理提供 Web 应用程序或移动应…

【问题解决】Git命令行常见error及其解决方法

以下是我一段时间没有使用xshell&#xff0c;然后用git命令行遇到的一些系列错误和他们的解决方法 遇到了这个报错&#xff1a; fatal: Not a git repository (or any of the parent directories): .git 我查阅一些博客和资料&#xff0c;可以解决的方式&#xff1a; git in…

迅镭激光PL12050重载型激光切管机中标国内知名企业美的集团!

近日&#xff0c;迅镭激光重型激光切管机中标国内知名企业——美的集团! 成立于2002年的菱王电梯&#xff0c;是美的集团暖通与楼宇事业部旗下的专业电梯品牌 &#xff0c;业务覆盖电(扶)梯的研发、设计、制造、销售、安装和维保&#xff0c;自主研发的8m/s超高速电梯和8吨超重…

题34(在排序数组中查找元素的第一个和最后一个位置)

使用二分查找 此题的关键在于找到左端点和右端点 找中点 两种操作 左端点用第一个方式 右端点用第二种&#xff0c;避免死循环 二分模板 class Solution { public:vector<int> searchRange(vector<int>& nums, int target) {if(nums.size()0) return{-…

Hadoop理论及实践-HDFS读写数据流程(参考Hadoop官网)

NameNode与DataNode回顾 主节点和副本节点通常指的是Hadoop分布式文件系统&#xff08;HDFS&#xff09;中的NameNode和DataNode。 NameNode&#xff08;主节点&#xff09;&#xff1a;NameNode是Hadoop集群中的一个核心组件&#xff0c;它负责管理文件系统的命名空间和元数据…

搭建Docker环境

目录 一、docker环境搭建 1、卸载旧版本docker 2、安装依赖和设置仓库 3、安装docker 4、启动并加入开机启动 5、验证是否安装成功 二、利用docker搭建nginx 1、拉取镜像 2、启动容器&#xff0c;部署nginx 一、docker环境搭建 1、卸载旧版本docker yum remove docke…

C++笔记之字节数组的处理

C笔记之字节数组的处理 code review! 文章目录 C笔记之字节数组的处理1.字节数组打印2.将字节数组转换为十六进制字符串并打印3.将字符串转为字节数组4.将字节数组转为字符串5.字节数组和字符数组的区别6.字节数组用于二进制数据存储7.字节数组用于网络通信数据传输8.使用 un…

如何创造千亿项目?合法合规的绿色消费增值积分,或许能冲出赛道

电商行业的竞争越来越激烈&#xff0c;大部分的电商平台都面临着这三大难题&#xff1a;如何吸引用户、如何留存用户以及如何让用户为平台带来更多的效益。为了解决这三大问题&#xff0c;我们提出了创造千亿项目的商业模式——绿色消费增值积分系统&#xff0c;帮助企业冲出赛…

文档控件DevExpress Office File API v23.1新版亮点 - 支持.NET MAUI

DevExpress Office File API是一个专为C#, VB.NET 和 ASP.NET等开发人员提供的非可视化.NET库。有了这个库&#xff0c;不用安装Microsoft Office&#xff0c;就可以完全自动处理Excel、Word等文档。开发人员使用一个非常易于操作的API就可以生成XLS, XLSx, DOC, DOCx, RTF, CS…

维深(Wellsenn):2023中国消费端VR内容开发商调研报告(附下载

关于报告的所有内容&#xff0c;公众【营销人星球】获取下载查看 核心观点 国内互联网大厂商入局VR&#xff0c;字节跳动、网易表态明确。字节跳动2021年收购国内头部VR硬件厂商PICO后&#xff0c;加速构建VR内容生态&#xff0c;2021年 成立海南创见未来当前已推出VR视频应用…

Docker安装 elasticsearch-head

目录 前言安装elasticsearch-head步骤1&#xff1a;准备1. 安装docker2. 搜索可以使用的镜像。3. 也可从docker hub上搜索镜像。4. 选择合适的redis镜像。 步骤2&#xff1a;拉取elasticsearch-head镜像拉取镜像查看已拉取的镜像 步骤3&#xff1a;创建容器创建容器方式1&#…

免费实用的日记应用:Day One for Mac中文版

Day One for Mac是一款运行在Mac平台上的日记软件&#xff0c;你可以使用Day One for mac通过快速菜单栏条目、提醒系统和鼓舞人心的信息来编写更多内容&#xff0c;day one mac版还支持Dropbox同步功能&#xff0c;想要day one mac中文免费版的朋友赶紧来试试吧&#xff01; …