六 uniapp的scroll-view组件 慢慢放大(小)效果

最新推荐文章于 2024-08-22 11:12:10 发布
最新推荐文章于 2024-08-22 11:12:10 发布
阅读量1.4k 收藏 3
点赞数 2
分类专栏： uniapp scrollView组件 代码小锋 文章标签： scroll-view uniapp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36622149/article/details/107365210
版权

上一章节

上一章节我们一起了解了在uniapp如何使用阿里巴巴的字体，因为在小程序里不能直接上传woff字体等文件，因此需要在线引入字体才行。传送门

什么是scroll-view

scroll-view是可滚动视图区域。用于区域滚动，可以设置垂直滚动和横向滚动两种方式。
官方文档

官方Demo

  1. 在pages中创建一个新的页面scrollView
    在这里插入图片描述
  2. 复制官方文档里的Demo，下面看下复制完毕的Demo
  
<template>
	<view>
		<page-head title="scroll-view,区域滚动视图"></page-head>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="uni-title uni-common-mt">
				Vertical Scroll
				<text>\n纵向滚动</text>
			</view>
			<view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
				@scroll="scroll">
					<view id="demo1" class="scroll-view-item uni-bg-red">A</view>
					<view id="demo2" class="scroll-view-item uni-bg-green">B</view>
					<view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
				</scroll-view>
			</view>
			<view @tap="goTop" class="uni-link uni-center uni-common-mt">
				点击这里返回顶部
			</view>
			
			<view class="uni-title uni-common-mt">
				Horizontal Scroll
				<text>\n横向滚动</text>
			</view>
			<view>
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
					<view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
					<view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>
					<view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>
				</scroll-view>
			</view>
            <view class="uni-common-pb"></view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		methods: {
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon:"none",
					title:"纵向滚动 scrollTop 值已被修改为 0"
				})
			}
		}
	}
</script>

<style>
	.scroll-Y {
		height: 300rpx;
	}
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
.uni-bg-red {
    background: #f76260;
    color: #fff;
}

.uni-bg-green {
    background: #09bb07;
    color: #fff;
}

.uni-bg-blue {
    background: #007aff;
    color: #fff;
}
</style>
  1. 查看效果
    在这里插入图片描述

升级版

效果展示

我们看看效果展示

在这里插入图片描述

代码逻辑如下：

  1. 先创建一个scroll-view标签，然后设置该标签横向滑动，设置默认滚动框的位置，设置不显示滚动框
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="141"  show-scrollbar="false">
...
<view ></view>
...
 </scroll-view>
  1. 设置scroll-view标签中view属性间隔，这里使用magin属性进行间隔的。（这里只设置了第二个框框）
.cricle2{
		margin: 0 150rpx;
		}
  1. 设置默认的view样式
  2. 设置变大后的view的样式
  3. 通过methods方法获取当前滚动框的位置，然后将用户滑动的位置区间设置不同的变量，然后通过变量的变化去改变view的样式。这里判断的是tobigactive变成。若为一，则第一个框变大；若为二，则第二个框变大；若为三，则类似。
    代码如下：
  
<template>
	<view>
	
		<!-- 升级版 -->
		<view class="service_car">
						<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="141"  show-scrollbar="false">
							<view id="" class="scroll-view-item_1"></view>
		                    <view id="demo1" :class="['scroll-view-item_H','cricle1' , service_state==1? 'cricle_active':'',tobigactive==1?'toBig':'']" @click="prePutCar()">快乐童年</view>
		                    <view id="demo2" :class="['scroll-view-item_H', 'cricle2', service_state==3? 'cricle_active':'',tobigactive==2?'toBig':'']" @click="getCar()">茁壮成长</view>
		                    <view id="demo3" :class="['scroll-view-item_H', 'cricle3', service_state==3? 'cricle_active':'',tobigactive==3?'toBig':'']" @click="preGetCar()">相伴永远</view>
							<view id="" class="scroll-view-item_1"></view>
		                </scroll-view>
		
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				service_state:0,
				//横向移动
				scrollTop: 200,
				 old: {
				       scrollTop: 200
				      },
				//变大效果 
				tobigactive:2
			}
		},
		methods: {
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
				//console.log('scroll',e.detail.scrollLeft);
				//this.old.scrollTop = e.detail.scrollTop
				if(e.detail.scrollLeft<45){
					this.tobigactive=1;
				}else if(e.detail.scrollLeft<190){
					this.tobigactive=2;
				}else{
					this.tobigactive=3;
				}
				
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon:"none",
					title:"纵向滚动 scrollTop 值已被修改为 0"
				})
			}
		}
	}
</script>

<style lang="less">
	.scroll-Y {
		height: 300rpx;
	}
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
.uni-bg-red {
    background: #f76260;
    color: #fff;
}

.uni-bg-green {
    background: #09bb07;
    color: #fff;
}

