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


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 相关文章推荐
各情景下元素宽高的获取实现代码
Sep 13 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
Jquery简单分页实现方法
Jul 24 Javascript
基于javascript实现tab切换特效
Mar 29 Javascript
Vue.js计算属性computed与watch(5)
Dec 09 Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
Sep 14 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
Sep 16 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
详解vite2.0配置学习(typescript版本)
Feb 25 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获取远程图片并把它保存到本地的代码
2008/04/07 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
PHP实现的一致性哈希算法完整实例
2015/11/14 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
[转]JS宝典学习笔记
2007/02/07 Javascript
Javascript的一种模块模式
2010/09/08 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
2018/08/31 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
electron实现qq快捷登录的方法示例
2018/10/22 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
深入浅析Vue 中 ref 的使用
2019/04/29 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
详解Vue中组件传值的多重实现方式
2019/08/16 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
微信小程序自定义胶囊样式
2020/12/27 Javascript
python实现倒计时的示例
2014/02/14 Python
python使用pyhook监控键盘并实现切换歌曲的功能
2014/07/18 Python
Python判断字符串是否为字母或者数字(浮点数)的多种方法
2018/08/03 Python
python numpy中cumsum的用法详解
2019/10/17 Python
Python pygame绘制文字制作滚动文字过程解析
2019/12/12 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
pytorch的batch normalize使用详解
2020/01/15 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
pycharm实现猜数游戏
2020/12/07 Python
html标签之Object和EMBED标签详解
2013/07/04 HTML / CSS
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
倡议书格式
2014/04/14 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
考察邀请函范文
2015/01/31 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书