移动端页面布局

要实现这种样式

 

先说布局：

整个页面宽高百分百
流式布局下来，商品区一般都封装成了单独组件，组件也宽高百分百

 

整个页面监听滚动   @scroll="contentScroll"

在mounted时纪录需要固定元素的topHeight  在我项目里为rem 高度是上面元素高度写死，也可以动态获取需固定元素距顶部高度

this.topHeight = parseInt((+document.documentElement.style.fontSize.replace('px', '')) * (3.2 + 0.9))

滚动到位置时设为fixed

contentScroll (e) {
        let target = e.target || e.srcElement
        this.scrollTop = target.scrollTop
        // console.log(this.scrollTop, this.topHeight)
        if (target.scrollTop >= this.topHeight) {
          this.setFixed()
        } else {
          this.setRelative()
        }
      },
      setRelative () {
        if (this.fixed) {
          this.fixed = false
          this.$refs.nav.style.position = 'relative'
          this.$refs.nav.style.top = ''
          this.$refs.nav.style.zIndex = ''
          this.$refs.container.style.paddingTop = '0'
        }
      },
      setFixed () {
        if (!this.fixed) {
          this.fixed = true
          this.$refs.nav.style.position = 'fixed'
          this.$refs.nav.style.top = '0'
          this.$refs.nav.style.zIndex = '1'
          this.$refs.container.style.paddingTop = '1.75rem'
        }
      },

 

实现不固定时拖动的是整个页面

先将包含组件的div设为overflow:hidden

固定状态设为滚动  同时组件内部的滚动也加上  这都是动态切换的

 

 

还存在下拉刷新

用mint-ui做的

 

需要注意的是div的滚动，只要页面和组件的根元素滚动就行了

 

页面底部有按钮需固定时，底部按钮用fixed，需滚动的页面用absolute，bottm:。。。 ， top0

这样就可以避免苹果里橡皮筋效果挡住底部按钮