微信小程序(十五)小程序回到顶部

简介: <image wx:if="{{visual}}" src="/images/timg.png" class="go_top" bindtap="scrollToTop" />

关于web网站的回到顶部设置,请移步《JavaScript实现网页带动画返回顶部

废话不多说,直接上代码:

Index.wxml

html

复制代码

<image wx:if="{{visual}}" src="/images/timg.png" class="go_top" bindtap="scrollToTop" />

这个就一行代码,放哪都行。

Index.wxss

css

复制代码

.go_top{
  position: fixed;
  bottom: 70px;
  right: 12px;
  width: 40px;
  height: 40px;
}

Index.js

javascript

复制代码

Page({
  data: {
    scrollHeight: wx.getSystemInfoSync().windowHeight,
    // 是否显示回到顶部图标
    visual: false,
  },
/**
   * 点击回到顶部图片方法
   */
  scrollToTop() {
    if (wx.pageScrollTo) {//判断这个方法是否可用
      wx.pageScrollTo({
        scrollTop: 0
      })
    } else {
      wx.showModal({
        title: '提示',
        content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
      })
    }
  },
  /**
   * 实时监听滚动条位置,显示/不显示回到顶部图片
   */
  onPageScroll:function(e) {
    let scrollTop = e.scrollTop
    if (scrollTop < this.data.scrollHeight / 2) {
      this.setData({
        visual: false
      })
    } else {
      this.setData({
        visual: true
      })
    }
  }
})

最后效果:

image.png

有好的建议,请在下方输入你的评论。

欢迎访问个人博客:guanchao.site

欢迎访问我的小程序:打开微信->发现->小程序->搜索“时间里的”

目录
相关文章
|
6天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的微信食堂线上订餐小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的微信食堂线上订餐小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
11天前
|
小程序 前端开发 JavaScript
微信小程序|音乐播放器小程序设计与实现
微信小程序|音乐播放器小程序设计与实现
|
11天前
|
小程序 前端开发 JavaScript
微信小程序|网上花店微信小程序的设计与实现
微信小程序|网上花店微信小程序的设计与实现
|
11天前
|
小程序 前端开发 JavaScript
微信外卖小程序
微信外卖小程序
|
11天前
|
小程序 前端开发 JavaScript
微信小程序|英语学习交流平台小程序
微信小程序|英语学习交流平台小程序
|
11天前
|
小程序 前端开发 JavaScript
微信小程序|springboot“口腔助手”小程序的设计与实现
微信小程序|springboot“口腔助手”小程序的设计与实现
|
4天前
|
小程序 前端开发 Android开发
Android企业微信分享到小程序
Android企业微信分享到小程序
12 0
|
6天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp的微信小程序评分小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的微信小程序评分小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
11天前
|
小程序 前端开发 JavaScript
微信小程序|智慧物流小程序的设计与实现
微信小程序|智慧物流小程序的设计与实现
|
6天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的小程序疫苗预约网站系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的小程序疫苗预约网站系统的详细设计和实现(源码+lw+部署文档+讲解等)

热门文章

最新文章