uniapp 实现顶部菜单scroll-view与swiper每个滑动页面都自适应

已于 2022-10-01 11:43:36 修改
阅读量2.7k 收藏 5
点赞数
分类专栏： uniapp 文章标签： 前端 javascript vue.js 前端框架
于 2022-07-05 16:31:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43453621/article/details/125621997
版权

效果图：

 

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

经过上一篇的问题，切换页面高度都统一了，现在进行了处理切换每个页面高度都自适应当前高度。

最下面有精简代码

swiper 滑块视图容器

current 当前index索引

swiper-item 仅可放置在 <swiper> 组件中

示例

<swiper :current="currentTab" @change="bindChange">
    <swiper-item>
        //容器里的内容....
    </swiper-item>
</swiper>

注：<u-alert>和<u-swiper> 为uview，需要到官方导入组件uView2.0组件导入

如不需要删掉<u-alert>和<u-swiper>代码，不然会报错

代码

html

<template>
	<view>
		<scroll-view class="scroll1" scroll-x="true">
			<view :class="currentTab==index ? 'select' : 'select1'" :data-current="index" @click="swichNav"
				v-for="(item,index) in scoll" :key='index'>{{item.txt}}
			</view>
		</scroll-view>
		<view v-if="infos == 1" class="infos">
			<swiper class="info" autoplay vertical circular interval="3000">
				<swiper-item v-for="(item,index) in info" :key='index'>
					<view class="info_item">
						<image src="../../static/logo.png"></image>
						<text>{{item.user}}</text><text>已下单</text>
					</view>
				</swiper-item>
			</swiper>
		</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="/static/zatu/2.jpg" mode="aspectFit"></image>
						</view>
						<view class="list-con">
							<view class="title">{{item.title}}</view>
							<view class="list-foot">
								<view style="width: 150rpx;">
									<view class="price1">￥{{item.user}}</view>
								</view>
								<view style="width: 150rpx; text-align: right;display: inline-block;">
									<view class="price2">￥{{item.like}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="item_tv">直播间</view>
			</swiper-item>
			<swiper-item style="margin: 0rpx; 10rpx">
				<view class="item_image">
					<view class="marhin_view">
						<u-alert :title="text1" type="error"></u-alert>
						<u-swiper :list="list1" indicator indicatorMode="dot" circular></u-swiper>
					</view>
					<view class="marhin_view">
						<u-alert :title="text2" type="error"></u-alert>
						<u-swiper indicator :list="list2" keyName="url" indicatorMode="dot" :autoplay="false">
						</u-swiper>
					</view>
					<view class="marhin_view">
						<u-alert :title="text3" type="error"></u-alert>
						<view style="display: flex;align-items: center;justify-content: center;margin-top:5rpx;">
							<u--image :src="list3" mode="widthFix" height="100%" shape="square" radius="10"></u--image>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

核心代码

js

uni.createSelectorQuery() 获取元素节点

query.select('选择元素').boundingClientRect

<script>
	export default {
		data() {
			return {
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				list2: [{
					url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
					poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'
				}, {
					url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				}, {
					url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				}],
				list3: '/static/zatu/1.jpg',
				text1: '福利一览',
				text2: '攻略教程',
				text3: '转发海报',
				currentTab: 0,
				aheight: '',
				infos: '1',
				info: [{
					user: '大魔王',
				}, {
					user: '小魔女',
				}, {
					user: '名称长长的',
				}],
				scoll: [{
					txt: '精选'
				}, {
					txt: '直播间'
				}, {
					txt: '代言福利'
				}],
				list: [{
						user: '1000000',
						title: 'ssssssssss',
						like: '33333'
					}, {
						user: '2',
						title: 'ssaassssssss',
						like: '3333'
					},
					{
						user: '3',
						title: 'ss2ssssssss',
						like: '33'
					},
					{
						user: '4',
						title: 'ss2ssssssss',
						like: '33'
					},
					{
						user: '5',
						title: 'ss2ssssssss',
						like: '33'
					},
					{
						user: '6',
						title: 'ss2ssssssss',
						like: '33'
					},
					{
						user: '7',
						title: 'ss2ssssssss',
						like: '33'
					},
					{
						user: '8',
						title: 'ss2ssssssss',
						like: '33'
					},
					{
						user: '9',
						title: 'ss2ssssssss',
						like: '33'
					},
					{
						user: '10',
						title: 'ss2ssssssss',
						like: '33'
					}
				]
			}
		},
		onShow() {
            //当前的页面swiper高度
			const query = uni.createSelectorQuery().in(this);
			query.select('.list-item').boundingClientRect(data => {
				this.aheight = data.height
			}).exec();
		},
		methods: {
			// 滑动页面同步tab栏
			bindChange: function(e) {
				this.currentTab = e.detail.current
				// 动态获取滑动页面高度
				const query = uni.createSelectorQuery().in(this);
				if (this.currentTab == 0) {
					query.select('.list-item').boundingClientRect(data => {
						this.aheight = data.height
					}).exec();
				} else if (this.currentTab == 1) {
					query.select('.item_tv').boundingClientRect(data => {
						this.aheight = data.height	
					}).exec();
				} else {
					query.select('.item_image').boundingClientRect(data => {
						this.aheight = data.height	
					}).exec();
				}
			},
			//点击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="scss">
	.scroll1 {
		position: fixed;
		top: 0rpx;
		z-index: 99;
		width: 100%;
		white-space: nowrap;
		padding: 10rpx 20rpx;
		background-color: #ffffff;

		& view {
			white-space: normal;
			display: inline-block;
		}

		& view:before {
			content: '|';
			color: #f4f4f4;
			margin: 0 20rpx;
		}

		& view:first-child:before {
			display: none;
		}

		.select {
			color: #fb6583;
			font-size: 40rpx;
		}

		.select1 {
			color: $uni-text-color-placeholder;
		}
	}


	.infos {
		position: fixed;
		top: 90rpx;
		z-index: 99;
		border-top-right-radius: 90rpx;
		border-bottom-right-radius: 90rpx;
		padding: 5rpx;
		background-color: rgba(0, 0, 0, 0.5);

		.info {
			height: 40rpx;
			width: 250rpx;

			swiper-item {

				.info_item {
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						border-radius: 90rpx;
						width: 35rpx;
						height: 35rpx;
					}

					text {
						margin-left: 10rpx;
						color: #ffffff;
						font-size: 20rpx;
					}
				}
			}
		}
	}

	.swp {
		margin-top: 70rpx;

		.list-item {
			overflow: hidden;

			.list {
				display: flex;
				margin: 10rpx;
				padding: 15rpx;
				border-bottom: 1rpx solid #fb6583;

				.list-img {
					background-color: #fef0f0;
					width: 400rpx;
					height: 400rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 12rpx;

					image {
						border-radius: 12rpx;
						width: 380rpx;
						height: 380rpx;
					}
				}

				.list-con {
					margin-left: 20rpx;

					.title {
						font-size: 45rpx;
					}

					.list-foot {
						margin-top: 250rpx;
						display: flex;
						align-items: center;

						.price1 {
							font-size: 25rpx;
						}

						.price2 {
							// position: fixed;

							font-size: 45rpx;
							color: #fb6583;
						}
					}
				}
			}
		}
	}

	.item_image {
		.marhin_view {
			margin: 10rpx;
		}
	}
</style>

精简代码

HTML

<!-- 顶部导航 -->
<scroll-view class="scroll1" scroll-x="true">
    <view :class="currentTab==index ? 'select' : 'select1'" :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'}">
    <!-- 轮播1 -->
    <swiper-item>
        <view class="list-item">//注意这里是节点
            //....放你的内容
            <image src="../../../../static/gwc.png"></image>
			<view>大魔王</view>
			<view>3652</view>
        </view>
    </swiper-item>

   <!-- 轮播2 -->
    <swiper-item>
        <view class="item_tv">
            //....内容
         
        </view>
    </swiper-item>

   <!-- 轮播3 -->
    <swiper-item>
        <view class="item_image">
            //....内容
           
        </view>
    </swiper-item>
</swiper>

JS

<script>
	export default {
		data() {
			return {
				currentTab: 0,//默认菜单
				aheight: '',
				scoll: [{
					txt: '精选'
				}, {
					txt: '直播间'
				}, {
					txt: '代言福利'
				}],
			}
		},
		onShow() {
			//当前的页面swiper高度，query.select('.list-item')，.list-item就是你的类节点
			const query = uni.createSelectorQuery().in(this);
			query.select('.list-item').boundingClientRect(data => {
				this.aheight = data.height
			}).exec();
		},
		methods: {
			// 滑动页面同步tab栏query.select('.list-item'),类节点
			bindChange: function(e) {
				this.currentTab = e.detail.current
				// 动态获取滑动页面高度
				const query = uni.createSelectorQuery().in(this);
				if (this.currentTab == 0) {
					query.select('.list-item').boundingClientRect(data => {
						this.aheight = data.height
					}).exec();
				} else if (this.currentTab == 1) {
					query.select('.item_tv').boundingClientRect(data => {
						this.aheight = data.height
					}).exec();
				} else {
					query.select('.item_image').boundingClientRect(data => {
						this.aheight = data.height
					}).exec();
				}
			},
			//点击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 lang="scss">
	.scroll1 {
		position: fixed;
		top: 0rpx;
		z-index: 99;
		width: 100%;
		white-space: nowrap;
		padding: 10rpx 20rpx;
		background-color: #ffffff;

		& view {
			white-space: normal;
			display: inline-block;
		}

		& view:before {
			content: '|';
			color: #f4f4f4;
			margin: 0 20rpx;
		}

		& view:first-child:before {
			display: none;
		}

		.select {
			color: #fb6583;
			font-size: 40rpx;
		}

		.select1 {
			color: $uni-text-color-placeholder;
		}
	}

	.swp {
		margin-top: 70rpx;

		.list-item {
			overflow: hidden;

			.list {
				display: flex;
				margin: 10rpx;
				padding: 15rpx;
				border-bottom: 1rpx solid #fb6583;
			}
		}
	}
</style>

最懒的菜鸟
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
小程序scroll-view与css左右滑动超出部分背景颜色不显示的解决方法
01-04
在微信小程序开发中，我们经常会遇到使用`scroll-view`组件实现页面水平或垂直滚动的需求。然而，在实际操作中，开发者可能会遇到一个常见的问题：当`scroll-view`内容超过其容器宽度时，左右滑动过程中超出部分的...
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
10-18
在微信小程序开发中，`scroll-view` 是一个非常重要的组件，用于实现页面的滚动效果。在某些场景下，我们可能需要实现滚动穿透或者阻止`scroll-view`的滚动，以达到特定的交互效果。本文将详细介绍如何在微信小程序...
uni-app开发教程之swiper组件使用教程
热门推荐
码奴一只猿
05-26 1万+
Uniapp是一款跨平台的开发框架，可以用于开发微信小程序、H5、App等多种应用。其中，swiper组件是一种非常常用的组件，可以实现轮播图、图片滑动等效果。本文将详细介绍如何在Uniapp中使用swiper组件。
uniapp踩坑系列之二
baidu_41601048的博客
01-06 3229
今天在用真机在小程序上预览的时候。发现无法预览。一直报错超过微信最大2m。总共也才3个页面，怎么就那么大？ 经过小程序包分析工具发现。打包以后的vender.js文件达到1.7m，最后发现，在main.js中引入了一些无用的第三方库。包括echarts和uview，node_modules中有两个包：uview-ui和uview，删除以后xbuild运行发行在小程序开发者工具中发现只有738k。 第二是采用分包策略： 第一步：拆分原本在pages文件件中的页面。 第一步：在pages.json新
uni-app 微信小程序之swiper轮播图
最新发布
aaa123aaasqw的博客
05-30 292
【代码】uni-app 微信小程序之swiper轮播图。
uview+uniapp scroll-view的横向滚动
daysky的博客
06-11 3764
本来以为实现一个横向滚动的view很简单，但是实际上还是有个小坑的。因为scroll-view本身的display:flex不生效。 scroll-view的内层view元素需要： display: inline-block scroll-view的外层元素需要： white-space: nowrap 使得内部组件不换行。 再加上一些左右空行的渐变修饰，使得一个简单的横向滚动元素比较美观。 template部分: <view class="skill-sequence-panel-content
uniApp顶部导航自定义设置
qq_1307495的博客
03-16 2766
新建组件custom-navbar组件在父组件中使用在pages.json文件中设置导航隐藏。
uniapp 顶部选项卡 TopTabBar
tengyuxin的博客
12-20 7131
在官网tabBar那里，只能自己手动实现 效果图如下 1. 项目结构 + home + mine + TopBar + TopBarComponent + guanzhu.vue + tuijian.vue 2. 实现TopTab的静态UI界面 （1）顶部选项卡的布局 --- 当前为TopBar页面 <template> <!-- 顶部选项卡 --> <view class="tabs"> <vi...
微信小程序完美解决scroll-view高度自适应问题的方法
10-14
主要介绍了微信小程序完美解决scroll-view高度自适应问题的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
uniapp scroll-view 横向和纵向滚动 带滚动回调
09-10
在uni-app框架中，`scroll-view`组件是一个非常实用的工具，它允许开发者实现横向和纵向的滚动，并且可以添加滚动回调功能，以便在用户滚动时执行特定的操作。下面将详细讲解uni-app的`scroll-view`组件及其相关的...
微信小程序scroll-view+swiper切换内容
05-06
在“微信小程序scroll-view+swiper切换内容”这个场景下，描述中提到的“多个swiper-item同时显示”意味着可能是在一个 `scroll-view` 内部嵌套了多个 `swiper`，每个 `swiper` 包含多个 `swiper-item`。这样的设计...
uniApp实现swiper和scroll-view联动，滑动swiper时改变scroll-view，点击scroll-view时切换到指定的swiper（初学者）
qq_40893035的博客
08-13 5799
uniApp实现swiper和scroll-view联动，滑动swiper时改变scroll-view，点击scroll-view时切换到指定的swiper（初学者） 因为这里只是一个简单的示例，提供一下思路，具体需求自己加以改动。 代码效果如图，运行环境为HBuilderX，运行在Chrome浏览器中的样子 基本效果为，点击顶部导航的数字，下面swiper区域会滑动到相应区域，滑动swiper区域，顶部导航也会跟着改变，这边使用三种颜色进行区分 代码如下 <template> <!-
【微信小程序入门到精通】— 轮播图你会了么？快速拿下 swiper 和 swiper-item
热爱生活，积极向上的阿酱！
09-22 3568
对于目前形式，微信小程序是一个热门，那么我们该如何去学习并且掌握之后去做实际项目呢？为此我特意开设此专栏，在我学习的同时也将其分享给大家！本篇文章主要介绍我们微信小程序常用的视图容器类组件，对于 swiper 和 swiper-item 我们将逐一讲解。如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！轮播图是指在一个模块或者窗口，通过鼠标点击或手指滑动后，可以看到多张图片，这些图片统称为轮播图。我们的 swiper 和 swiper-item 组件是用来干什么的呢？接下来我来总结一下。
uniapp中菜单双联动效果（左侧点击右侧自动滚动到对应位置，右侧滚动左侧高亮对应菜单）
beLaity的博客
08-27 5402
<template> <view class="content"> <view class="ld"> <!-- :class="{active:index===change}" --> <view class="left"> <view v-for="(item,index) in kindlist" :key="index" @click="setid(index)" :class="
【uniapp，触底加载，下拉刷新】【h5】滚动区域滚动触发触底加载 scroll-view
AAAXiaoApple的博客
02-20 3454
【代码】【uniapp】【h5】滚动区域滚动触发触底加载 scroll-view。
scroll-view 横向滑动无效的问题
ys_healone的博客
07-31 1590
在小程序中写一个横向视图，直接用一个scroll-view，加上scroll-x="true"属性就OK了 xml <scroll-view class="wrap" scroll-x="true"> <block wx:for="{{[1,2,3,4,5]}}" wx:key="item" wx:for-item="item"> <view cl...
ScrollView -- 实现滚动效果
Abel_Gao的博客
04-07 354
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
【uniapp小程序】使用swiper实现页面内部左右滑动的切换
qq_57219457的博客
08-23 5995
uniapp小程序页面内滚动、方便自己cv
uniapp swiper快速滑动卡死疯狂轮播解决
weixin_44167504的博客
04-19 2017
uniapp swiper快速滑动卡死疯狂轮播 解决：将@change改为@animationfinish
uniapp 点击方法 实现scroll-view回到底部
04-11
UniApp是一种基于Vue.js框架的跨平台开发框架，它可以用于同时开发iOS、Android和Web应用程序。UniApp使用一套代码，可以在不同的平台上运行，并且具有良好的性能和用户体验。 要实现scroll-view回到底部的功能，可以按照以下步骤进行操作： 1. 在scroll-view组件上添加一个id属性，例如：id="scroll-view"。 2. 在页面的methods中定义一个方法，例如：scrollToBottom()。 3. 在该方法中使用uni.createSelectorQuery()获取scroll-view组件的实例，并调用scrollIntoView()方法将其滚动到底部。代码示例如下： ```javascript methods: { scrollToBottom() { uni.createSelectorQuery().select('#scroll-view').boundingClientRect((rect) => { uni.pageScrollTo({ scrollTop: rect.bottom }); }).exec(); } } ``` 4. 在需要触发回到底部的地方，例如按钮的点击事件中，调用scrollToBottom()方法即可实现scroll-view回到底部的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值