微信小程序实现点击页面出现文字
网络编程 2021-07-04 14:06www.168986.cn编程入门
这篇文章主要介绍了微信小程序实现点击页面出现文字,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现点击页面地方出现文字的具体代码,供大家参考,具体内容如下
效果图如下所示
.wxml
<view class="index" bindtap="index"> </view> <text class="text" style="left: {{text_ax}}px;: {{text_ay}}px;opacity: {{opacity_a}};" wx:if="{{text_a}}"> {{text_a}} </text> <text class="text" style="left: {{text_bx}}px;: {{text_by}}px;opacity: {{opacity_b}};" wx:if="{{text_b}}"> {{text_b}} </text> <text class="text" style="left: {{text_cx}}px;: {{text_cy}}px;opacity: {{opacity_c}};" wx:if="{{text_c}}"> {{text_c}} </text> <text class="text" style="left: {{text_dx}}px;: {{text_dy}}px;opacity: {{opacity_d}};" wx:if="{{text_d}}"> {{text_d}} </text> <text class="text" style="left: {{text_ex}}px;: {{text_ey}}px;opacity: {{opacity_e}};" wx:if="{{text_e}}"> {{text_e}} </text> <text class="text" style="left: {{text_fx}}px;: {{text_fy}}px;opacity: {{opacity_f}};" wx:if="{{text_f}}"> {{text_f}} </text> <text class="text" style="left: {{text_gx}}px;: {{text_gy}}px;opacity: {{opacity_g}};" wx:if="{{text_g}}"> {{text_g}} </text> <text class="text" style="left: {{text_hx}}px;: {{text_hy}}px;opacity: {{opacity_h}};" wx:if="{{text_h}}"> {{text_h}} </text> <text class="text" style="left: {{text_ix}}px;: {{text_iy}}px;opacity: {{opacity_i}};" wx:if="{{text_i}}"> {{text_i}} </text> <text class="text" style="left: {{text_jx}}px;: {{text_jy}}px;opacity: {{opacity_j}};" wx:if="{{text_j}}"> {{text_j}} </text>
.wxss
.index{ width: 100%; float: left; height: 100vh; background-color: #ff; } .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 } }, })
为大家推荐现在关注度比较高的微信小程序教程一篇长沙网络推广为大家精心整理的,希望喜欢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程