当前位置：首页 > news >正文

微信小程序实现拖拽盒子效果

news 2025/7/8 0:21:45

要实现一个当前盒子高度由里面的盒子进行支配高度拖拽的效果

// 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()},})