参考了下别的文章,很多人都用scroll-view来做.当然这完全可以,而且也是比较简单,但是效果不是那么特别满意.
因为是使用的是触及底边才加载,看上去不是那么美.
我希望的效果是,距离底边一段距离就开始加载了.
仔细研究了小程序的文档,有了方案. 但是这里先讲一下 scroll-view 容易跌入的坑.
scroll-view 有几个常用方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| bindscrolltoupper //滚动顶边触发
bindscrolltolower //滚动到底边触发
//这两个比较特殊 因为有滚动方向问题 向下滚动只会触发 距离底边 向上滚动只能触发距离顶边
//于是就不是我想要的效果了 我想的是 向下滚动距离多少 就触发一个效果 所以只能用下面的 bindscroll
//还有就是他们触发的是 bindscrolltoupper和bindscrolltolower 所绑定的事件 而没有自己的方法
upper-threshold //距离顶边触发 参数是数字
lower-threshold //距离底边触发 参数是数字
//这个比较简单了 实时监听滚动距离
bindscroll
//wxml中使用中的事例
//<scroll-view scroll-y style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}" upper-threshold="1000" lower-threshold="500">
//其他一些不主要的方法
scroll-into-view //滚动到指定id元素的位置
scroll-top //滚动到距离头部的指定位置
|
好了说会本体
小程序里有个设置 可以使 view 能监听滚动到底边的距离.但是这里需要在 页面的 json 里设置开启
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| //这个可以全局设置 也可以单个页面设置
{
"enablePullDownRefresh": true, //开启下拉刷新
"backgroundColor": "#eeeeee", //下拉刷新底部也没的颜色
"backgroundTextStyle": "dark", //字体样式 只有 dark和light
"onReachBottomDistance": 60 // 就是这个了 监听距离底边多少px 执行方法 onReachBottom
}
-----------------------------------------------
//然后在js里写方法就可以了
onReachBottom: function () {
console.log("触底效果!")
},
|
参考文档
