zoukankan      html  css  js  c++  java
  • 小程序点击返回顶部

    wxml

    <image src='../../images/agoproduct/totop.png' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>

    wxss

    /* 返回顶部 */
    .goTop{
        height: 72rpx;
        width: 72rpx;
        position: fixed;
        bottom: 26rpx;
        right: 31rpx;
      }

    js

     data: {
        // 返回顶部
        floorstatus: true
      },
      
    // 获取滚动条当前位置
    onPageScroll: function (e) {
      console.log(e)
      if (e.scrollTop > 150) {
        this.setData({
          floorstatus: true
        });
      } else {
        this.setData({
          floorstatus: false
        });
      }
    },
    //回到顶部
    goTop: function (e) {  // 一键回到顶部
      if (wx.pageScrollTo) {
        wx.pageScrollTo({
          scrollTop: 0
        })
      } else {
        wx.showModal({
          title: '提示',
          content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
        })
      }
    },
    <image src='../../images/agoproduct/totop.png' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>
  • 相关阅读:
    Checkpointing
    Flink1.10全文跟读翻译
    The Broadcast State Pattern
    mr原理简单分析
    Event Time
    动态规划潜入
    寻找hive数据倾斜路
    Distributed Runtime
    druid18.1版本single-server启动报错
    Programming Model
  • 原文地址:https://www.cnblogs.com/meiyanstar/p/13206529.html
Copyright © 2011-2022 走看看