小程序返回顶部top滚动
2024-08-25 16:20:11
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 > ? true : false
that.setData({
backTopValue: backTopValue
})
}, // 滚动到顶部
backTop:function(){
// 控制滚动
wx.pageScrollTo({
scrollTop:
})
}, })
wxss
/*浮窗返回顶部*/
.backTop{width: 60rpx; height:60rpx;background: #fff;position: fixed; right: 20rpx ; bottom: 130rpx; border-radius: 30rpx;box-shadow: 0px 0px 3px #; 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样式
最新文章
- Sphinx 2.2.6 window下安装全过程 未完 持续标记~~~~
- ZOJ2532_Internship
- Sql助手
- ubuntu 16.04 mysql 相关
- SqlServer基础:游标
- 爬虫再探之mysql简单使用
- 移动APP服务端API设计应该考虑到的问题
- 进程与线程(四) linux进程间通信的方式总结
- linux diff详解
- vsftpd安装
- 乐趣与你rabbitMQ 源代码
- MonkeyRecorder
- mac下安装git,并将本地的项目上传到github
- Win10隐藏硬盘分区
- Java-break,continue,return用法
- ScalaPB(1): using protobuf in akka
- Windows驱动——读书笔记《Windows驱动开发技术详解》
- 51 Nod 1079 中国剩余定理(孙子定理)NOTE:互质情况
- 汇编指令:ldr和str,ldm和stm的区别
- 网络对抗技术作业一 P201421410029
热门文章
- Terminating app due to uncaught exception &#39;NSInvalidArgumentException&#39;, reason: &#39;*** -[__NSPlaceholderDictionary initWithObjects:forKeys:count:]: attempt to insert nil object from objects[0]&#39;
- VS2008 编译 libpng库
- [ Visual Studio ] MSDN
- iOS Application Extension
- Instruments
- Automatic overvoltage protection
- cocos2d-x项目创建和打包
- IntelliJ IDEA全局内容搜索和替换
- LINK:fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏 (转)
- Android典型界面设计——FragmentTabHost+Fragment实现底部tab切换