小程序实现可拖动的悬浮按钮


Posted in Javascript onSeptember 07, 2020

小程序悬浮可移动的客服按钮,供大家参考,具体内容如下

<movable-area class="movable-area">
//根据x,y设置初次显示的位置
 <movable-view x="600rpx" y="750rpx" animation="{{false}}" class="movable-view" direction='all' catchtap="bindtapdianhua">
 <image class="xf_image" src="../../../images/icon/phone.png"></image>
 <text class="xf-text">客服电话</text>
 </movable-view>
</movable-area>

CSS:

.movable-area{
 pointer-events:none;
 /* 这个属性设置为none,让所有事件穿透过去 */
 z-index: 100;
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
}
.movable-view{ 
 pointer-events:auto;
 /* 重设为auto,覆盖父属性设置 */
 height: 100rpx;
 width: 120rpx;
 /* background: red; */
}
.xf-text {
 font-size:12px;
 color:#255DEA;
 margin-top: 10rpx;
}
.xf_button{
 background-color: rgba(255, 255, 255, 0);
 border: 0px;
 height: 100rpx;
 top: 70%;
 right: 0;
 bottom: 20rpx;
 position: fixed;
 display: flex;
 flex-direction: column;
}
.xf_button::after{
 border: 0px;
}
.xf_image{
 z-index: 5;
 width: 100rpx;
 height: 100rpx;
}
// pages/components/ss-phone-button.js
const app = getApp()
Page({
 /**
 * 页面的初始数据
 */
 data: {
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {

 },

 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {

 },

 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function () {

 },

 /**
 * 生命周期函数--监听页面隐藏
 */
 onHide: function () {

 },

 /**
 * 生命周期函数--监听页面卸载
 */
 onUnload: function () {

 },

 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function () {

 },

 /**
 * 页面上拉触底事件的处理函数
 */
 onReachBottom: function () {

 },

 /**
 * 用户点击右上角分享
 */
 onShareAppMessage: function () {

 },
 // 客服电话,点击拨打
 bindtapdianhua: function (e) {
 wx.makePhoneCall({
  phoneNumber: '手机号',
 })
 },
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
初窥JQuery(二)事件机制(2)
Dec 06 Javascript
JavaScript学习笔记之JS事件对象
Jan 22 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 Javascript
详解javascript new的运行机制
Jan 26 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
深入理解令牌认证机制(token)
Aug 22 Javascript
js实现盒子滚动动画效果
Aug 09 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
Jan 29 Javascript
vue 修改 data 数据问题并实时显示操作
Sep 07 #Javascript
nginx部署多个vue项目的方法示例
Sep 06 #Javascript
js实现简单的无缝轮播效果
Sep 05 #Javascript
JS+CSS实现炫酷光感效果
Sep 05 #Javascript
js实现炫酷光感效果
Sep 05 #Javascript
js实现搜索提示框效果
Sep 05 #Javascript
jQuery实现简单三级联动效果
Sep 05 #jQuery
You might like
php中session_unset与session_destroy的区别分析
2011/06/16 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
javascript真的不难-回顾一下基础知识
2013/01/15 Javascript
Jquery AJAX POST与GET之间的区别
2013/11/14 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
基于Vue2的移动端开发环境搭建详解
2016/11/03 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
详解Vue 非父子组件通信方法(非Vuex)
2017/05/24 Javascript
详谈for循环里面的break和continue语句
2017/07/20 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
Angular异步变同步处理方法
2018/08/13 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
Python面向对象class类属性及子类用法分析
2018/02/02 Python
python requests指定出口ip的例子
2019/07/25 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
python+Selenium自动化测试——输入,点击操作
2020/03/06 Python
关于python中的xpath解析定位
2020/03/06 Python
Django models filter筛选条件详解
2020/03/16 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
普师专业个人自荐信范文
2013/11/26 职场文书
大学生职业生涯规划范文
2014/01/08 职场文书
开办大学饮食联盟创业计划书
2014/01/29 职场文书
团购业务员岗位职责
2014/03/15 职场文书
群众路线个人整改方案
2014/10/25 职场文书
五四青年节活动总结
2015/02/10 职场文书
高中英语教学反思范文
2016/03/02 职场文书
golang 实现Location跳转方式
2021/05/02 Golang
JavaScript 定时器详情
2021/11/11 Javascript
navicat 连接Ubuntu虚拟机的mysql的操作方法
2022/04/02 MySQL