Mind UI

# Sticky 索引

# 介绍

Sticky 组件与 CSS 中 position: sticky 属性实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。

# 引入

"usingComponents": {
	"m-sticky-group": "/dist/sticky-group/index",
	"m-sticky": "/dist/index/index"
}

# 用法

<m-sticky scroll-Top="{{ scrollTop }}" bind:change="onChange">
	<m-sticky-item name="A">
		<view class="sticky-title" slot="title">
			<view>03月25日</view>
		</view>
		<view class="content" slot="content">
			<view>梦里不知身是客</view>
			<view>梦里不知身是客</view>
			<view>梦里不知身是客</view>
		</view>
	</m-sticky-item>

	<m-sticky-item name="B">
		<view class="sticky-title" slot="title">
			<view>03月26日</view>
		</view>
		<view class="content" slot="content">
			<view>直把他乡作故乡</view>
			<view>直把他乡作故乡</view>
			<view>直把他乡作故乡</view>
		</view>
	</m-sticky-item>

	<m-sticky-item name="C">
		<view class="sticky-title" slot="title">
			<view>03月27日</view>
		</view>
		<view class="content" slot="content">
			<view>独自莫凭栏</view>
			<view>独自莫凭栏</view>
			<view>独自莫凭栏</view>
		</view>
	</m-sticky-item>
</m-sticky>

Page({
	// 索引字符选中更新时触发，detail 为选中的字符
	onChange({ detail }) {
		console.log(detail)
	},

	onPageScroll({ scrollTop }) {
		this.setData({
			scrollTop
		})
	}
})

# group properties

参数 说明 类型 可选值 默认值
custom-class 自定义根节点样式类 String — —
scroll-top 页面滚动距离顶部距离 Number — —
offset-top 吸顶时距离顶部距离(支持 px，rpx，不带单位默认为 rpx) Number String — —
z-index 吸顶节点的 z-index 值 Number — 9
use-sticky 是否使用 css 的 position: sticky 属性，可通过 m-can-use-sticky 组件获取是否支持该属性 Boolean — false

# event

事件名称 说明 返回值
bind:change 吸顶时子组件对应的 name 值，use-sticky === false 时有效 event.detail: 子组件 name 值

# properties

参数 说明 类型 可选值 默认值
name 吸顶组件的 name 值，吸顶时在 change 事件中返回 String — —

# Item Slot

名称 说明
title 吸顶组件吸顶时显示的内容
content 吸顶组件内容

← Index 索引选择器 →