.uni-bg-blue {
    background: #007aff;
    color: #fff;
}

	.scroll-view-item_1{
				display: inline-block;
				height: 200rpx;
				width: 200rpx;
			}
			
			
			.cricle_active{
				background-color: #00aa00;
				box-shadow: 2px 2px 3px #aaa;
				
			}
			.toBig{
				width: 270rpx;
				height: 270rpx;
				line-height: 270rpx;
				border-radius: 150rpx;
				font-size: 52rpx;
				font-weight: 600;
			}
			
			
			
			
			.cictle{
				width: 750rpx;
				position: absolute;
				left: 30%;
				transform: translate(-50%,-50%);
				  -webkit-perspective: 1500;
				  -moz-perspective: 1500;
				  
				.box{
					 position: absolute; 
					 box-shadow: 0px 7px 7px #888888;
					  top: 0; 
					  font-size: 40rpx;
					  left: 53%;
					  width: 270rpx;
					  height: 270rpx; 
					  transition: all 1s;
					  backface-visibility: hidden;
					  cursor: pointer;
					  border-radius: 150rpx;
					  background: #FFFFFF;
					  color:#000;
					  display: flex;
					  align-items: center;
					  justify-content :  space-around;
					  flex-direction:column;
					  font-weight: 600;
					  text:nth-child(1) {
					  font-size: 110rpx;
					  } text:nth-child(2) {
						  margin-bottom: 10rpx;
						   font-size: 33rpx;
					  }
					 
				}
			}
			
			.scroll-view_H {
			    white-space: nowrap;
			    width: 100%;
				.cricle2{
					margin: 0 150rpx;
				}
				
				.scroll-view-item_1{
					display: inline-block;
					height: 200rpx;
					width: 200rpx;
				}
				
				.scroll-view-item_H{
						background-color: #a6e5af;
						border-radius: 100rpx;
						display: inline-block;
						height: 200rpx;
						width: 200rpx;
					    line-height: 200rpx;
					    text-align: center;
					    font-size: 40rpx;
						color: #FFFFFF;
						transition: 2.5s;
						margin-bottom: 20rpx;
			
				}
				.cricle_active{
					background-color: #a6e5af;
					box-shadow: 2px 2px 3px #aaa;
					
				}
				.toBig{
					width: 270rpx;
					height: 270rpx;
					line-height: 270rpx;
					border-radius: 150rpx;
					font-size: 52rpx;
					font-weight: 600;
					background-color: #00aa00;
				}
			}
