微信小程序?qū)崿F(xiàn)點(diǎn)擊頁面出現(xiàn)文字
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)點(diǎn)擊頁面地方出現(xiàn)文字的具體代碼,供大家參考,具體內(nèi)容如下
效果圖如下所示
.wxml
<view class="index" bindtap="index"> </view> <text class="text" style="left: {{text_ax}}px;top: {{text_ay}}px;opacity: {{opacity_a}};" wx:if="{{text_a}}"> {{text_a}} </text> <text class="text" style="left: {{text_bx}}px;top: {{text_by}}px;opacity: {{opacity_b}};" wx:if="{{text_b}}"> {{text_b}} </text> <text class="text" style="left: {{text_cx}}px;top: {{text_cy}}px;opacity: {{opacity_c}};" wx:if="{{text_c}}"> {{text_c}} </text> <text class="text" style="left: {{text_dx}}px;top: {{text_dy}}px;opacity: {{opacity_d}};" wx:if="{{text_d}}"> {{text_d}} </text> <text class="text" style="left: {{text_ex}}px;top: {{text_ey}}px;opacity: {{opacity_e}};" wx:if="{{text_e}}"> {{text_e}} </text> <text class="text" style="left: {{text_fx}}px;top: {{text_fy}}px;opacity: {{opacity_f}};" wx:if="{{text_f}}"> {{text_f}} </text> <text class="text" style="left: {{text_gx}}px;top: {{text_gy}}px;opacity: {{opacity_g}};" wx:if="{{text_g}}"> {{text_g}} </text> <text class="text" style="left: {{text_hx}}px;top: {{text_hy}}px;opacity: {{opacity_h}};" wx:if="{{text_h}}"> {{text_h}} </text> <text class="text" style="left: {{text_ix}}px;top: {{text_iy}}px;opacity: {{opacity_i}};" wx:if="{{text_i}}"> {{text_i}} </text> <text class="text" style="left: {{text_jx}}px;top: {{text_jy}}px;opacity: {{opacity_j}};" wx:if="{{text_j}}"> {{text_j}} </text>
.wxss
.index{ width: 100%; float: left; height: 100vh; background-color: #ffcccc; } .text{ position: absolute; transition: all 1s; font-size: 26rpx; z-index: 9999; }
.js
Page({ data: { index:0, }, index:function(e){ let that = this let array = ["富強(qiáng)", "民主", "文明", "和諧", "自由", "平等", "公正", "法治", "愛國(guó)", "敬業(yè)"] that.data.index = array.length == that.data.index ? 0 :that.data.index that.setData({ index: that.data.index + 1, }) let x = e.detail.x + 8 let y = e.detail.y - 40 if (that.data.index == 1 && !that.data.text_a){ that.setData({ text_a: array[that.data.index - 1], text_ax: x, text_ay: y, opacity_a: 1, }) let timer_a = setInterval(function () { that.setData({ opacity_a: 0, text_ay: y - 60, }) setTimeout(function () { that.setData({ text_a: '', }) }, 1000) clearInterval(timer_a); }, 200) return false; } if (that.data.index == 2 && !that.data.text_b) { that.setData({ text_b: array[that.data.index - 1], text_bx: x, text_by: y, opacity_b: 1, }) let timer_b = setInterval(function () { that.setData({ opacity_b: 0, text_by: y - 60, }) setTimeout(function () { that.setData({ text_b: '', }) }, 1000) clearInterval(timer_b); }, 200) return false } if (that.data.index == 3 && !that.data.text_c) { that.setData({ text_c: array[that.data.index - 1], text_cx: x, text_cy: y, opacity_c: 1, }) let timer_c = setInterval(function () { that.setData({ opacity_c: 0, text_cy: y - 60, }) setTimeout(function () { that.setData({ text_c: '', }) }, 1000) clearInterval(timer_c); }, 200) return false } if (that.data.index == 4 && !that.data.text_d) { that.setData({ text_d: array[that.data.index - 1], text_dx: x, text_dy: y, opacity_d: 1, }) let timer_d = setInterval(function () { that.setData({ opacity_d: 0, text_dy: y - 60, }) setTimeout(function () { that.setData({ text_d: '', }) }, 1000) clearInterval(timer_d); }, 200) return false } if (that.data.index == 5 && !that.data.text_e) { that.setData({ text_e: array[that.data.index - 1], text_ex: x, text_ey: y, opacity_e: 1, }) let timer_e = setInterval(function () { that.setData({ opacity_e: 0, text_ey: y - 60, }) setTimeout(function () { that.setData({ text_e: '', }) }, 1000) clearInterval(timer_e); }, 200) return false } if (that.data.index == 6 && !that.data.text_f) { that.setData({ text_f: array[that.data.index - 1], text_fx: x, text_fy: y, opacity_f: 1, }) let timer_f = setInterval(function () { that.setData({ opacity_f: 0, text_fy: y - 60, }) setTimeout(function () { that.setData({ text_f: '', }) }, 1000) clearInterval(timer_f); }, 200) return false } if (that.data.index == 7 && !that.data.text_g) { that.setData({ text_g: array[that.data.index - 1], text_gx: x, text_gy: y, opacity_g: 1, }) let timer_g = setInterval(function () { that.setData({ opacity_g: 0, text_gy: y - 60, }) setTimeout(function () { that.setData({ text_g: '', }) }, 1000) clearInterval(timer_g); }, 200) return false } if (that.data.index == 8 && !that.data.text_h) { that.setData({ text_h: array[that.data.index - 1], text_hx: x, text_hy: y, opacity_h: 1, }) let timer_h = setInterval(function () { that.setData({ opacity_h: 0, text_hy: y - 60, }) setTimeout(function () { that.setData({ text_h: '', }) }, 1000) clearInterval(timer_h); }, 200) return false } if (that.data.index == 9 && !that.data.text_i) { that.setData({ text_i: array[that.data.index - 1], text_ix: x, text_iy: y, opacity_i: 1, }) let timer_i = setInterval(function () { that.setData({ opacity_i: 0, text_iy: y - 60, }) setTimeout(function () { that.setData({ text_i: '', }) }, 1000) clearInterval(timer_i); }, 200) return false } if (that.data.index == 10 && !that.data.text_j) { that.setData({ text_j: array[that.data.index - 1], text_jx: x, text_jy: y, opacity_j: 1, }) let timer_j = setInterval(function () { that.setData({ opacity_j: 0, text_jy: y - 60, }) setTimeout(function () { that.setData({ text_j: '', }) }, 1000) clearInterval(timer_j ); }, 200) return false } }, })
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇:《微信小程序開發(fā)教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS函數(shù)(普通函數(shù),箭頭函數(shù))中this的指向問題詳解
這篇文章主要給大家介紹了JS中普通函數(shù)和箭頭函數(shù)的this指向,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09js實(shí)現(xiàn)的簡(jiǎn)單圖片浮動(dòng)效果完整實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)的簡(jiǎn)單圖片浮動(dòng)效果,以完整實(shí)例形式分析了javascript實(shí)現(xiàn)圖片定時(shí)漂浮移動(dòng)功能的方法,涉及javascript定時(shí)函數(shù)與數(shù)值動(dòng)態(tài)運(yùn)算相關(guān)技巧,需要的朋友可以參考下2016-05-05對(duì)TypeScript庫進(jìn)行單元測(cè)試的方法
這篇文章主要介紹了對(duì)TypeScript庫進(jìn)行單元測(cè)試的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07原生js實(shí)現(xiàn)簡(jiǎn)單輪播圖效果
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)簡(jiǎn)單輪播圖效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09JavaScript中實(shí)現(xiàn)依賴注入的思路分享
這篇文章主要介紹了JavaScript中實(shí)現(xiàn)依賴注入的思路分享,本文給出的解決方案包括獲取func的參數(shù)列表、根據(jù)參數(shù)列表尋找依賴、傳遞依賴項(xiàng)參數(shù)并實(shí)例化等3個(gè)步驟,需要的朋友可以參考下2015-01-01JavaScript DOMContentLoaded事件案例詳解
這篇文章主要介紹了JavaScript DOMContentLoaded事件案例詳解,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09JavaScript讀二進(jìn)制文件并用ajax傳輸二進(jìn)制流的方法
這篇文章主要介紹了JavaScript讀二進(jìn)制文件并用ajax傳輸二進(jìn)制流的方法的相關(guān)資料,需要的朋友可以參考下2016-07-07