微信小程序实现点击返回顶层的方法
2017-07-12 16:23
896 查看
最近在研究微信小程序,被这个返回顶层给坑了一波,下面贴代码
wxml代码:
<scroll-view scroll-y style="height: 1000rpx;" scroll-top="50" enable-back-to-top="true" scroll-top="{{scrollTop.scroll_top}}" bindscroll="scrollTopFun"> <block wx:for="{{sortArr}}"> <template is="spL" data="{{item}}"></template> </block> </scroll-view> <!-- 联系客服 --> <view class="findOur fliexBox"><contact-button type="default-light" size="15" session-from="weapp"></contact-button>客服</view> <!-- 拨打电话 --> <view class="callOur fliexBox" bindtap="call">电话</view> <view class="fliexBox" style=" bottom: 150rpx; border: solid 1px green;" wx:if="{{scrollTop.goTop_show}}" catchtap="goTopFun">顶层</view>
js代码:
var app = getApp(); Page({ data: { hidden: true, list: [], scrollTop: { scroll_top: 0, goTop_show: false }, scrollHeight: 0, floorstatus:true, sortArr:[ { id: 1, img: "../../images/2.jpg", title: "君御豪园住宅", introduction: "杭州不限购不限贷口住宅", money: 5000, vperson: 115, tperson: 0 } ], }, scrollTopFun: function (e) { console.log(e.detail); if (e.detail.scrollTop > 300) {//触发gotop的显示条件 this.setData({ 'scrollTop.goTop_show': true }); } else { this.setData({ 'scrollTop.goTop_show': false }); } }, goTopFun: function (e) { var _top = this.data.scrollTop.scroll_top;//发现设置scroll-top值不能和上一次的值一样,否则无效,所以这里加了个判断 if (_top == 0) { _top = 1; } else { _top = 0; } this.setData({ 'scrollTop.scroll_top': _top }); }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this; wx.getSystemInfo({ success: function (res) { that.setData({ scrollHeight: res.windowHeight }); } }); }, })
wxss代码:
.fliexBox{ width: 100rpx; height: 50rpx; background-color: #5db13b; color: #ffffff; text-align: center; position: fixed; right: 0rpx; bottom: 85rpx; border-radius: 20rpx 0rpx 0rpx 20rpx; font-size: 26rpx; line-height: 50rpx; opacity: .6; } .callOur{ bottom: 20rpx; } contact-button{ opacity: 0; position: absolute; }
主要是需要把scroll-view 组件的高度设置起来而且不能是百分比 如100%这样,可以是rpx,这样才可以监测到滑动的距离。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- Android连续点击两次返回键退出程序的三种实现方法
- 微信小程序返回多级页面的实现方法
- 在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
- 微信小程序 | 多个按钮或VIEW,点击改变状态 简易的实现方法
- 微信小程序页面内点击按钮转发 按钮透明的实现方法
- 在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
- Android 实现微信,QQ的程序前后台切换:back键切换后台;点击通知栏恢复前台。
- Android中再按一次返回键退出程序的实现(返回桌面)两种方法
- Android中实现两次点击返回键退出本程序
- 关闭所有Activity和连续点击两次返回键关闭程序的方法
- android_实现点击两次返回按钮才退出程序
- Android双击返回键退出程序的实现方法
- Android开发之两种方式实现连续点击两次返回键退出程序
- android点击两次返回键实现程序退出
- Android中实现两次点击返回键退出本程序
- 安卓实现点击两次返回后退出程序
- js简单的点击返回顶部效果实现方法
- Android 实现微信,QQ的程序前后台切换:back键切换后台;点击通知栏恢复前台。
- Android双击返回键退出程序的实现方法
- activity中实现点连续点击两次返回键后程序退出(间隔1.5秒)