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

效果图如下所示

.wxml

  {
    {text_a}}


  {
    {text_b}}


  {
    {text_c}}


  {
    {text_d}}


  {
    {text_e}}


  {
    {text_f}}


  {
    {text_g}}


  {
    {text_h}}


  {
    {text_i}}


  {
    {text_j}}

.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
    }
  },
})

遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。