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

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

bash 复制代码
// 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

bash 复制代码
  .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

bash 复制代码
// 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()

  },






})
相关推荐
dazhong20121 分钟前
微信小程序开发实战指南(三)-- Webview访问总结
微信小程序·小程序
计算机毕业设计小帅35 分钟前
【2026计算机毕业设计】基于Springboot的校园失物招领小程序
spring boot·小程序·课程设计
盛夏绽放3 小时前
关于 uni-app 与原生微信小程序中的生命周期 —— 一次“生命旅程”的解读
微信小程序·小程序·uni-app
流水线上的指令侠4 小时前
使用C#写微信小程序后端——电商微信小程序
微信小程序·小程序·c#·visual studio
知识分享小能手4 小时前
uni-app 入门学习教程,从入门到精通,uni-app 基础知识详解 (2)
前端·javascript·windows·学习·微信小程序·小程序·uni-app
2501_916008895 小时前
iOS 发布全流程详解,从开发到上架的流程与跨平台使用 开心上架 发布实战
android·macos·ios·小程序·uni-app·cocoa·iphone
小岛前端7 小时前
🔥Vue3 移动端组件精选!满足各种场景!
前端·vue.js·微信小程序
cesske8 小时前
uniapp 编译支付宝小程序canvas 合成图片实例,支付宝小程序 canvas 渲染图片 可以换成自己的图片即可
小程序·uni-app·apache
從南走到北10 小时前
JAVA代泊车接机送机服务代客泊车系统源码支持小程序+APP+H5
java·开发语言·微信小程序·小程序
木易 士心16 小时前
组织架构树形选择组件使用说明(Vue3 + UniApp)
微信小程序·钉钉·notepad++