效果图如下所示
.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,很少看博客,对你有帮助别忘记点赞收藏。