# Slot

提示

slot的写法在vue2vue3中写法不同,以下示例为vue2写法,若需要查看vue3中的写法,请点击这里

注意

① 使用slot插入的view必须是z-paging的子view(此view的上一级必须是z-paging),如:

<z-paging ref="paging" v-model="dataList" @query="queryList">
	<view slot="top">我是固定在顶部的view</view>
</z-paging>
1
2
3

② slot节点不支持通过v-if或v-show动态显示/隐藏,若需要动态控制,可将v-if添加在其子节点上,如:

<z-paging ref="paging" v-model="dataList" @query="queryList">
	<view slot="bottom">
		<view v-if="showBottom">
			<!-- bottom的内容 -->
		</view>
	</view>
</z-paging>
1
2
3
4
5
6
7
名称 说明
empty 自定义空数据占位view
loading 自定义页面reload时的加载view,注意:这个slot默认仅会在第一次加载时显示,若需要每次reload时都显示,需要将auto-hide-loading-after-first-loaded设置为false
refresher 自定义下拉刷新view,设置后则不使用uni自带的下拉刷新view和z-paging自定义的下拉刷新view。此view的style必须设置为height:100%

(在非nvue中,自定义下拉刷新view的高度受refresher-threshold控制,因此如果它的高度不为默认的80rpx,则需要设置refresher-threshold="自定义下拉刷新view的高度")

refresherComplete 2.1.1 自定义结束状态下的下拉刷新view,若设置,当下拉刷新结束时,会替换当前状态下的下拉刷新view。

(注意:默认情况下您无法看到结束状态的下拉刷新view,除非您设置了refresher-complete-duration并且值足够大,例如:500)

top 1.5.5 可以将自定义导航栏、tab-view等需要固定的(不需要跟着滚动的)元素放入slot="top"的view中。
注意,当有多个需要固定的view时,请用一个view包住它们,并且在这个view上设置slot="top"。需要固定在顶部的view请勿设置position: fixed;

在nvue中或使用页面滚动时,若top中的内容动态变化(即高度动态变化),请在高度更新后调用this.$refs.paging.updatePageScrollTopHeight()

bottom 1.6.2 可以将需要固定在底部的(不需要跟着滚动的)元素放入slot="bottom"的view中。
注意,当有多个需要固定的view时,请用一个view包住它们,并且在这个view上设置slot="bottom"。需要固定在底部的view请勿设置position: fixed;

在nvue中或使用页面滚动时,若bottom中的内容动态变化(即高度动态变化),请在高度更新后调用this.$refs.paging.updatePageScrollBottomHeight()

left 2.2.3 可以将需要固定在左侧的(不需要跟着滚动的)元素放入slot="left"的view中。
注意,当有多个需要固定的view时,请用一个view包住它们,并且在这个view上设置slot="left"。需要固定在左侧的view请勿设置position: fixed;

slot="left"插入的view将夹在slot="top"slot="bottom"之间,不会盖住它们。如果希望它的高度铺满屏幕,请为插入的view设置height:100%(如果是nvue请设置flex:1),不建议在页面滚动模式下使用slot="left",因为它也会跟着页面滚动。

right 2.2.3 可以将需要固定在右侧的(不需要跟着滚动的)元素放入slot="right"的view中。
注意,当有多个需要固定的view时,请用一个view包住它们,并且在这个view上设置slot="right"。需要固定在右侧的view请勿设置position: fixed;

slot="right"插入的view将夹在slot="top"slot="bottom"之间,不会盖住它们。如果希望它的高度铺满屏幕,请为插入的view设置height:100%(如果是nvue请设置flex:1),不建议在页面滚动模式下使用slot="right",因为它也会跟着页面滚动。

cell 2.2.5 use-virtual-listuse-inner-list为true时有效
内置列表中的cell
header 2.2.5 use-virtual-listuse-inner-list为true时有效
内置列表中的header(在cell顶部且跟随列表滚动)
footer 2.2.5 use-virtual-listuse-inner-list为true时有效
内置列表中的footer(在cell底部且跟随列表滚动)
chatLoading 使用聊天记录模式时自定义顶部加载更多view,use-chat-record-mode为true时有效
loadingMoreDefault 自定义滑动到底部"默认"状态的view(即"点击加载更多view")

(自定义插入时默认点击无法加载更多,若需要实现点击加载更多,请为插入的view添加点击事件,并在点击事件中调用this.$refs.paging.doLoadMore('click'))

loadingMoreLoading 自定义滑动到底部"加载中"状态的view
loadingMoreNoMore 自定义滑动到底部"没有更多数据"状态的view
loadingMoreFail 自定义滑动到底部"加载失败"状态的view
backToTop 1.9.4 自定义点击返回顶部view

(此view受“【返回顶部按钮】配置”控制,且其父view默认宽高为76rpx)