Sticky 布局 APP
该方法或组件支持移动端小程序调用
PC
该方法或组件支持桌面端小程序调用

Sticky 布局组件

引入方式

数字生活小程序工程中,不需要 import,直接使用组件标签即可。

import { Sticky } from '@21cnfe/vui'
Vue.component('Sticky', Sticky)

代码演示

基本用法:
<div class="container">
<Sticky placement="top" :offset="0">
<div class="sticky_content top">sticked on top</div>
</Sticky>
<ul class="lists">
<li class="list" v-for="item in 15" :key="item">
{{ item }}
</li>
</ul>
<Sticky placement="bottom" :offset="0">
<div class="sticky_content bottom">sticked on bottom</div>
</Sticky>
<ul class="lists">
<li class="list" v-for="item in 5" :key="item">
{{ item }}
</li>
</ul>
</div>

API

属性 说明 类型 默认值
placement sticky 布局固定部分位置,值可以为top, bottom String top
offset sticky 布局固定部分距离顶部或底部的距离 Number 0
disable 是否禁用 sticky 布局 Boolean false
  1. 1. Sticky 布局 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用
    1. 1.1. 引入方式
    2. 1.2. 代码演示
    3. 1.3. API