微信小程序浮标,可以拖动,自动靠边隐藏一半客服图标功能

不多说,直接上代码。全屏拖动无抖动,中间停留自动靠边,拖动隐藏一半,可自己根据代码改动为自己想要的效果

js代码

import { tpStaticUrl,basictpStaticUrl } from "../../../envConfig";
let app = getApp();
Component({ properties: { },data: {windowWidth: 0, // 手机宽度windowHeight:0, // 手机高度touX: 0,  // 拖动后的X坐标touY: 0, // 拖动后的Y坐标x: 250,//定位X轴位置y: 250, //定位Y轴位置icon_xiaodangjia: tpStaticUrl+'/web/wxapp/bxsc/icon_xiaodangjia.png', // },pageLifetimes: {  // 初始化show: function() { var that = this;// console.log('222222222')wx.getSystemInfo({ success: function(res) { console.log(res)that.setData({windowWidth: res.windowWidth, // 手机宽度 windowHeight: res.windowHeight, // 手机高度x: res.windowWidth - 50,y: res.windowHeight /2 - 20})},fail: function(res) { },complete: function(res) {  },})},hide: function() { },resize: function() { },},methods: { serviceClick(){ // chelink + '/xiaoDj/index.html?wxtoken=' + rInfo.wxtoken + '&openId=' + uidapp.globalData.webviewSrc = basictpStaticUrl + '/web/xiaoDj/index.html?wxtoken=' + app.globalData.userInfo.xtoken + '&openId=' + app.globalData.userInfo.gwOpenId + '&unionId=' + app.globalData.userInfo.unionId;wx.navigateTo({  //  reLaunch关闭所有页面跳转  关闭当前页面--跳转 redirectTo    navigateTo不关闭页面跳转url: "/pages/page/webView/webView"})},bindchange(e){this.setData({ touX: e.detail.x,touY: e.detail.y})//  console.log(e.detail)},bindtouchend(e){let _this = this;// console.log('停止',_this.data.touY,e)// setTimeout(function(){if(_this.data.touX + 50 > _this.data.windowWidth && _this.data.touY+50 < _this.data.windowHeight){ // 移动右边超过了边距_this.setData({ x: _this.data.windowWidth - 25,y: e.changedTouches[0].pageY-20// y: Number(JSON.parse(JSON.stringify(_this.data.touY)))})}if(_this.data.touX + 50 < _this.data.windowWidth && _this.data.touY+50 < _this.data.windowHeight){  // 没有超过的时候,自动在右边_this.setData({ x: _this.data.windowWidth - 50,y: e.changedTouches[0].pageY-20// y: Number(JSON.parse(JSON.stringify(_this.data.touY)))})}if(_this.data.touY+50 > _this.data.windowHeight){ // 滑到底部的时候_this.setData({x: _this.data.windowWidth-50, y: _this.data.windowHeight- 100// y: Number(JSON.parse(JSON.stringify(_this.data.touY)))})}// },1000)} }});

wxml 代码

<movable-area><movable-view x='{{x}}' y='{{y}}' direction="all" style="pointer-events: auto;" bindchange="bindchange" bindtouchend="bindtouchend"><div bindtap="serviceClick" class="kefu"><image src="{{icon_xiaodangjia}}" class="kefuIcon"></image></div></movable-view>
</movable-area>

wxss 代码

movable-area{ width: 100%;height:100%;/*设置透明不影响后面的操作*/pointer-events: none;position:fixed;text-align: center;right:0px;top:0px;background: none;z-index: 9999;}.kefu, .kefuIcon { /* width: 45px;height: 45px; */border: none;padding: 0;background: none;}.kefu image {display: inline-block;width: 96rpx;height: 100rpx;}/* .kefu image { max-width: 100%;max-height: 100%;} */.kefu button::after { border: none;}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/822172.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单实战案例 之十三 简单去除图片水印效果

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单实战案例 之十三 简单去除图片水印效果 目录 Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单实战案例 之十三 简单去除图片水印效果 一、简单介绍 二、简单去除图片水印效果实现原理 三、简单去除图片水印效果案例…

神经网络压缩图像

简介 典型的压缩管道由四个组件组成&#xff1a; 编码&#xff1a;输入图像 x x x通过编码器函数 ε \varepsilon ε&#xff0c;将其转换为潜在表示 z z z。 量化&#xff1a;截断 z z z以丢弃一些不重要的信息 熵编码&#xff1a;使用某种形式的熵编码&#xff08;例如&…

盲人安全导航技巧:科技赋能让出行更自如

作为一名资深记者&#xff0c;长期关注并报道无障碍领域的发展动态。今日&#xff0c;我将聚焦盲人安全导航技巧&#xff0c;探讨这一主题下科技如何赋能视障人士实现更为安全、独立的出行。一款融合了实时避障、拍照识别物体及场景功能的盲人出行辅助应用叫做蝙蝠避障&#xf…

Java中Session的实现

在Java中&#xff0c;Session是一种用于在Web应用程序中跟踪用户状态的机制。它允许服务器在不同的HTTP请求之间存储和检索特定于用户的信息。Session是建立在HTTP协议之上的&#xff0c;它通过在服务器和客户端之间传递一个唯一的标识符来跟踪用户。 下面是对Java中的Session的…

4G/5G布控球/移动执法仪/智能单兵电力巡检远程视频智能监控方案

一、背景与需求 随着科技的不断进步&#xff0c;视频监控技术已成为电力行业不可或缺的一环。电力行业的巡检及建设工作&#xff0c;因施工现场在人迹罕见的野外或山区&#xff0c;地形复杂多变&#xff0c;安全更是重中之重&#xff0c;现场工作的视频图像需实时传回监管中心…

全量知识系统 程序详细设计之 “组织”与“分析”(QA SmartChat)

Q1. 今天我们聊聊全量知识系统&#xff08;“全知系统”&#xff09;中的“组织”与“分析” 全知系统是指一个包含所有可能知识和信息的系统&#xff0c;它具有对所有领域的知识的理解和洞察力。在这样一个系统中&#xff0c;组织和分析是非常重要的环节&#xff0c;可以帮助…

【读论文】【泛读】三篇生成式自动驾驶场景生成: Bevstreet, DisCoScene, BerfScene

文章目录 1. Street-View Image Generation from a Bird’s-Eye View Layout1.1 Problem introduction1.2 Why1.3 How1.4 My takeaway 2. DisCoScene: Spatially Disentangled Generative Radiance Fields for Controllable 3D-aware Scene Synthesis2.1 What2.2 Why2.3 How2.4…

LabVIEW变速箱自动测试系统

LabVIEW变速箱自动测试系统 在农业生产中&#xff0c;采棉机作为重要的农用机械&#xff0c;其高效稳定的运行对提高采棉效率具有重要意义。然而&#xff0c;传统的采棉机变速箱测试方法存在测试效率低、成本高、对设备可能产生损害等问题。为了解决这些问题&#xff0c;开发了…

HTTP协议安全传输教程

HTTP协议有多个版本&#xff0c;包括但不限于HTTP/0.9、HTTP/1.0、HTTP/1.1、HTTP/2和HTTP/3。这些版本各自具有不同的特点和改进&#xff0c;以适应网络技术的发展和满足不同的需求。例如&#xff0c;HTTP/1.0使用文本格式传输数据&#xff0c;简单易用且兼容性好&#xff0c;…

C++11 Thead线程和线程池

参考资料&#xff1a; 2、5.lock_guard 与 std::unique_lock-陈子青的编程学习课堂 (seestudy.cn) 3、C11 多线程编程-小白零基础到手撕线程池_哔哩哔哩_bilibili 一、 C11 Thead线程库的基本使用 # include <thread> std::thread t(function_name, args...); // 线…

十大排序——11.十大排序的比较汇总及Java中自带的排序算法

这篇文章对排序算法进行一个汇总比较&#xff01; 目录 0.十大排序汇总 0.1概述 0.2比较和非比较的区别 0.3基本术语 0.4排序算法的复杂度及稳定性 1.冒泡排序 算法简介 动图演示 代码演示 应用场景 算法分析 2.快速排序 算法简介 动图演示 代码演示 应用场景…

java 溯本求源之基础(十五)之Monitoring--jps

目录 1.jps命令概述 2.基本用法 2.1常用选项 3.应用场景 4.注意事项 5.结语 Java开发与运维过程中&#xff0c;对于Java虚拟机&#xff08;JVM&#xff09;的监控与管理至关重要。在众多JVM工具中&#xff0c;jps命令作为一种监控工具&#xff0c;为开发者提供了一种快捷…

Linux LVM与磁盘配额

目录 一.LVM概述 LVM LVM机制的基本概念 PV&#xff08;Physical Volume&#xff0c;物理卷&#xff09; VG&#xff08;Volume Group&#xff0c;卷组&#xff09; LV&#xff08;Logical Volume&#xff0c;逻辑卷&#xff09; 二.LVM 的管理命令 三.创建并使用LVM …

04-12 周五基于VS code + Python实现CSDN发布文章的自动生成

简介 之前曾经说过&#xff0c;在撰写文章之后&#xff0c;需要&#xff0c;同样需要将外链的图像转换为的形式&#xff0c;因此&#xff0c;可以参考 04-12 周五 基于VS Code Python 实现单词的自动提取 配置步骤 配置task 在vscode的命令面板configure task。配置如下的任…

Qt-控件篇

QPushbutton 1、设置按钮文本 pushButton->setText("按钮"); 2、获取按钮文本 pushButton->text(); 3、设置按钮的大小为特定值&#xff08;宽度和高度&#xff09; pushButton->setFixedSize(width,height); 4、设置按钮悬停时的工具提示文本。 pushButto…

数据结构-图

图的定义:图&#xff08;Graph&#xff09;是由顶点&#xff08;Vertex&#xff09;和边&#xff08;Edge&#xff09;组成的数学结构具体概念见图的论述.图的存储 邻接矩阵:图的邻接矩阵是一种用于表示图的存储结构&#xff0c;其中矩阵的行数和列数都对应于图的顶点&#xff…

UbuntuServer22.04安装docker

通过ubuntuserver安装docker是搭建开发环境最便捷的方式之一。下面介绍一下再ubuntu22.04上如何安装docker。相关内容参考官网链接&#xff1a;Install Docker Engine on Ubuntu 根据官网推荐&#xff0c;利用apt命令的方式安装&#xff0c;首先需要设置docker仓库&#xff0c…

【Android AMS】startActivity流程分析

文章目录 AMSActivityStackstartActivity流程startActivityMayWaitstartActivityUncheckedLocked startActivityLocked(ActivityRecord r, boolean newTask, boolean doResume, boolean keepCurTransition)resumeTopActivityLocked 参考 AMS是个用于管理Activity和其它组件运行…

贴片滚珠振动开关 / 振动传感器的用法

就是这种小东西&#xff1a; 上面的截图来自&#xff1a;https://item.szlcsc.com/3600130.html 以前写过一篇介绍这种东西内部的结构原理&#xff1a;贴片微型滚珠振动开关的结构原理。就是有个小滚珠会接通开关两边的电极&#xff0c;振动时滚珠会在内部蹦跳&#xff0c;开关…

手把手教你设计报表,轻松做出一份美观又实用的报表

你是不是在看着自己的呆板、没有特色的报表而深感苦恼&#xff0c;但同事却可以使用同样的数据制作并且展现出多样化的丰富美观的报表。要知道&#xff0c;除了要达成数据的准确度&#xff0c;基本的数据分析维度需求之外&#xff0c;报表的美观程度也有众多的隐藏“福利”与好…