您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇文章给大家分享的是有关微信小程序如何实现点击页面出现文字功能,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
.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 } }, })
以上就是微信小程序如何实现点击页面出现文字功能,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。