Subsection 分段器 1.1.4

手机扫码预览

17:42



---

组件名：rice-subsection

用于切换不同的区域内容。注：1.1.4版本开始支持

平台兼容性

uni-app x

Android	iOS	iOS(Vapor)	HarmonyOS	HarmonyOS(Vapor)	微信小程序	h5
√	√	√(1.1.3+)	√	√(1.1.0+)	√	√

基础用法

通过 v-model/model-value 可以控制选中的下标

<template>
  <rice-subsection :list="list1" v-model="current" />
</template>

<script setup lang="ts">
  const list1 = ref<string[]>(['香蕉', '苹果', '大西瓜'])
  const current = ref(0)

</script>

胶囊形状

shape设置为 round 即可

<rice-subsection :list="list1" v-model="current"  shape="round" />

异步控制

before-change 函数 返回 false 或者返回 Promise 且被 reject 或 resolve 但返回值不为 true，则停止切换

<template>
  <rice-subsection :list="list2" v-model="current2" :before-change="beforeChange" />
</template>

<script setup lang="ts">
	const list2 = ref<string[]>(['年', '月', '日', '每周'])
	const current2 = ref(1)
	const beforeChange = (index : number) => {
		return new Promise((resolve) => {
			if (index == 3) {
				uni.showToast({
					title: `${list2.value[index]} 不可选择`,
					icon: "none"
				})
				resolve(false)
			} else {
				uni.showLoading({
					title: '切换中…',
					mask: true
				})
				setTimeout(() => {
					resolve(true)
					uni.hideLoading()
				}, 500)
			}

		})
	}
</script>

插槽

插槽会返回 index 和 subname 参数

<template>
  <rice-subsection :list="list1" :model-value="modelValue" @change="onChange">
    <template #default="{index,subname}">
      <view class="slot-item-class">
        <image v-if="index==0" class="slot-icon" src="/static/images/jb.png"></image>
        <image v-else class="slot-icon" src="/static/images/wm.png"></image>
        <text class="slot-text">{{subname}}</text>
      </view>
    </template>
  </rice-subsection>
</template>

自定义样式

自定义class (根节点的class除外) 在小程序中不能写在 scoped 里面 且需要加!important， 不然可能样式不生效，其他平台无此问题

<template>
  <rice-subsection :list="list1" class="subsection" text-class="text-class" active-text-class="active-text-class"
    inactive-text-class="inactive-text-class" bar-class="bar-class" :duration="120"/>
</template>
<style>
.text-class {
  font-size: 13px  !important;
}
.active-text-class {
  color: #fff  !important;
  transform: scale(1.03)  !important;
  font-weight: bold;
}
.inactive-text-class {
  color: var(--app-text-color-2);
  transform: scale(1);
}
.bar-class {
  background-color: #1989fa !important;
}
</style>

API

Props

属性名	类型	说明	默认值
list	String[]	选项	-
shape	String	形状 round/square	square
init-animate	Boolean	初始化时是否使用动画	false
duration	Number	动画时长，单位ms	300
before-change	(index:number)=>Promise<boolean>|boolean	返回 false 或者返回 Promise 且被 reject 或 resolve 但返回值不为 true，则停止切换	-
bar-class	String	激活滑块的class	-
item-class	String	每个选项的class	-
text-class	String	文字的class	-
active-text-class	String	激活文字的class	-
inactive-text-class	String	非激活文字的class	-

Events

事件名	说明	回调参数
change	切换时触发	index
clickSub	点击时触发	index

Slots

名称	说明	参数
default	自定义item	{index:当前的索引,subname：当前的值}

方法

名称	说明
init	父元素尺寸发生改变时，可以调用此方法重新计算，一般用于小程序

类型定义

组件类型

// 组件类型
const subsectionRef = ref<RiceSubsectionComponentPublicInstance | null>(null)