微信小程序?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)", "民主", "文明", "和諧", "自由", "平等", "公正", "法治", "愛國", "敬業(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ā)教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序?qū)崿F(xiàn)提交input信息到后臺的方法示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)提交input信息到后臺的方法,結(jié)合實(shí)例形式分析了微信小程序提交input信息到后臺相關(guān)事件響應(yīng)與數(shù)據(jù)處理操作技巧,需要的朋友可以參考下2019-01-01
JavaScript實(shí)現(xiàn)簡單的計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單的計(jì)算器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-03-03
直接拿來用的頁面跳轉(zhuǎn)進(jìn)度條JS實(shí)現(xiàn)
這篇文章主要為大家分享了一款直接拿來用的頁面跳轉(zhuǎn)進(jìn)度條,由javascript實(shí)現(xiàn),可以直接跳轉(zhuǎn)到相應(yīng)頁面,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-01-01
ExtJs使用自定義插件動態(tài)保存表頭配置(隱藏或顯示)
這篇文章主要介紹了ExtJs使用自定義插件動態(tài)保存表頭配置(隱藏或顯示) ,需要的朋友可以參考下2018-09-09
JavaScript eval()函數(shù)定義及使用方法詳解
這篇文章主要介紹了JavaScript eval()函數(shù)定義及使用方法詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
原生JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名表
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名表,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-01-01

