用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

微信小程序开发联盟 首页 教程 查看内容

微信小程序开发--导航跟随

Rolan 2017-10-11 00:12

页面向下滚动到白色导航的位置时,白色导航固定到页面最上方;当页面向上滚动到白色导航时,白色导航恢复到原始位置;点击各个导航,平滑的跳到相应位置。 ...

最近开发小程序的时候遇到这样一个需求:

页面向下滚动到白色导航的位置时,白色导航固定到页面最上方;当页面向上滚动到白色导航时,白色导航恢复到原始位置;点击各个导航,平滑的跳到相应位置。

思路1:

1.给导航设置position: absolute; 页面向下滚动到白色导航的位置时,将给导航设置为position: fixed;

2.绑定小程序滚动事件bindscroll,监听滚动距离;

代码如下:

wxml:

  1. <scroll-view class="layout" bindscroll='layoutScroll' scroll-y="true" >
  2. <view class='banner'>
  3. <text>我是一个banner</text>
  4. </view>
  5. <!-- 导航开始 -->
  6. <view class='nav clearfix {{navFixed?"positionFixed":""}}'>
  7. <view class='nav_row'>
  8. <text>导航1</text>
  9. </view>
  10. <view class='nav_row'>
  11. <text>导航2</text>
  12. </view>
  13. <view class='nav_row'>
  14. <text>导航3</text>
  15. </view>
  16. <view class='nav_row'>
  17. <text>导航4</text>
  18. </view>
  19. </view>
  20. <!-- 导航结束 -->
  21. <!-- 内容开始 -->
  22. <view class='content content1'>
  23. <text>我是内容1</text>
  24. </view>
  25. <view class='content content2'>
  26. <text>我是内容2</text>
  27. </view>
  28. <view class='content content3'>
  29. <text>我是内容3</text>
  30. </view>
  31. <view class='content content4'>
  32. <text>我是内容4</text>
  33. </view>
  34. <!-- 内容结束 -->
  35. </scroll-view>

wxss:

  1. .clearfix:after {
  2. content: ".";
  3. display: block;
  4. height: 0;
  5. clear: both;
  6. visibility: hidden;
  7. }
  8. .positionFixed{
  9. position: fixed;
  10. left: 0;
  11. top: 0;
  12. }
  13. page{
  14. width: 100%;
  15. height:100%;
  16. }
  17. .layout{
  18. width: 100%;
  19. height: 100%;
  20. background: #eee;
  21. }
  22. .banner{
  23. width: 100%;
  24. height: 200px;
  25. line-height: 200px;
  26. background: #FFB11A ;
  27. }
  28. .banner text{
  29. text-align: center;
  30. display: block;
  31. }
  32. .nav{
  33. width: 100%;
  34. height: 45px;
  35. line-height: 45px;
  36. background: #fff;
  37. }
  38. .nav_row{
  39. float: left;
  40. width: 25%;
  41. font-family: PingFangSC-Light;
  42. font-size: 16px;
  43. color: #333333;
  44. }
  45. .nav_row text{
  46. text-align: center;
  47. display: block;
  48. }
  49. .content {
  50. width: 100%;
  51. height: 200px;
  52. font-family: PingFangSC-Light;
  53. font-size: 16px;
  54. color: #333333;
  55. padding: 15px;
  56. }
  57. .content1{
  58. background: #F5BBA4;
  59. }
  60. .content2{
  61. background: #E9ED9A;
  62. }
  63. .content3{
  64. background: #9DE59C;
  65. }
  66. .content4{
  67. background: #98A5E2;
  68. }

js:

  1. Page({
  2. data: {
  3. scrollTop:'', //滑动的距离
  4. navFixed:false, //导航是否固定
  5. },
  6. //页面滑动
  7. layoutScroll: function (e) {
  8. this.data.scrollTop = this.data.scrollTop * 1 + e.detail.deltaY * 1;
  9. console.log(this.data.scrollTop)
  10. console.log(this.data.navFixed)
  11. if (this.data.scrollTop <= -200){
  12. this.setData({
  13. navFixed:true
  14. })
  15. }else{
  16. this.setData({
  17. navFixed: false
  18. })
  19. }
  20. }
  21. })

这个代码能基本实现需求,但是存在很大的弊端:

1.导航固定后,页面卡顿一下

2.导航效果延迟较长,用户体验很差

总体来说这种方案并不可取,所以进行第二次迭代

思路2:

未完待续。。。


注意:

1.整个滑动的页面应该写在scroll-view中;

2.scroll-view一定

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 漠漠 来自: csdn

相关阅读