标签：function wxs top 程序 tarHeight var position safeArea 拖拽

wxs 文件代码 

/**
 * 拖拽移动
 */

var safeArea;

var left;
var top;

var startX; // 设备距离 左边边界 的距离
var startY; // 设备距离 头部边界 的距离
var tarHeight; // 底部导航栏的 高度
var statusBarHeight; // 状态栏的 高度 
var deviceWidth; // 设备的 宽度

// 控件移动的距离
var pageX, pageY;

function init(newValue, oldValue, ownerInstance, instance) { //初始化
  if (newValue) {

    // 获取组件类选择器，通过改变坐标值进行移动变换
    var ins = ownerInstance.selectComponent('.drag')

    // 通过 prop 属性被赋值，执行 init 方法，对元素的位置进行赋值移动
    ins.setStyle({
      "left": newValue.left,
      "top": newValue.top,
    });

    tarHeight = newValue.tarHeight // 设备底部导航栏的 高度
    statusBarHeight = newValue.statusBarHeight // 设备状态栏 高度
    deviceWidth = newValue.deviceWidth // 设备的 宽度
  }
}

// 点击开始
function handleTouchStart(e, ins) {

  var instance = ins.selectComponent('.drag') // 返回组件的实例
  var touch = e.touches[0] || e.changedTouches[0]

  startX = touch.clientX - instance.getBoundingClientRect().left // 元素内部剩余的 X 距离
  startY = touch.clientY - instance.getBoundingClientRect().top // 元素内部剩余的 Y 距离

}

// 元素移动方法
function handleTouchMove(e, ins) {
  // pageX, pageY	Number	距离文档左上角的距离，文档的左上角为原点 ，横向为X轴，纵向为
  // clientX, clientY	Number	鼠标位置，横向为X轴，纵向为Y轴

  var instance = ins.selectComponent('.drag') // 返回组件的实例
  var width = instance.getBoundingClientRect().width
  var height = instance.getBoundingClientRect().height
  var touch = e.touches[0] || e.changedTouches[0] // 获取鼠标的事件源，鼠标的移动位置等等信息

  if (!safeArea) safeArea = instance.getDataset().area;


  pageX = touch.clientX - startX;
  pageY = touch.clientY - startY;

  // 边界值的判断
  // left  和 top值 最下的值只能为 0,如果小于0 强制让元素的left 和top等于
  if (pageX <= 0) {
    pageX = 0;
  }
  if (pageY <= statusBarHeight) {
    pageY = statusBarHeight;
  }

  // left 最大值 就是为浏览器可视窗口的宽度 - 盒子的宽度
  if (pageX >= safeArea.width - width) {
    pageX = safeArea.width - width;
  }

  if (pageY >= safeArea.height - tarHeight) {
    pageY = safeArea.height - tarHeight;
  }

  instance.setStyle({
    "left": pageX + 'px',
    "top": pageY + 'px'
  });

  left = pageX + 'px';
  top = pageY + 'px';


  return false // 防止冒泡

}

function handleTouchEnd(e, ins) {
  var position = {
    left: left,
    top: top,
    statusBarHeight: parseInt(statusBarHeight),
    tarHeight: parseInt(tarHeight),
    deviceWidth: deviceWidth
  }
  ins.callMethod('setPosition', position) //调用drag组件中的setPosition函数，存入Storage
}

module.exports = {
  handleTouchStart: handleTouchStart,
  handleTouchMove: handleTouchMove,
  handleTouchEnd: handleTouchEnd,
  init: init
}

组件模块
html

<!--components/drag/drag.wxml-->
<wxs module="move" src="./move.wxs"></wxs>
<block wx:if="{{isShow}}">
  <view class="drag" data-area="{{safeArea}}" change:prop="{{move.init}}" prop="{{position}}" catchtouchstart="{{move.handleTouchStart}}" catchtouchmove="{{move.handleTouchMove}}" catchtouchend="{{move.handleTouchEnd}}">
  </view>
</block>

 js

/**
 * drag.play.js
 * 获取全局变量
 */
const app = getApp();
let GlobalData = app.globalData

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    position: Object
  },




  attached: function () {

    let safeArea = GlobalData.systemInfo.safeArea || null;
    let wh = GlobalData.systemInfo.windowHeight // 设备高度
    let ww = GlobalData.systemInfo.windowWidth // 设备宽度
    let statusBarHeight = GlobalData.systemInfo.statusBarHeight // 导航栏高度
    let tarHeight = (140*ww)/750 // 适配不同手机端

    let proportion = {
      statusBarHeight,
      tarHeight,
      wh,
      ww
    }
    
    if (safeArea) {
      this.setData({
        safeArea,
        proportion
      });
    }
  },

  detached: function () {},

  ready: function () {},

  pageLifetimes: {
    show: function () { 
      //组件所在页面onshow
      // 上面的change:prop（属性前面带change:前缀）是在 prop 属性被
      // 设置的时候触发 WXS 函数，值必须用{{}}括起来。
      // 类似 Component 定义的 properties 里面的 observer 属性，
      // 在setData({propValue: newValue})调用之后会触发。
      let safeArea = this.data.safeArea || null;
      this.setData({
        position: null
      });

      try {
        let position = wx.getStorageSync('position')
        // 第一次没有本地存储进行进行赋值
        if (!position) {
          position = {
            left: 0 + "px",
            top: parseInt(safeArea.height - this.data.proportion.tarHeight ) + "px",
            tarHeight: this.data.proportion.tarHeight, // 设备导航栏的 高度
            statusBarHeight: this.data.proportion.statusBarHeight, // 设备状态栏的高度
            deviceWidth: this.data.proportion.ww  // 设备宽度
          }
        }
        this.setData({
          position,
          isShow: true
        });
      } catch (e) {
        // Do something when catch error
      }

    },
    hide: function () {
      //组件所在页面onshow
      this.setData({
        position: null,
        isShow: false
      })
    },
    resize: function (size) {
      // 页面尺寸变化
    }
  },

  data: {
    safeArea: null,
    proportion: null,
  },

  /**
   * 组件的方法列表
   */

  methods: {
    setPosition(position) {
      wx.setStorage({
        key: "position",
        data: position
      })
    }
  }
})

wxss

/* components/drag/drag.wxss */
.drag{
  /* transform: translateY(-50%); */
  position: fixed;
  top: 530rpx;
  left: 330rpx;
  font-size: 20rpx;
  display: block;
  border-radius: 50%;
  line-height: 30rpx;
  width: 100rpx;
  height: 100rpx;
  padding-top: 20rpx;
  background: rgba(245, 166, 35,1);
  color: rgba(255, 255, 255, 1);
  border: none;
  z-index: 10000;
  text-align: center;
  box-sizing: border-box;
}

app.js
 

App({
  onLaunch: function () {
    let that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.globalData.systemInfo = res
      }
    })
  },
  globalData: {
    systemInfo: null
  }
})

参考大佬做的 拖拽demo，git 仓库地址，直接拉取，在小程序中就能直接运行了
git地址：小程序拖拽功能: 实现 mxs 小程序拖拽功能

标签：function,wxs,top,程序,tarHeight,var,position,safeArea,拖拽
来源： https://blog.csdn.net/zq18877149886/article/details/123603041

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。