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

效果图如下所示

.wxml

<view class="index" bindtap="index">
</view>
<text wx:for="{{text_arr}}" class="text" style="left: {{item.text_ax}}px;top: {{item.text_ay}}px;opacity: {{item.opacity_a}};" wx:if="{{item.text_a}}">
  {{item.text_a}}
</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,
    screenwidth:wx.getSystemInfoSync().windowWidth - 40,
    text_arr:[
      {text_a:'',text_ax:'',text_ay:'',opacity_a:''},
      {text_a:'',text_ax:'',text_ay:'',opacity_a:''},
      {text_a:'',text_ax:'',text_ay:'',opacity_a:''},
      {text_a:'',text_ax:'',text_ay:'',opacity_a:''},
      {text_a:'',text_ax:'',text_ay:'',opacity_a:''},
      {text_a:'',text_ax:'',text_ay:'',opacity_a:''},
      {text_a:'',text_ax:'',text_ay:'',opacity_a:''},
      {text_a:'',text_ax:'',text_ay:'',opacity_a:''},
      {text_a:'',text_ax:'',text_ay:'',opacity_a:''},
      {text_a:'',text_ax:'',text_ay:'',opacity_a:''},
    ],
  },
  index:function(e){
    let that = this
    let array = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业"]
    let index = that.data.index
    let text_arr = that.data.text_arr
    index = array.length == index ? 0 : index
    that.setData({
      index: index + 1,
    })
    let x = that.data.screenwidth < e.detail.x ? e.detail.x - 30 : e.detail.x + 8
    let y = e.detail.y - 40
    text_arr[index].text_a = array[that.data.index - 1]
    text_arr[index].text_ax = x
    text_arr[index].text_ay = y
    text_arr[index].opacity_a = 1
    that.setData({
      text_arr:text_arr,
    })
    setTimeout(function () {
      text_arr[index].opacity_a = 0
      text_arr[index].text_ay = y - 60
      that.setData({
        text_arr:text_arr,
      })
      setTimeout(function () {
        text_arr[index].text_a = ''
        that.setData({
          text_arr:text_arr,
        })
      }, 1000)
    }, 200)
  },
})

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