uniapp使用scroll-view与swiper组件实现tab滑动切换页面需要注意的问题

傷城~ 2021-08-13 16:18 580阅读 0赞

## 效果图： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tYW9taW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]  
tab栏可以滑动，切换页面跟随tab栏同步滑动。这里需要注意的是使用swiper组件时，它会有一个默认的高度，你必须动态的获取数据列表的高度覆盖原来的默认高度。

> 下面是代码

**html**

<template>
    	<view>
    					<scroll-view class="scroll1" scroll-x="true">
    						<view :class="currentTab==index ? 'select' : ''" :data-current="index" @click="swichNav" v-for="(item,index) in scoll" :key='index'>{
       {item.txt}}
    						</view>
    					</scroll-view>
    					<swiper :current="currentTab" @change="bindChange" class='swp' :style="{ height:aheight?aheight+'px':'auto'}">
    						<swiper-item>
    							<view class="list-item">
    								<view class="list" v-for="(item,index) in list" :key='index'>
    									<view class="list-img">
    										<image :src="item.imgb" mode=""></image>
    									</view>
    									<view class="list-con">
    										<view>{
       {item.tit}}</view>
    										<view class="list-foot">
    											<view>
    												<image src="../../static/images/user.png" mode="" class="user"></image>
    												<view class="username">{
       {item.user}}</view>
    											</view>
    											<view>
    												<image src="../../static/images/love.png" mode="" class="like"></image>
    												<view class="likenum">{
       {item.like}}</view>
    											</view>
    										</view>
    									</view>
    								</view>
    							</view>
    						</swiper-item>
    						<swiper-item>玻尿酸</swiper-item>
    						<swiper-item>水光针</swiper-item>
    						<swiper-item>眼部</swiper-item>
    						<swiper-item>鼻部</swiper-item>
    						<swiper-item>瘦身塑型</swiper-item>
    					</swiper>
    				</view>
    </template>

**js**

<script>
    export default { 
    data() { 
    	return { 
    			currentTab: 0,
    			aheight: '',
    			scoll: [{ 
    					txt: '精选'
    				}, { 
    					txt: '玻尿酸'
    				}, { 
    					txt: '水光针'
    				}, { 
    					txt: '眼部'
    				}, { 
    					txt: '鼻部'
    				}, { 
    					txt: '瘦身塑型'
    				}],
    	}
    }
    onShow(){ 
    			// 动态获取滑动页面高度
    			const query = uni.createSelectorQuery().in(this);
    			query.select('.list').boundingClientRect(data => { 
    			  	this.aheight = data.height
    			}).exec();
    		},
    methods: { 
    			// 滑动页面同步tab栏
    			bindChange: function(e) { 
    				this.currentTab = e.detail.current
    			},
    			//点击tab切换
    			swichNav: function(e) { 
    				var that = this;
    				if (this.currentTab === e.target.dataset.current) { 
    					return false;
    				} else { 
    					this.currentTab = e.target.dataset.current
    				}
    			}
    		}
    }
    <script>

**css**