</style>
快乐の编程
关注
专栏目录
uniapp小程序加载spine动画
05-23
修改官方spine-webgl.js文件适配uniapp
uni-app 微信小程序-放大缩小效果以及抖动解决办法
weixin_44943268的博客
05-20 4864
之前想着改变元素的宽高，来实现放大缩小，结果会出现一个抖动。后来换成transform:scale(1), 原始倍数，放大1.1倍，完美结局问题。
使用uniapp开发h5网页 适配手机 和 PC端
tengyuxin的博客
08-22 683
第四，由于使用的是rpx单位，我希望移动端上，字体可以根据不同手机屏幕大小自动适配，在pc端就是固定尺寸，但问题时，由于使用match-media媒体查询时，移动端根据rpx自适应和Pc端保持文字大小固定产生冲突。第三，细微调整样式，我是根据uni.createMediaQueryObserver，监测是否符合条件，符合的一个样式，不符合的一个样式（该情况适用于html结构一样）。uni-app是以移动为先的理念诞生的，所以我们先开发出适配手机浏览器的网页，再来适配PC端。
uniapp scroll-view基础用法
热门推荐
lxgyydsgod的博客
08-07 2万+
在uniapp日常开发的过程中经常会有局部滚动的需求，而scroll-view组件正好可以满足这一需求。本篇主要介绍了一些scroll-view的基础用法
uniapp使用 movable-area movable-view 实现图片双指缩放、鼠标单击缩小双击放大、图片及标记点功能
HHH917的博客
02-24 7166
movable-view movable-area movable-view 主要是可以实现缩放及拖拽功能，不过只能限制在movable-area 范围内的拖拽超出范围会回弹。 为了增大一点它的回弹范围 可以设置 movable-view的宽高为0； 然后子元素决定定位居中。微信小程序没有双击事件 通过setTimeout 拦截并判断是单击还是双击。 实现代码（部分无用组件自行删除） getDomInfo partDetail.js 组件代码
【uniapp】小程序开发8：滚动组件scroll-view
不积跬步无以至千里，不积小流无以成江海。一个喜欢学习分享的程序员
12-11 4733
我们经常需要做页面中部分内容可以滚动的功能，例如“猜你喜欢”，内容太多，通常都会超出屏幕，那么此块区域应该可以滚动，但是顶部的自定义导航栏应该不能随着滚动。 这个时候，就可以使用uniapp提供的滚动组件scroll-view。
uniapp scroll-view
秋来九月八
02-28 5912
使用scorll-view横向拖动应该注意些什么？ 1.scroll-view 中的需要滑动的元素不可以用 float 浮动； 2.scroll-view 中的包裹需要滑动的元素的大盒子用 display:flex; 是没有作用的； 3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排； 4.包裹 scroll-view 的大盒子有明确的...
uniapp scroll-view 横向和纵向滚动 带滚动回调
09-10
2. **全端支持**：uni-app的设计目标是跨平台，因此它的`scroll-view`组件可以在所有支持uni-app的平台上运行，包括H5、微信小程序、支付宝小程序、QQ小程序、百度小程序以及原生APP等。 3. **引入组件**：在uni-...
微信小程序scroll-view组件实现滚动动画
12-29
本文实例为大家分享了scroll-view组件实现索引列表滚动动画效果，供大家参考，具体内容如下 效果图 实现原理 利用scroll-view的scroll-into-view属性进行定位； 利用scroll-view的scroll-with-animation属性实现...
微信小程序 scroll-view的使用案例代码详解
10-15
总结，微信小程序中的 `scroll-view` 组件是实现滚动效果的关键，它支持自定义滚动方向、滚动位置控制以及滚动事件监听。正确理解和使用这些特性，可以帮助开发者创建更加丰富、交互性更强的小程序页面。
关于scroll-view和下拉刷新的那些坑
03-29
众所周知，小程序不支持操作dom元素，但最近公司做了这样的一个功能，滚动scrollview 标签，当页面滚动到一定的...scroll-view scroll-y="true" style="height: {{scrollViewHeight}}rpx;" bindscroll="scrollviewScrol
uni-app组件之scroll-view的详细教程
码奴一只猿
05-25 8494
scroll-view 是 UniApp 中的一个重要组件，它提供了在视图区域内滚动内容的功能。无论是在小程序、H5 还是 APP 端，scroll-view 都能够帮助你实现滚动内容的需求。本教程将详细介绍如何在 UniApp 中使用 scroll-view 组件，并提供示例代码供参考。
【uniapp】scroll-view 实现自动滚动到最底部
TA远方
11-17 2万+
在做uniapp项目中，有个滚动视图组件，跟微信小程序里的组件一样的，想要实现自动滚动到最底部，是一件容易忽略的，小事情。
uniapp scroll view 解决高度自适应、弹框滚动穿透等问题。
wcdunf的博客
06-30 4040
在uniapp中scroll view 需要给固定高度，根据不同手机高度不一样，scroll view高度不相同，uniapp中不能进行dom操作，如何让scroll view适应不同手机高度，计算好高度如何给scroll view 设置高度呢通过uni.getSystemInfoSync()获取窗口宽度和高度动态设置 scroll-view 高度 :style动态绑定height高度打印uni.getSystemInfoSync() 这里获得的高度是物理高度px 如何转成rpx 在cumputed计算属性
uniapp 使用webview对vue的page进行缩小放大功能实现(完整版)
a1231233434453的博客
11-14 2830
uniapp 使用webview对vue的page进行缩小放大功能实现(完整版)
uniapp：scroll-view触底加载、下拉刷新、返回顶部
FIRE
05-18 2880
选择uniapp自带的下拉刷新还是scroll-view看场景。场景：从首页跳转到别的页面再返回来的时候，直接返回首页顶部。顺便解决了ios下拉，顶部和底部有白屏的问题。
uniapp之scrollview图片区域滚动（横向滚动）
我心坚持
11-05 9115
scrollview仅适用于区域（局部）滚动，如果用于页面滚动和长列表，则有性能问题。 <scroll-view class="scrollView" scroll-x="true"> <view style="width: 333rpx;"> <shopListItem :commodityList="commodityList" wrap="no-wrap" width="160rpx" height="160rpx"></shopListItem
uniapp聊天室功能（scroll-view的使用）
weixin_57660141的博客
02-10 1751
scroll-view自动滚动到底部
uni-app 自定义webview大小
liuye066的专栏
10-26 1万+
在uni-app中使用web-view 组件，默认铺满全屏并且层级高于前端组件，会遮挡页面上的其他组件。在官网中写明： app-vue下web-view组件不支持自定义样式，默认充满屏幕不可控制大小； nvue web-view 必须指定样式宽高 具体示例： 代码： 直接在UI上使用webview组件，也是默认全屏，需要动态加载。 先新建一个component.nvue文件： <template> <div> <view class="intro"&g
uniapp scroll-view 组件 下拉刷新
最新发布
09-11
`scroll-view` 是uni-app中的一个组件，用于创建可滚动的视图区域，类似于原生开发中的滚动容器。 要实现`scroll-view`组件的下拉刷新功能，你可以通过绑定`refresh`事件，并在该事件触发时执行数据更新等操作来...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值