微信小程序?qū)崿F(xiàn)點(diǎn)擊效果
微信小程序動(dòng)畫之點(diǎn)擊效果的具體代碼,供大家參考,具體內(nèi)容如下
代碼:
js:
// pages/test/test.js Page({ containerTap: function (res) { var that = this var x = res.touches[0].pageX; var y = res.touches[0].pageY + 85; this.setData({ rippleStyle: '' }); setTimeout(function () { that.setData({ rippleStyle: 'top:' + y + 'px;left:' + x + 'px;-webkit-animation: ripple 0.4s linear;animation:ripple 0.4s linear;' }); }, 200) }, })
wxml:
<view class="ripple" style="{{rippleStyle}}"></view> <view class="container" bindtouchstart="containerTap"></view>
wxss:
page{height:100%} .container{ width:100%; height:100%; overflow: hidden } .ripple { background-color:aquamarine; border-radius: 100%; height:10px; width:10px; margin-top: -90px; position: absolute; overflow: hidden } @-webkit-keyframes ripple { 100% { webkit-transform: scale(12); transform: scale(12); background-color: transparent; } }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序 實(shí)現(xiàn)點(diǎn)擊添加移除class
- 微信小程序?qū)崿F(xiàn)給循環(huán)列表添加點(diǎn)擊樣式實(shí)例
- 微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕修改view標(biāo)簽背景顏色功能示例【附demo源碼下載】
- 微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕修改字體顏色功能【附demo源碼下載】
- 微信小程序之綁定點(diǎn)擊事件實(shí)例詳解
- 微信小程序?qū)崿F(xiàn)點(diǎn)擊文字頁面跳轉(zhuǎn)功能【附源碼下載】
- 微信小程序加載更多 點(diǎn)擊查看更多
- 微信小程序點(diǎn)擊控件修改樣式實(shí)例詳解
- 微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕修改文字大小功能【附demo源碼下載】
- 微信小程序 點(diǎn)擊控件后選中其它反選實(shí)例詳解
相關(guān)文章
關(guān)于JavaScript數(shù)組去重的一些理解匯總
這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組去重的一些理解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09JS將時(shí)間的標(biāo)準(zhǔn)格式和時(shí)間戳格式和2022-01-27?00:00:00(年月日時(shí)分秒)格式相互轉(zhuǎn)換(最新推薦)
這篇文章主要介紹了JS如何將時(shí)間的標(biāo)準(zhǔn)格式和時(shí)間戳格式和2022-01-27?00:00:00(年月日時(shí)分秒)格式相互轉(zhuǎn)換,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05JavaScript實(shí)現(xiàn)可終止輪詢請求的方法
輪詢請求就是間隔相同的時(shí)間(如5s)后不斷地向服務(wù)端發(fā)起同一個(gè)接口的請求,當(dāng)然不能無限次去請求,所以輪詢必須要有個(gè)停止輪詢的機(jī)制,今天通過本文給大家介紹JavaScript實(shí)現(xiàn)可終止的輪詢請求,感興趣的朋友一起看看吧2022-06-06一文帶你了解微信小程序數(shù)據(jù)綁定、事件綁定以及事件傳參、數(shù)據(jù)同步
在微信小程序日常開發(fā)中,特定場景下我們需要事件攜帶參數(shù)到要執(zhí)行的函數(shù)中,下面這篇文章主要給大家介紹了關(guān)于微信小程序數(shù)據(jù)綁定、事件綁定以及事件傳參、數(shù)據(jù)同步的相關(guān)資料,需要的朋友可以參考下2022-11-11Javascript簡單實(shí)現(xiàn)面向?qū)ο缶幊汤^承實(shí)例代碼
這篇文章主要介紹了Javascript簡單實(shí)現(xiàn)面向?qū)ο缶幊汤^承實(shí)例代碼,簡單分析了面向?qū)ο蟪绦蛟O(shè)計(jì)的特征與繼承的具體實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11