<style scoped lang="less"> .scroll1 { 
    			width: 100%;
    			white-space: nowrap;
    			padding: 25rpx 0; & view { 
    				white-space: normal;
    				display: inline-block;
    			}
    
    			& view:before { 
    				content: '|';
    				color: #f4f4f4;
    				margin: 0 30rpx;
    			}
    
    			& view:first-child:before { 
    				display: none;
    			}
    
    			.select { 
    				color: #fb6583;
    			}
    		}
    
    		.list-item { 
    			overflow: hidden;
    			margin-left: -1%; .list { 
    				float: left;
    				width: 48%;
    				margin:20rpx 0 0 1%;
    				border: solid 1px #eaeaea;
    				background-color: #ffffff;
    				border-radius: 12rpx; .list-img { 
    					image { 
    						object-fit: fill;
    						width: 100%;
    						border-top-left-radius: 12rpx;
    						border-top-right-radius: 12rpx;
    						height: 364rpx;
    					}
    				}
    
    				.list-con { 
    					padding: 15rpx; .list-foot { 
    						margin-top: 20rpx;
    						display: flex;
    						justify-content: space-between;
    						align-items: center; &>view { 
    							font-size: 26rpx;
    							display: flex;
    							align-items: center;
    						}
    
    						.username { 
    							color: #999999;
    							margin-left: 10rpx;
    							width: 150rpx;
    							overflow: hidden;
    							text-overflow: ellipsis;
    							white-space: nowrap;
    						}
    
    						.user { 
    							width: 50rpx;
    							height: 50rpx;
    						}
    
    						.likenum { 
    							color: #333333;
    							margin-left: 10rpx;
    						}
    
    						.like { 
    							width: 28rpx;
    							height: 28rpx;
    						}
    					}
    				}
    			}
    		}
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tYW9taW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]: /images/20210813/2069e1995ee444c6a65fffe731f0cc05.png

发表评论取消回复

表情：

评论列表（有 0 条评论，580人围观）

还没有评论，来说两句吧...

相关阅读

相关移动端使用Swiper实现左右滑动切换内容

效果图如下： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

青旅半醒/ 2022年12月19日 09:26/ 0 赞/ 420 阅读

相关 mui tab点击切换滑动内容页面左右滑动效果

示例代码如下： <!doctype html> <html> <head> <meta charset="UTF-8"> <

爱被打了一巴掌/ 2022年11月26日 08:45/ 0 赞/ 176 阅读

相关基于swiper和vue实现：点击和滑动页面实现tab切换

点击和滑动页面实现tab切换 > components / tabItem > > 下面有 swiper.vue nav.vue one.vue two.vue …

小咪咪/ 2022年11月20日 08:22/ 0 赞/ 805 阅读

相关 html4如何做滑动tab,swiper4实现移动端导航栏tab滑动切换

swiper4移动端导航栏tab滑动切换效果，供大家参考，具体内容如下效果如图： ![20201016101841397.jpg][] 首先引入swiper的css和j

秒速五厘米/ 2022年10月06日 11:43/ 0 赞/ 179 阅读

相关 android使用ScrollView的页面滑动不流畅

这个是原先的ScrollView滑动不流畅的布局 <ScrollView android:id="@+id/weather_layout"

r囧r小猫/ 2022年09月12日 06:48/ 0 赞/ 297 阅读

相关微信小程序基于swiper组件的tab切换

> 代码地址如下： > [http://www.demodashi.com/demo/14010.html][http_www.demodashi.com_demo_140

太过爱你忘了你带给我的痛/ 2022年05月10日 00:46/ 0 赞/ 221 阅读

相关 Uniapp需要注意的小问题

1. 提审未发布的时候，重新提审的包应用版本名称可以保持不变，但是应用版本号必须增加。 2. 勾选使用广告标识(IDFA)\["idfa" : true\]会出现下图提示：

我就是我/ 2021年09月29日 03:18/ 0 赞/ 402 阅读

相关 swiper的介绍以及使用（移动端滑动屏幕切换页面案例）

一、swiper介绍 Swiper常用于移动端网站的内容触摸滑动 Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swip

深藏阁楼爱情的钟/ 2021年09月16日 21:34/ 0 赞/ 1217 阅读

相关微信小程序解决swiper组件高度问题（可实现不同tab栏，swiper组件不同高度）

![format_png][] 前言我们经常会使用微信小程序自带的tab组件与swiper组件搭配来实现漂亮的tab切换页面，但是我们不得不承认swiper组件默认高

怼烎@/ 2021年08月30日 16:22/ 0 赞/ 596 阅读

相关 uniapp使用scroll-view与swiper组件实现tab滑动切换页面需要注意的问题

效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tYW9ta

傷城~/ 2021年08月13日 16:18/ 0 赞/ 581 阅读