微信小程序 实现可拖动悬浮图标

这篇具有很好参考价值的文章主要介绍了微信小程序 实现可拖动悬浮图标。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果图
微信小程序 实现可拖动悬浮图标,微信小程序,微信小程序,小程序
(1)wxml

<view class="float-layout" bindtap="floatClick" catchtouchmove="buttonMove" bindtouchstart="buttonStart" bindtouchend="buttonEnd" style="top:{{buttonTop}}px;left:{{buttonLeft}}px;">
  <image class='float-img' src="../icon_service.png" mode="scaleToFill" />
  <view class="float-txt" >问题反馈</view>
</view>

(2)js


var startPoint
Page({
  data: {
    //按钮位置参数
    buttonTop: 0,
    buttonLeft: 0,
    windowHeight: '',
    windowWidth: '',
  },
  onLoad(options) {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        // 高度,宽度 单位为px
        that.setData({
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth,
          buttonTop: res.windowHeight * 0.50, //这里定义按钮的初始位置
          buttonLeft: res.windowWidth * 0.75, //这里定义按钮的初始位置
        })
      }
    })
  },
  /**
   * 可拖动悬浮按钮点击事件
   */
  floatClick: function () {
    wx.showToast({
      title: 'd点击了',
      icon: 'success',
      duration: 1000
    })
  },
  //以下是按钮拖动事件
  buttonStart: function (e) {
    startPoint = e.touches[0] //获取拖动开始点
  },
  buttonMove: function (e) {
    var endPoint = e.touches[e.touches.length - 1] //获取拖动结束点
    //计算在X轴上拖动的距离和在Y轴上拖动的距离
    var translateX = endPoint.clientX - startPoint.clientX
    var translateY = endPoint.clientY - startPoint.clientY
    startPoint = endPoint //重置开始位置
    var buttonTop = this.data.buttonTop + translateY
    var buttonLeft = this.data.buttonLeft + translateX
    //判断是移动否超出屏幕
    if (buttonLeft + 50 >= this.data.windowWidth) {
      buttonLeft = this.data.windowWidth - 50;
    }
    if (buttonLeft <= 0) {
      buttonLeft = 0;
    }
    if (buttonTop <= 0) {
      buttonTop = 0
    }
    if (buttonTop + 50 >= this.data.windowHeight) {
      buttonTop = this.data.windowHeight - 50;
    }
    this.setData({
      buttonTop: buttonTop,
      buttonLeft: buttonLeft
    })
  },
  buttonEnd: function (e) {}

})

(3)wxss文章来源地址https://www.toymoban.com/news/detail-764592.html

@import "../../public/wxss/base.wxss";
 /**可拖动悬浮按钮样式表**/
 .float-layout{
   position: fixed;
   padding: 15rpx 30rpx;
   background-color: rgba(255, 255, 255, 0.755);
   border-radius: 30%;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 99999;
   box-shadow: 1px 1px 1px 1px #ede7e7;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
 .float-img{
  width: 75rpx;
  height: 75rpx;
}
 .float-txt{
   left:23%;
   top:27%;
   font-weight: 800;
   font-size: 32rpx;
   color: #3691FB;
 }

到了这里,关于微信小程序 实现可拖动悬浮图标的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序】使用button组件来实现一个带有点击效果的按钮,按钮中间添加一个大的+号图标

    在微信小程序中,你可以使用 button 组件来实现一个带有点击效果的按钮,并在按钮中间添加一个大的+号图标。以下是一个示例代码: 在上述代码中,我们使用了微信小程序的 button 组件,并在其中添加了一个 text 组件,文本内容为+号。使用类名为 button 的样式设置了按钮的

    2024年02月16日
    浏览(64)
  • uniapp-vue-微信小程序 可拖动底部抽屉

    微信小程序 要求:底部上划到一定位置 停止,我用的是hbuildX插件实现,插件比较简单,具体使用往下看 实现效果:https://download.csdn.net/download/YaRuu/87600627?spm=1001.2014.3001.5501 插件地址:https://ext.dcloud.net.cn/plugin?id=7921 插件下载到hbuildX里的需要的项目里,就可以直接用了 代码实

    2024年02月11日
    浏览(43)
  • 微信小程序 movable-area 区域拖动动态组件演示

    movable-area 组件在小程序中的作用是用于创建一个可移动的区域,可以在该区域内拖动视图或内容。这个组件常用于实现可拖动的容器或可滑动的列表等交互效果。 使用 movable-area 组件可以对其内部的 movable-view 组件进行拖动操作,可以通过设置不同的属性和事件来自定义拖动

    2024年02月03日
    浏览(48)
  • 微信小程序 picker-view 组件构建一个上下拖动选择器

    picker-view是官方的一个选择器组件 支持多级选择 当然也可以单项选择 我们先来看看是个什么东西吧 简单写一个 wxml代码 js定义一个事件 然后 界面效果就是这样的 我们可以鼠标往上拖 例如 我们第二个选择B 当我们鼠标拖动后 松开那一刻 pickerChange就会触发 他会给你一个数组

    2024年02月08日
    浏览(47)
  • 微信小程序引入外部矢量图标(阿里巴巴矢量图标)

      进入阿里巴巴矢量图标库 搜索想要的矢量图标并加入购物车,点击右上角购物车 将图标添加至项目 更改项目设置 将字体格式设置为TTF Base64   点击下载至本地  在微信小程序中新建文件夹  将下载到本地的文件中的iconfont.css拖拽到微信小程序新建的文件夹中  更改后缀名

    2024年02月16日
    浏览(75)
  • 微信小程序使用自定义图标,使用阿里图标库教程

    1、去阿里图标库选择我们需要的图标并下载下来 贴一个阿里图标库的地址:iconfont-阿里巴巴矢量图标库 没有项目的自己创建一个就好了,添加进自己的项目里    点击第三步的链接打开后就是这样的 把里面的内容复制下来 在你微信小程序的项目里新建一个这样的文件, 把

    2024年02月09日
    浏览(57)
  • 微信小程序可移动悬浮按钮 movable-area movable-view 的使用

    1.将整个屏幕用movable-area组件覆盖 2.在movable-area内部添加一个movable-view实现自由滑动,如下 html css   注:movable-view的属性(此处没有列完详细请查看: movable-view | 微信开放文档 )  

    2024年02月04日
    浏览(48)
  • 微信小程序使用iconfont图标

    一、第一步进入iconfont网站 1.添加需要使用的图标,点击购物车图标加入项目   2.点击右上角的购物车按钮    3.点击添加项目按钮,选择一个项目添加即可,若没有项目,可以创建   4.添加完项目会自动跳转到下一个页面,点击font class 生成在线链接   5.复制生成的链接,去

    2024年02月08日
    浏览(71)
  • 微信小程序引入和风天气图标库

    npm导入和风天气的图标库后使用没有效果,就在网上查询了下怎么解决,然后动手尝试一下。 参考文章 1. 下载图标文件(链接),解压后大致这样 2. 在transfonter网站将需要的图标字体转成Base64,在fontfonts文件下 选择上传 下载 3. 解压后把stylesheet.css复制到小程序的某个文件夹下

    2024年02月04日
    浏览(67)
  • 微信小程序使用字体图标——链接引入

    目录 1.下载字体图标  1.选择需要的图标加入购物车添加到项目 2.查看项目  3.生成在线链接   4.复制生成的链接 等下放到iconfont.json中​编辑 2.引入链接 1.下载  2.生成iconfont.json文件 3. 在iconfont.json中 放入生成的链接 4.需要重新编译小程序之后在终端执行 5.在app.json中引入字

    2024年02月16日
    浏览(227)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包