需要做一个滚动后,头部固定的页面
这个用到 css 里的 fixed 就可以实现了

1
2
3
4
5
6
7
8
9
10
11

.headDiv {
  position: fixed;
  /*固定定位*/
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  border: 1px solid blue;
}

简单描述

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

1
2
3
4

Object.assign(target, ...sources)
//target 目标对象
//...sources 源对象
//返回 目标对象

描述:

如果目标对象中的属性具有相同的键，则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性。

Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]]，所以它会调用相关 getter 和 setter。因此，它分配属性，而不仅仅是复制或定义新的属性。如果合并源包含getter，这可能使其不适合将新属性合并到原型中。为了将属性定义（包括其可枚举性）复制到原型，应使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 。

String类型和 Symbol 类型的属性都会被拷贝。

在出现错误的情况下，例如，如果属性不可写，会引发TypeError，如果在引发错误之前添加了任何属性，则可以更改target对象。

注意，Object.assign 会跳过那些值为 null 或 undefined 的源对象。

参考了下别的文章,很多人都用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              //滚动到距离头部的指定位置