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

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

效果图如下所示

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

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

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

(0)

相关推荐

  • 微信小程序按钮点击跳转页面详解

    微信小程序中,按钮也是<button></button>标签,它通过bindtap属性绑定点击事件: 然后在js里面注册这个回调函数: 回调函数里面通过 wx.navigateTo({ url: '/pages/index/talkPage', }) 跳转到talkPage界面. 注意,html界面要在app.json里面注册: 不注册的话会报错:navigateTo:fail url "pages/index/talkPage" is not in app.j

  • 微信小程序实现点击文字页面跳转功能【附源码下载】

    本文实例讲述了微信小程序实现点击文字页面跳转功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.js文件 Page({ data:{ // text:"这是一个页面" }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面

  • 微信小程序BindTap快速连续点击目标页面跳转多次问题处理

    问题描述: 1)wxml片段 <view bindtap="loadMulti"> <text>连续点击,加载多次</text> </view> <view bindtap="loadOnce"> <text>连续点击,加载一次</text> </view> 2)js代码片段 loadMulti:function(e) { wx.navigateTo({ url: '/p

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

    本文实例为大家分享了微信小程序实现点击页面地方出现文字的具体代码,供大家参考,具体内容如下 效果图如下所示 .wxml <view class="index" bindtap="index"> </view> <text class="text" style="left: {{text_ax}}px;top: {{text_ay}}px;opacity: {{opacity_a}};" wx:if

  • 微信小程序实现点击按钮修改文字大小功能【附demo源码下载】

    本文实例讲述了微信小程序实现点击按钮修改文字大小功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="font-size:{{fontSize}}pt">我是view标签</view> <button class="btn" type="default" bindtap="magnifyFontS

  • 微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】

    本文实例讲述了微信小程序实现点击按钮移动view标签的位置功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="left:{{viewLeft}}px;">我是view标签</view> <button class="btn" type="default" bindtap="changeLocat

  • 微信小程序实现点击导航条切换页面

    本文实例为大家分享了微信小程序实现点击导航条切换页面的具体代码,供大家参考,具体内容如下 我录制了个gif如下,黄色部分是不可以滑动的,蓝色部分可以滑动. 代码解说: 首先我在js自定义了navState参数用于判断导航的当前状态, 定义了data-index用于js中动态修改导航的当前状态, nav-switch-style为选择导航条时的样式, 不可滑动视图切换很简单,用wx:if判断状态显示相应页就好了, 滑动页视图切换要用到swiper和 swiper-item, 用bindchang方

  • 微信小程序 生命周期和页面的生命周期详细介绍

    微信小程序 生命周期和页面的生命周期详解: 1.小程序的生命周期--App.js App() 必须在 app.js 中注册,且不能注册多个.所以App()方法在一个小程序中有且仅有一个. App() 函数用来注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等.先上代码: App({ onLaunch: function () { console.log('App onLaunch'); }, onShow:function (){ console.log('App onS

  • 微信小程序实现动态设置页面标题的方法【附源码下载】

    本文实例讲述了微信小程序实现动态设置页面标题的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① WXML文件 <button bindtap="setBiaoTi1">标题1</button> <button bindtap="setBiaoTi2">标题2</button> <button bindtap="setBiaoTi3">标题3</button&g

  • 微信小程序出现wx.navigateTo页面不跳转问题的解决方法

    本文实例讲述了微信小程序出现wx.navigateTo页面不跳转问题的解决方法.分享给大家供大家参考,具体如下: 今天在做微信小程序的时候,做的商品购买流程.流程是这样的: 商品展示-->商品详情-->下单页面-->下单详情页面-->支付结果页面-->跳转订单详情页面. 但是在支付成功之后,点击按钮跳转,发现怎么也跳转不了到订单详情页面,前后log都能打印出来,证明已经执行了wx.navigateTo方法,但是跳转不成功,而且,坑爹的是也不报错. 翻看微信小程序开发文档,参考

  • 微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】

    本文实例讲述了微信小程序实现点击按钮修改view标签背景颜色功能.分享给大家供大家参考,具体如下: 1.效果展示 2.操作步骤: ① 数据绑定view样式背景属性值 ② 通过逻辑文件设置该背景属性初始值 ③ 通过点击按钮修改背景属性值 3.关键代码 index.wxml文件: <view style="background:{{viewBg}};color:white;height:100px;">我是view标签</view> <button type=

随机推荐