微信小程序实现点击页面出现文字

本文实例为大家分享了微信小程序实现点击页面地方出现文字的具体代码,供大家参考,具体内容如下

效果图如下所示

.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 = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业"]
 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
 }
 },
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持云海天教程。

原文链接:https://blog.csdn.net/qq_43764578/article/details/107469000