Skip to content

Latest commit

 

History

History
111 lines (85 loc) · 2.34 KB

flexfixed.md

File metadata and controls

111 lines (85 loc) · 2.34 KB
Raw

FlexFixed 吸顶或吸底(flex布局)

链接

点击链接查看示例

扫描二维码体验

Alt text

基本用法

组件引入

npm install babel-plugin-import --save-dev

// .babelrc
{
  "plugins": [["import", {
    "libraryName": "rong-ui2",
    "libraryDirectory": "src/components"
  }]]
}

然后这样按需引入组件，就可以减小体积了：
import {FlexFixed} from 'rong-ui2';
Vue.use(FlexFixed)

or

import RongUi2 from 'rong-ui2';
import 'rong-ui2/dist/styles/rong-ui.css'
Vue.use(RongUi2)

如果提示“rongUI2 is not defined”报错信息，请确保.babelrc文件中不能有上面按需引入的配置
<template>
  <FlexFixed @on-scroll="scroll" @on-scroll-debounce="scrollDebounce">
    <Titlebar slot="header">标题</Titlebar> 
    <p>content 1</p>
    <p>content </p>
    <p>content </p>
    <p>content 2</p>
    <p>content </p>
    <p>content </p>
    <p>content 3</p>
    <p>content </p>
    <p>content </p>
    <p>content </p>
    <p>content 4</p>
    <p>content </p>
    <p>content </p>
    <p>content 5</p>
    <p>content </p>
    <p>content </p>
    <p>content 6</p>
    <p>content </p>
    <p>content </p>
    <p>content 7</p>
    <p></p>
    <Button slot="footer">下一步</Button>
  </FlexFixed>
</template>
  methods: {
    scroll ({scrollTop, maxScrollTop, direction}) {
      if( (maxScrollTop-scrollTop) < 10 ){
          console.log('滚动底啦~')
      }
    },
    scrollDebounce ({scrollTop, maxScrollTop, direction}) {
      if( (maxScrollTop-scrollTop) < 10 ){
          console.log('滚动底啦~')
      }
    }
  }

slot

slot名称 说明
不具名slot 滚动区域
header 头部
footer 底部

Events

事件名称 说明 回调参数
on-scroll 滚动事件 ({scrollTop, maxScrollTop, direction}）
on-scroll-debounce 滚动事件 ({scrollTop, maxScrollTop, direction}）

特别提示：嵌套overflow-x:scroll 或 overflow-y:scroll滚动元素时需在滚动元素上添加scroll-area样式

如<div style="overflow-x:scroll" class="scroll-area"></div>