wxs 实现小程序拖拽功能

本文主要是介绍wxs 实现小程序拖拽功能，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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 小程序拖拽功能

这篇关于wxs 实现小程序拖拽功能的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！