写一个咯
在你的最外围容器上,比如<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%;}
}
太细致的懒得写,大致有那个意思我看行了。
1 个回复
暮雪骄阳
写一个咯
在你的最外围容器上,比如<view class="content">
加上 @touchmove="touchmove" @touchstart="touchstart" @touchend="touchend"
你的头部容器:
最后给它复位的时候加个动画
太细致的懒得写,大致有那个意思我看行了。