// pages/test/scrollTest.js

Page({

/**

  * 页面的初始数据

  */

data: {

floatTop: 100,

startY: 0,

isAnimate: false,

},

/**

  * 生命周期函数--监听页面加载

  */

onLoad: function (options) {

let systemInfo = wx.getSystemInfoSync()

let width = systemInfo.windowWidth;

let height = systemInfo.windowHeight;

console.log(width, height)

this.setData({

width,

height,

// floatTop: 60 - height

})

},

startHandler: function(e) {

let startY = e.changedTouches[0].pageY

console.log('startHandler:' + startY)

this.setData({

isAnimate: false,

startY: e.changedTouches[0].pageY

})},

moveHandler: function(e) {

console.log('moveHandler')

let moveY = e.changedTouches[0].pageY;

console.log('moveHandler:' + moveY + "//==height:" + this.data.height)

if (this.data.height - moveY <= 60 || moveY <= 0) {

return

}

let srollY = this.data.height - moveY

console.log('moveHandler===srollY:' + srollY)

this.setData({

floatTop: srollY,

isAnimate: true,

})

},

endHandler: function(e) {

let endY = e.changedTouches[0].pageY

let moveY = this.data.startY - endY // 差值的绝对值大于40才滑动到指定位置

console.log('endHandler:' + endY + '//moveY:' + moveY)

if (moveY > 0 && moveY < 40 || moveY < -40) {

this.setData({

isAnimate: true,

floatTop: 0

})

} else {

this.setData({

isAnimate: true,

floatTop: moveY

})

}

},

onPageScroll: function (e) {

console.log('onPageScroll:' )

},

})

/* pages/test/scrollTest.wxss */

page {

width: 100%;

height: 99%;

overflow-y: hidden;

}

.page-content {

overflow: hidden;

display: flex;

flex-direction: column;

}

.detail-content {

height: 1500rpx;

overflow: hidden;

display: flex;

justify-content: center;

align-content: center;

flex-direction: column;

position: relative;

/* bottom: 0; */

left: 0;

right: 0;

padding: 40rpx;

/* color: #fff; */

z-index: 22;

}

.magezine-date {

font-family: 'DIN-Alternate-Bold';

font-size: 28rpx;

color: #ddd;

}

.magezine-title {

font-family: 'DIN-Alternate-Bold';

font-size: 40rpx;

margin-top: 6rpx;

margin-bottom: 44rpx;

letter-spacing: 2rpx;

}

.view-detail {

display: flex;

align-items: center;

}

.b-img {

width: 36rpx;

height: 25rpx;

}

.view-text {

font-size: 28rpx;

margin: 0 15rpx;

}

.a-img {

width: 14rpx;

height: 25rpx;

}

.btn-content {

margin-top: 50rpx;

display: flex;

justify-content: space-between;

}

.left-btn, .right-btn {

font-size: 32rpx;

height: 80rpx;

text-align: center;

background-color: #292934;

border-radius: 8rpx;

line-height: 80rpx;

font-family: 'DIN-Alternate-Bold';

letter-spacing: 4rpx;

position: relative;

}

.left-btn {

flex: 1;

}

.right-btn {

width: 220rpx;

margin-left: 30rpx;

}

.float-area {

position: absolute;

z-index: 22;

left: 0;

right: 0;

bottom: 0;

top: 0;

}

.slide-content {

width: 100%;

height: 100%;

background-color: #4ed;

position: absolute;

z-index: 23;

border-top-left-radius: 20rpx;

border-top-right-radius: 20rpx;

overflow: hidden;

left: 0;

right: 0;

bottom: 0rpx;

top: 90%;

padding: 26rpx 0;

box-sizing: border-box;

}

<view class="page-content">

<view class="detail-content">

<text>我是详情</text>

</view>

<view class="slide-content" style="transform: translateY({{-floatTop}}px)">

<view class="content-title" bindtap="tapNav" bindtouchmove="moveHandler" bindtouchstart="startHandler" bindtouchend="endHandler">我是标题</view>

<view class="content-detail">我说内容详情</view>

</view>

</view>