栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

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


//根据x,y设置初次显示的位置
 
 
 客服电话
 

CSS:

.movable-area{
 pointer-events:none;
 
 z-index: 100;
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
}
.movable-view{ 
 pointer-events:auto;
 
 height: 100rpx;
 width: 120rpx;
 
}
.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: '手机号',
 })
 },
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持考高分网。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/68716.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号