zoukankan      html  css  js  c++  java
  • 小程序返回顶部top滚动

    小程序返回顶部top滚动

     

    wxjs

    复制代码
    const app = getApp();
    Page({
       data:{
            // top标签显示(默认不显示)
            backTopValue:false  
      }, 
      // 监听滚动条坐标
      onPageScroll: function (e) {
        //console.log(e)
        var that = this
        var scrollTop = e.scrollTop
        var backTopValue = scrollTop > 500 ? true : false
        that.setData({
          backTopValue: backTopValue
        })
      },
      
      // 滚动到顶部
      backTop:function(){
        // 控制滚动
          wx.pageScrollTo({
            scrollTop: 0
          })
      },
    
    })
    复制代码

    wxss

    /*浮窗返回顶部*/
    .backTop{ 60rpx; height:60rpx;background: #fff;position: fixed; right: 20rpx ; bottom: 130rpx; border-radius: 30rpx;box-shadow: 0px 0px 3px #000; line-height: 60rpx; text-align: center}
    .backTop text{font-size: 45rpx; }

    wxml

    <!--浮窗 Top-->
    <view class="backTop" bindtap='backTop' wx:if="{{backTopValue ==true}}"><text class='iconfont icon-top li-ico'></text></view>

    效果:滚动到一定距离后显示Top样式

  • 相关阅读:
    将数据绑定通过图表显现
    d3.js初识
    Josn
    d3-tip.js
    Java知识点总结
    Javascript的学习
    Java的多线程学习
    day11
    day10
    day09
  • 原文地址:https://www.cnblogs.com/dudu123/p/10183044.html
Copyright © 2011-2022 走看看