小程序?qū)崿F(xiàn)可拖動的懸浮按鈕
更新時間:2020年09月07日 17:31:29 作者:snowkei
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)可拖動的懸浮按鈕,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
小程序懸浮可移動的客服按鈕,供大家參考,具體內(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; /* 這個屬性設(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)聽用戶下拉動作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函數(shù) */ onReachBottom: function () { }, /** * 用戶點擊右上角分享 */ onShareAppMessage: function () { }, // 客服電話,點擊撥打 bindtapdianhua: function (e) { wx.makePhoneCall({ phoneNumber: '手機號', }) }, })
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
淺談Webpack4 Tree Shaking 終極優(yōu)化指南
這篇文章主要介紹了淺談Webpack4 Tree Shaking 終極優(yōu)化指南,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2019-11-11JavaScript中小數(shù)點精度丟失的原因以及解決方法
計算機再大的內(nèi)存它也存不下,所以不能存儲一個相對于數(shù)學(xué)來說的值,只能存儲一個近似值,所以當計算機存儲后再取出來用時就會出現(xiàn)精度問題,下面這篇文章主要給大家介紹了關(guān)于JavaScript中小數(shù)點精度丟失的原因以及解決方法,需要的朋友可以參考下2023-10-10微信小程序使用scroll-view標簽實現(xiàn)自動滑動到底部功能的實例代碼
本文通過實例代碼給大家介紹了微信小程序使用scroll-view標簽實現(xiàn)自動滑動到底部功能,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧2018-11-11