瞅这里长命百寿
瞅这里长命百寿
  • 发布:2019-11-22 11:16
  • 更新:2020-06-07 20:17
  • 阅读:869

#插件需求# 希望有一个人中心页,顶部的头视图是一个图片,然后页面下拉可以放大伸缩视图的背景图片

分类:uni-app

希望有一个人中心页,顶部的头视图是一个图片,然后页面下拉可以放大伸缩视图的背景图片

2019-11-22 11:16 负责人:无 分享
已邀请:
暮雪骄阳

暮雪骄阳

写一个咯
在你的最外围容器上,比如<view class="content">
加上 @touchmove="touchmove" @touchstart="touchstart" @touchend="touchend"

你的头部容器:

<view class="head" :style="{height:changeHeight+'px'}" :class="changeBig?'change':''">  
	<image class="image" src="xxx.jpg" mode="aspectFill" />  
</view>
data() {  
	return {  
		changeBig:false,//class开关  
		height:300,//默认高度  
		changeHeight:300,//变化高度  
		startY:"",//起手Y坐标  
		touchY:""//滑动中的Y坐标  
	}  
}
methods: {  
	touchstart: function(e) {  
		this.startY = e.touches[0].pageY  
		this.changeBig = false  
	},  
	touchmove: function(e) {  
		this.touchY = (e.touches[0].pageY - this.startY)/2//这里控制容器下拉时增加的高度除于2除于10都随你高兴  
		this.changeHeight = this.height + this.touchY  
	},  
	touchend: function(e) {  
		this.changeHeight = this.height  
		this.changeBig = true  
	}  
}

最后给它复位的时候加个动画

.head{  
	overflow:hidden;max-height:600px;  
	&.change{transition:height 0.5s;}  
	.image{height:100%;width:100%;}  
}

太细致的懒得写,大致有那个意思我看行了。

该问题目前已经被锁定, 无法添加新回复