微信小程序如何实现点击页面出现文字功能
本篇文章给大家分享的是有关微信小程序如何实现点击页面出现文字功能,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
.wxml
<view class="index" bindtap="index"> </view> <text class="text" wx:if="{{text_a}}"> {{text_a}} </text> <text class="text" wx:if="{{text_b}}"> {{text_b}} </text> <text class="text" wx:if="{{text_c}}"> {{text_c}} </text> <text class="text" wx:if="{{text_d}}"> {{text_d}} </text> <text class="text" wx:if="{{text_e}}"> {{text_e}} </text> <text class="text" wx:if="{{text_f}}"> {{text_f}} </text> <text class="text" wx:if="{{text_g}}"> {{text_g}} </text> <text class="text" wx:if="{{text_h}}"> {{text_h}} </text> <text class="text" wx:if="{{text_i}}"> {{text_i}} </text> <text class="text" 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 = ["富强", "*", "文明", "和谐", "*", "平等", "公正", "法治", "爱国", "敬业"] 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 } }, })
以上就是微信小程序如何实现点击页面出现文字功能,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。