找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序综合交流

关注:46

所属分类: 微信开发 微信小程序综合交流

微信小程序用户交流版块,希望同学们积极发言,不过大家不要恶意发布广告哦!

[经验分享] 微信小程序点击返回顶部实现方法

[复制链接]
查看: 200|回复: 1
最佳答案
0 

8

主题

8

帖子

319

积分

略知一二

积分
319
 楼主| 发表于 2017-8-10 16:37:58 | 显示全部楼层 |阅读模式
最近在研究微信小程序,被这个返回顶层给坑了一波,下面贴代码

wxml代码:
  1. <scroll-view scroll-y style="height: 1000rpx;" scroll-top="50" enable-back-to-top="true" scroll-top="{{scrollTop.scroll_top}}" bindscroll="scrollTopFun">
  2. <block wx:for="{{sortArr}}">
  3. <template is="spL" data="{{item}}"></template>
  4. </block>
  5. </scroll-view>
  6. <!-- 联系客服 -->
  7. <view class="findOur fliexBox"><contact-button type="default-light" size="15" session-from="weapp"></contact-button>客服</view>
  8. <!-- 拨打电话 -->
  9. <view class="callOur fliexBox" bindtap="call">电话</view>
  10. <view class="fliexBox" style=" bottom: 150rpx; border: solid 1px green;" wx:if="{{scrollTop.goTop_show}}" catchtap="goTopFun">顶层</view>
复制代码

js代码:
  1. var app = getApp();
  2. Page({
  3. data: {
  4. hidden: true,
  5. list: [],
  6. scrollTop: {
  7. scroll_top: 0,
  8. goTop_show: false
  9. },
  10. scrollHeight: 0,
  11. floorstatus:true,
  12. sortArr:[
  13. {
  14. id: 1,
  15. img: "../../images/2.jpg",
  16. title: "君御豪园住宅",
  17. introduction: "杭州不限购不限贷口住宅",
  18. money: 5000,
  19. vperson: 115,
  20. tperson: 0
  21. }
  22. ],
  23. },
  24. scrollTopFun: function (e) {
  25. console.log(e.detail);
  26. if (e.detail.scrollTop > 300) {//触发gotop的显示条件
  27. this.setData({
  28. 'scrollTop.goTop_show': true
  29. });
  30. } else {
  31. this.setData({
  32. 'scrollTop.goTop_show': false
  33. });
  34. }
  35. },
  36. goTopFun: function (e) {
  37. var _top = this.data.scrollTop.scroll_top;//发现设置scroll-top值不能和上一次的值一样,否则无效,所以这里加了个判断
  38. if (_top == 0) {
  39. _top = 1;
  40. } else {
  41. _top = 0;
  42. }
  43. this.setData({
  44. 'scrollTop.scroll_top': _top
  45. });
  46. },
  47. /**
  48. * 生命周期函数--监听页面加载
  49. */
  50. onLoad: function (options) {
  51. var that = this;
  52. wx.getSystemInfo({
  53. success: function (res) {
  54. that.setData({
  55. scrollHeight: res.windowHeight
  56. });
  57. }
  58. });
  59. },

  60. })
复制代码

wxss代码:
  1. .fliexBox{
  2. width: 100rpx;
  3. height: 50rpx;
  4. background-color: #5db13b;
  5. color: #ffffff;
  6. text-align: center;
  7. position: fixed;
  8. right: 0rpx;
  9. bottom: 85rpx;
  10. border-radius: 20rpx 0rpx 0rpx 20rpx;
  11. font-size: 26rpx;
  12. line-height: 50rpx;
  13. opacity: .6;
  14. }
  15. .callOur{
  16. bottom: 20rpx;
  17. }
  18. contact-button{
  19. opacity: 0;
  20. position: absolute;
  21. }
复制代码

主要是需要把scroll-view 组件的高度设置起来而且不能是百分比 如100%这样,可以是rpx,这样才可以监测到滑动的距离
回复

使用道具 举报

最佳答案
1 

5

主题

52

帖子

1229

积分

专家路上

积分
1229
发表于 2017-8-13 08:13:24 | 显示全部楼层
多谢分享!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


易域网-您身边的域名管家

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

网站业务
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com