uni-app 微信小程序模仿 app二层楼功能

最新推荐文章于 2024-01-21 17:26:40 发布

今天2岁

最新推荐文章于 2024-01-21 17:26:40 发布

阅读量2k

点赞数 8

本文链接：https://blog.csdn.net/jiangyue2694/article/details/109260296

版权

uni-app 微信小程序模仿 app二层楼功能

先占个坑，今天应该写不完，后续在慢慢补全
更新终于写完了

这个的计算量很大，我自己的安卓机测试的时候一卡一卡的，公司同事的iphone是没有问题的

我接到有一个这样的需求，页面是一个门店的首页，在正常页面的下面有一张海报图，前面的内容要露出大约100px的高度，然后下面的就是主要内容，但是你在拉主要内容这个元素的时候，慢慢拉会有下拉刷新回弹的效果，拉到一定程度的时候，前面的主要内容掉下去，展示后面的海报图。等到后续在下面向上拉的时候，在回弹回来。这个有点像淘宝的二层楼。

下面来做一下分析
下拉二层楼的时候他还会有一个下拉刷新的功能到一定的距离的时候，就能够自己向下掉下去，不到一定距离的时候，会回弹。

下面的是template的布局

<view class="warp">
	<view class="behind"></view>
	<view class="front"></view>
</view>

上面的是整个HTML的布局
warp这个类的时候需要给上相对定位
然后front 这个类上的给上绝对定位

这个时候我们就有以下2个步骤来写这个下拉的事件
1、使用动画控制front 这个类的top值
2、使用偏移控制Y值

下面我们需要给前面的 view 中添加触摸事件 @touchmove="moveHandle1" @touchstart="touchstart1" @touchend="touchend"

touchstart1 这个方法中，我们可以拿到我们手指点下去的位置信息

touchstart1(event) {
   
	// 这里是拿到手指点击下去的位置 其实重点是我这里想拿到 Y 的值，保存起来
	console.log(event)
	this.touchstartWhere = event.changedTouches[0].pageY
}

// 这个方法是手指在移动的过程中，是下拉还是上拉
// 使用同样的方法，我们可以得到这个之间的差值，使用 difference 标记保存
moveHandle1(event) {
   
	
}

由上面我们可以知道我们下滑的距离即把difference的值赋值给偏移的量
这个时候需要在前面的view中，加上这一行 :style="{transform:translateY(${difference}px)}" ，这个时候，你下拉多少的时候，就能够Y值偏移多少，这个时候，我们已经能够让他下拉，这个时候，我们就要考虑放开手手的时候了

touchend() {
   
	// 
}

这个里面，我们需要的是difference 这个值是不是在你自己定义的数据值之内，如果是的话，那么久直接回弹，回弹的时候不能直接设置difference=0 这样的话会直接上去，没有一点回弹感觉。

下面的这个地方回弹的代码我这里设置的是100

touchend() {
   
	if (this.difference < 100) {
   
       let that = this
       function slidingRebound(timeout) {
   
           // 被要求停止回弹?
           if (that.movingback == false) {
   
               return
           }
           if (that.difference > 0) {
   
               that.difference -= 1
               setTimeout(slidingRebound, timeout)
           } else {
   
               that.difference = 0
               that.movingback = false
               that.opacity = 0.3
           }
       }
       that.movingback = true    // 标志目前正在回弹,其他地方可能会置false
       slidingRebound(2)
   }
}