Sticky 吸顶容器

概述

用于将标题栏在滚动时固定到页面顶部。

使用指南

在.vue中引入组件

<script>
    import iSticky from 'iview-mpvue/dist/components/sticky/sticky'
    import iStickyItem from 'iview-mpvue/dist/components/sticky-item/sticky-item'
    export default {
        components: {
            'i-sticky': iSticky,
            'i-sticky-item': iStickyItem
        }
    }
</script>

在main.js中引入样式文件

import 'iview-mpvue/dist/components/sticky/style/css'
import 'iview-mpvue/dist/components/sticky-item/style/css'

示例

<div class="i-sticky-demo">
    <i-sticky>
        <i-sticky-item i-class="i-sticky-demo-title">
            <div slot="title">
                逻辑层
            </div>
            <div slot="content">
                <div class="i-sticky-demo-item">注册程序</div>
                <div class="i-sticky-demo-item">场景值</div>
                <div class="i-sticky-demo-item">注册页面</div>
                <div class="i-sticky-demo-item">路由</div>
                <div class="i-sticky-demo-item">模块化</div>
                <div class="i-sticky-demo-item">API</div>
            </div>
        </i-sticky-item>
        <i-sticky-item i-class="i-sticky-demo-title">
            <div slot="title">
                视图层
            </div>
            <div slot="content">
                <div class="i-sticky-demo-item">注册程序</div>
                <div class="i-sticky-demo-item">场景值</div>
                <div class="i-sticky-demo-item">注册页面</div>
                <div class="i-sticky-demo-item">路由</div>
                <div class="i-sticky-demo-item">模块化</div>
                <div class="i-sticky-demo-item">API</div>
            </div>
        </i-sticky-item>
        <i-sticky-item i-class="i-sticky-demo-title">
            <div slot="title">
                自定义组件
            </div>
            <div slot="content">
                <div class="i-sticky-demo-item">注册程序</div>
                <div class="i-sticky-demo-item">场景值</div>
                <div class="i-sticky-demo-item">注册页面</div>
                <div class="i-sticky-demo-item">路由</div>
                <div class="i-sticky-demo-item">模块化</div>
                <div class="i-sticky-demo-item">API</div>
                <div class="i-sticky-demo-item">注册程序</div>
                <div class="i-sticky-demo-item">场景值</div>
                <div class="i-sticky-demo-item">注册页面</div>
                <div class="i-sticky-demo-item">路由</div>
                <div class="i-sticky-demo-item">模块化</div>
                <div class="i-sticky-demo-item">API</div>
            </div>
        </i-sticky-item>
        <i-sticky-item i-class="i-sticky-demo-title">
            <div slot="title">
                插件
            </div>
            <div slot="content">
                <div class="i-sticky-demo-item">注册程序</div>
                <div class="i-sticky-demo-item">场景值</div>
                <div class="i-sticky-demo-item">注册页面</div>
                <div class="i-sticky-demo-item">路由</div>
                <div class="i-sticky-demo-item">模块化</div>
                <div class="i-sticky-demo-item">API</div>
                <div class="i-sticky-demo-item">注册程序</div>
                <div class="i-sticky-demo-item">场景值</div>
                <div class="i-sticky-demo-item">注册页面</div>
                <div class="i-sticky-demo-item">路由</div>
                <div class="i-sticky-demo-item">模块化</div>
                <div class="i-sticky-demo-item">API</div>
                <div class="i-sticky-demo-item">注册程序</div>
                <div class="i-sticky-demo-item">场景值</div>
                <div class="i-sticky-demo-item">注册页面</div>
                <div class="i-sticky-demo-item">路由</div>
                <div class="i-sticky-demo-item">模块化</div>
                <div class="i-sticky-demo-item">API</div>
            </div>
        </i-sticky-item>
    </i-sticky>
  </div>

<script>
    export default {
        ...
        methods: {
            onChange(evt) {
                // todo
            }            
        }
    }
</script>

API

Sticky properties

属性	说明	类型	默认值
i-class	自定义 class 类名	String	-

StickyItem slots

名称	说明
title	吸顶标题
content	内容