富贵资源网 Design By www.hznty.com
本文实例为大家分享了微信小程序实现点击页面地方出现文字的具体代码，供大家参考，具体内容如下
效果图如下所示
.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 "_blank" href="//www.jb51.net/Special/900.htm">《微信小程序开发教程》小编为大家精心整理的，希望喜欢。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
暂无评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。