微信小程序-滑动到指定位置实现

发表于   |   分类于   |  

上次在使用了自定义的Tabbar组件后遇到2个小问题。

第一个问题是点击组件Tab切换的时候有延迟，在真机上测试的时候延迟了好几秒。比如从第一个页面切换到第二个页面的时候，页面内容都已经切过去了，底部的Icon需要过2~3秒才会选中。快的时候1秒内吧，但是还是能感觉到延迟。

第二个问题是在点击切换的时候会看到Icon闪烁一下，但不是经常复现。

上面2个问题在找了好多资料后都没解决，最后放弃了自定义tabbar组件，然后选择了一种曲线救国的方式。

把有赞UI的Tabbar又封装了一层做成自定义组件(其实不封装直接使用也可以，本身就是一个组件了)，因为需要增加一些自定义的东西，然后在需要使用的页面引入这个组件，来模拟达到底部Tabbar的效果。icon的点击切换时通过 wx.navigateTo() 方法实现的页面之间跳转。

小程序中的路由选择

对小程序中的路由而言页面分为 『tabBar页面』 和 『非tabBar』 页面。而路由使用主要有下面几个方法：

wx.switchTab(Object object)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。(这个就只能跳转tabBar之间的页面了，也就是定义在根目录 app.json 文件中 tabBar属性下的页面)

wx.reLaunch(Object object)

关闭所有页面，打开到应用内的某个页面（就是跳转到某个页面，这个页面可以是当前项目中的任何页面，包括了tabBar页面，同时会关闭要跳转到的页面之外的所有页面。）

wx.redirectTo(Object object)

关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

wx.navigateTo(Object object)

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

wx.navigateBack(Object object)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层

具体使用见 文档

小程序中的scroll滚动

在做好了上面的组件后，又发现了新的问题(其实也不算问题吧，主要是自己不满意…), 比如我在第一个页面浏览了很多内容，下拉了1000px的位置，然后点击了第二个页面，等我在回来第一个页面的时候还想保留在上次的浏览位置。这个小需求就复杂了，每次回来都是回来到页面的顶部。为了实现这个小需求，想到了使用scroll方案来模拟这种效果。

在第一个页面浏览的时候记录下当前的滑动距离，下次回来在页面要显示的时候滚动到上次的位置就达到了这种效果。

要在小程序里滑动有两种方法，第一种使用官方的 scroll-view 标签，另外一种是使用 wx.pageScrollTo API.

scroll-view 的使用

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

scroll-into-view 的优先级高于 scroll-top
在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部

上面是一些官方的说明。其实这个就是使用官方的标签，来看下效果

1.编辑 index.wxml 增加

1
2
3
4
5
6
7
8
9
10
<scroll-view
   class="sv_test" 
   scroll-y="true" 
   scroll-top="200" 
   scroll-into-view="sv_c"
  >
    <view id="sv_a" class="sv_a">A</view>
    <view id="sv_b" class="sv_b">B</view>
    <view id="sv_c" class="sv_c">C</view>
</scroll-view>

2.编辑 index.wxss 稍微增加一点样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.sv_test {
  text-align: center;
  background-color: orange;
  color: white;
  font-size: 20px;
  height: 220px;
}
.sv_a,.sv_b,.sv_c {
  height: 200px;
  line-height: 200px;
}
.sv_a {
  background-color: green;
}
.sv_b {
  background-color: blue;
}
.sv_c {
  background-color: red;
}

3.看下效果

scrool_view

使用scroll_view标签的话，要滑动只能通过标签的属性 scroll-top 和 scroll-into-view. 其中 scroll-top 是纵向滚动的距离，scroll-into-view 是滚动到view中包含的某个子元素id的位置上。

所以一般是把这2个属性设置动态值，通过 this.setData() 方法来设置并改变。

注意：使用scroll_view的话一定要设置一个高度 目前之前的单位有 rpx 和 px, 不支持百分比。如果想实现自适应屏幕高度怎么办？提供一个思路，可以通过 wx.getSystemInfo() 方法来获取当前的信息，里面会包含屏幕高度宽度之类，然后自己做处理。

wx.pageScrollTo(Object object) 方法的使用

基础库 1.4.0 开始支持，低版本需做兼容处理
用来将页面滚动到目标位置，支持选择器和滚动距离两种方式定位

主要参数有

  1. scrollTop 滚动的页面目标位置，数字类型，单位是 px
  2. duration 滚动动画的时长，数字类型，单位 ms
  3. selector 选择器名称

更多说明在 这里

来做个测试

1.编辑index.wxml 增加一个按钮

1
<button bindtap="click_go">go</button>

2.编辑 index.wxss 增加一个高度

1
2
3
.container {
  height: 2000px;
}

3.编辑 index.js 增加点击事件方法

1
2
3
4
5
click_go: function () {
    wx.pageScrollTo({
      scrollTop: 1000,
    });
},

效果如下：

scroll_git

特别说明：这个方法一定要用事件去触发，我本来是想实现在页面一开始加载的时候就滚到到指定位置，结果发现不生效。在下面几个方法中都不生效 onLoad 、 onReady 、 onShow.找了好久没找到问题，也没找到解决办法…

-------------The End-------------