小程序?qū)崿F(xiàn)可拖動(dòng)的懸浮按鈕
更新時(shí)間：2020年09月07日 17:31:29 作者：snowkei
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)可拖動(dòng)的懸浮按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
小程序懸浮可移動(dòng)的客服按鈕，供大家參考，具體內(nèi)容如下
<movable-area class="movable-area">
//根據(jù)x,y設(shè)置初次顯示的位置
<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;
/* 這個(gè)屬性設(shè)置為none,讓所有事件穿透過去 */
z-index: 100;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.movable-view{
pointer-events:auto;
/* 重設(shè)為auto,覆蓋父屬性設(shè)置 */
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({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
*/
onLoad: function (options) {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
*/
onShow: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
*/
onUnload: function () {
},
/**
* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
*/
onPullDownRefresh: function () {
},
/**
* 頁(yè)面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
* 用戶點(diǎn)擊右上角分享
*/
onShareAppMessage: function () {
},
// 客服電話，點(diǎn)擊撥打
bindtapdianhua: function (e) {
wx.makePhoneCall({
phoneNumber: '手機(jī)號(hào)',
})
},
})
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了原生微信小程序開發(fā)中 redux 的使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
javascript在myeclipse中報(bào)錯(cuò)的解決方法
jqueryjQueryJQUERYJqueryJQueryjquery報(bào)錯(cuò)jsJSJsmyeclipseMyEclipseMyeclipse，很多朋友應(yīng)該都會(huì)遇到過這個(gè)情況吧，按照下面的步驟便可迎刃而解2013-10-10
QRCode.js二維碼生成并能長(zhǎng)按識(shí)別
這篇文章主要為大家詳細(xì)介紹了QRCode.js二維碼生成并能長(zhǎng)按識(shí)別，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
JavaScript面試必備技巧之手寫一個(gè)Promise
很多同學(xué)在面試的時(shí)候都會(huì)被要求手寫一個(gè)Promise,那么今天我總結(jié)了一些手寫Promise的方法，可以跟著我的思路一起來實(shí)現(xiàn)一個(gè)Promise,讓我們的面試更有把握2023-02-02
JavaScript實(shí)現(xiàn)原型封裝輪播圖
這篇文章主要為大家詳細(xì)介紹了JavaScript原型封裝輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要為大家詳細(xì)介紹了js canvas仿支付寶芝麻信用分儀表盤,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
本文主要介紹了原生JS實(shí)現(xiàn)簡(jiǎn)單屏幕截圖，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
前端Webpack配置之eval-source-map使用方法
eval-source-map 是 Webpack 中 devtool 選項(xiàng)的一種模式,它提供了一種內(nèi)聯(lián) Source Map 的方式,用于開發(fā)環(huán)境中的源代碼映射,這篇文章主要介紹了前端Webpack配置之eval-source-map使用方法,需要的朋友可以參考下2024-12-12
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)拼圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
javascript勻速運(yùn)動(dòng)實(shí)現(xiàn)方法分析
這篇文章主要介紹了javascript勻速運(yùn)動(dòng)實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了JavaScript勻速運(yùn)動(dòng)的具體實(shí)現(xiàn)步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-01-01