微信小程序實現點擊效果

 更新時間:2019年06月21日 11:51:14   作者:CodeHunter_qcy   我要評論
這篇文章主要為大家詳細介紹了微信小程序實現點擊效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下

微信小程序動畫之點擊效果的具體代碼,供大家參考,具體內容如下


代碼:

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;
  }
}

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • JS實現選項卡效果的代碼實例

    JS實現選項卡效果的代碼實例

    這篇文章主要介紹了JS選項卡效果,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-05-05
  • 微信小程序常用簡易小函數總結

    微信小程序常用簡易小函數總結

    這篇文章主要介紹了微信小程序常用簡易小函數,結合實例形式總結分析了微信小程序提示、登陸、驗證、session操作等相關操作函數與使用技巧,需要的朋友可以參考下
    2019-02-02
  • 基于JS實現限時搶購倒計時間表代碼

    基于JS實現限時搶購倒計時間表代碼

    本文給大家分享一段簡單的代碼基于js實現限時搶購倒計時間表功能,非常不錯,代碼簡單易懂,需要的的朋友參考下吧
    2017-05-05
  • JS中Attr的用法詳解

    JS中Attr的用法詳解

    本文通過實例代碼給大家介紹了js中的attr的用法,非常不錯,具有參考借鑒價值,需要的朋友參考下吧
    2017-10-10
  • 基于JS快速實現導航下拉菜單動畫效果附源碼下載

    基于JS快速實現導航下拉菜單動畫效果附源碼下載

    這是一個帶變形動畫特效的下拉導航菜單特效。該導航菜單在菜單項之間切換時,下拉菜單會快速的根據菜單內容的大小來動態變形,顯示合適的下拉菜單大小,效果非常棒,對導航下拉菜單效果感興趣的朋友一起通過本文學習吧
    2016-10-10
  • js對象實例詳解(JavaScript對象深度剖析,深度理解js對象)

    js對象實例詳解(JavaScript對象深度剖析,深度理解js對象)

    下面小編就為大家帶來一篇js對象實例詳解(JavaScript對象深度剖析,深度理解js對象)。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • JS 調試中常見的報錯問題解決方法

    JS 調試中常見的報錯問題解決方法

    下面小編就為大家帶來一篇JS 調試中常見的報錯問題解決方法。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-05-05
  • 微信小程序代碼上傳、審核發布小程序

    微信小程序代碼上傳、審核發布小程序

    這篇文章主要為大家詳細介紹了微信小程序代碼上傳、審核發布小程序,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-05-05
  • 詳解利用exif.js解決ios手機上傳豎拍照片旋轉90度問題

    詳解利用exif.js解決ios手機上傳豎拍照片旋轉90度問題

    這篇文章主要介紹了詳解利用exif.js解決ios手機上傳豎拍照片旋轉90度問題,有需要的朋友可以了解一下。
    2016-11-11
  • 詳解JavaScript中return的用法

    詳解JavaScript中return的用法

    這篇文章主要介紹了JavaScript中return的用法,包括return定義,寫法等方面的知識,需要的朋友可以參考下
    2017-05-05

最新評論

湖北11选5走势图爱彩乐 九游棋牌合法吗 浙江体彩20选5基本走势图 贵州省11选5开奖 江苏省体彩七位数开奖 手机打麻将下载免费 中国股票指数期权 英雄时时乐攻略 2018年中超完整赛程表 彩票兼职代刷50一单 浙江游戏大厅app下载 重庆麻将机市场在哪里 河北排列七开奖信息 游戏麻将单机版 几大股票软件比较 香港63期开奖结果 有啥子好玩的棋牌游