要實現一個當前盒子高度由里面的盒子進行支配高度拖拽的效果
// wxml<view class="exmation-item" wx:elif="{{type==4}}">
<view class="exmation-item-drag-box" id="drag-box"> <!-- 內容 --><view class="exmation-item-main" style="height: {{topHeight}}px; "></view><!-- 拖動 --><view class="exmation-item-box" style="height: {{bottomHeight}}px;" >
<view class="exmation-item-box-top"
bindtouchstart="onTouchStart"
bindtouchmove="onTouchMove"
bindtouchend="onTouchEnd" >
</view></view></view></view>
less
.exmation-item-drag-box {height: calc(100vh - 90rpx - 88rpx - constant(safe-area-inset-bottom));height: calc(100vh - 90rpx - 88rpx - env(safe-area-inset-bottom));overflow: hidden;.exmation-item-main{overflow-y: auto;height: 50%;margin-bottom: 0;}.exmation-item-box{height: 50%;background: #fff;.exmation-item-box-top{height: 100rpx;background: #000;}}}
js
// pages/exmation/index.js
Page({/*** 頁面的初始數據*/data: {totalHeight: 0, // 大盒子的總高度（可根據需要調整）topHeight: 0, // 上面盒子的初始高度bottomHeight: 0, startY: 0, // 觸摸開始時的Y坐標dragging: false, // 是否正在拖動},// 獲取當前頁面的高度getHeight() {const query = wx.createSelectorQuery();query.select('#drag-box').boundingClientRect( (rect) =>{// rect.height 就是盒子的高度console.log(rect.height );// 你可以將高度設置到data中以便后續使用this.setData({ totalHeight: rect.height,topHeight:rect.height/2,bottomHeight:rect.height/2});}).exec();},// 拖拽方法onTouchStart(e) {this.setData({startY: e.touches[0].clientY,dragging: true,});},onTouchMove(e) {if (!this.data.dragging) return;const moveY = e.touches[0].clientY;const deltaY = moveY - this.data.startY;let minheight = 50;let height=this.data.bottomHeight - deltaY;if(height>this.data.totalHeight)return;let newBottomHeight = (height < minheight ? minheight : height) const newTopHeight = this.data.totalHeight - newBottomHeight;this.setData({startY: moveY,topHeight: newTopHeight>0?newTopHeight:0,bottomHeight: newBottomHeight>0?newBottomHeight:0,});},onTouchEnd() {this.setData({dragging: false,});},/*** 生命周期函數--監聽頁面加載*/onLoad(options) {this.getHeight()},})
