小程序?qū)崿F(xiàn)可拖動(dòng)的懸浮按鈕
小程序懸浮可移動(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({ /** * 頁面的初始數(shù)據(jù) */ data: { }, /** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ onLoad: function (options) { }, /** * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成 */ onReady: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面顯示 */ onShow: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面隱藏 */ onHide: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面卸載 */ onUnload: function () { }, /** * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函數(shù) */ onReachBottom: function () { }, /** * 用戶點(diǎn)擊右上角分享 */ onShareAppMessage: function () { }, // 客服電話,點(diǎn)擊撥打 bindtapdianhua: function (e) { wx.makePhoneCall({ phoneNumber: '手機(jī)號(hào)', }) }, })
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript電子時(shí)鐘倒計(jì)時(shí)
這篇文章主要介紹了JavaScript電子時(shí)鐘倒計(jì)時(shí)的實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的朋友可以參考一下2016-01-01通過百度地圖獲取公交線路的站點(diǎn)坐標(biāo)的js代碼
通過百度地圖獲取公交線路的站點(diǎn)坐標(biāo)的js代碼,需要的朋友可以參考下2012-05-05淺談Webpack4 Tree Shaking 終極優(yōu)化指南
這篇文章主要介紹了淺談Webpack4 Tree Shaking 終極優(yōu)化指南,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11JavaScript中小數(shù)點(diǎn)精度丟失的原因以及解決方法
計(jì)算機(jī)再大的內(nèi)存它也存不下,所以不能存儲(chǔ)一個(gè)相對(duì)于數(shù)學(xué)來說的值,只能存儲(chǔ)一個(gè)近似值,所以當(dāng)計(jì)算機(jī)存儲(chǔ)后再取出來用時(shí)就會(huì)出現(xiàn)精度問題,下面這篇文章主要給大家介紹了關(guān)于JavaScript中小數(shù)點(diǎn)精度丟失的原因以及解決方法,需要的朋友可以參考下2023-10-10微信小程序使用scroll-view標(biāo)簽實(shí)現(xiàn)自動(dòng)滑動(dòng)到底部功能的實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了微信小程序使用scroll-view標(biāo)簽實(shí)現(xiàn)自動(dòng)滑動(dòng)到底部功能,代碼簡單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-11-11js實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾動(dòng)到最底部示例代碼
這篇文章主要給大家介紹了關(guān)于js實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾動(dòng)到最底部的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-06-06