You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
355 lines
9.7 KiB
355 lines
9.7 KiB
<template> |
|
<view class="u-subsection" :style="[subsectionStyle]"> |
|
<view class="u-item u-line-1" :style="[itemStyle(index)]" @tap="click(index)" :class="[noBorderRight(index), 'u-item-' + index]" |
|
v-for="(item, index) in listInfo" :key="index"> |
|
<view :style="[textStyle(index)]" class="u-item-text u-line-1">{{ item.name }}</view> |
|
</view> |
|
<view class="u-item-bg" :style="[itemBarStyle]"></view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
/** |
|
* subsection 分段器 |
|
* @description 该分段器一般用于用户从几个选项中选择某一个的场景 |
|
* @tutorial https://www.uviewui.com/components/subsection.html |
|
* @property {Array} list 选项的数组，形式见上方"基本使用" |
|
* @property {String Number} current 初始化时默认选中的选项索引值（默认0） |
|
* @property {String} active-color 激活时的颜色，mode为subsection时固定为白色（默认#303133） |
|
* @property {String} inactive-color 未激活时字体的颜色，mode为subsection时无效（默认#606266） |
|
* @property {String} mode 模式选择，见官网"模式选择"说明（默认button） |
|
* @property {String Number} font-size 字体大小，单位rpx（默认28） |
|
* @property {String Number} height 组件高度，单位rpx（默认70） |
|
* @property {Boolean} animation 是否开启动画效果，见上方说明（默认true） |
|
* @property {Boolean} bold 激活选项的字体是否加粗（默认true） |
|
* @property {String} bg-color 组件背景颜色，mode为button时有效（默认#eeeeef） |
|
* @property {String} button-color 按钮背景颜色，mode为button时有效（默认#ffffff） |
|
* @event {Function} change 分段器选项发生改变时触发 |
|
* @example <u-subsection active-color="#ff9900"></u-subsection> |
|
*/ |
|
export default { |
|
name: "u-subsection", |
|
props: { |
|
// tab的数据 |
|
list: { |
|
type: Array, |
|
default () { |
|
return []; |
|
} |
|
}, |
|
// 当前活动的tab的index |
|
current: { |
|
type: [Number, String], |
|
default: 0 |
|
}, |
|
// 激活的颜色 |
|
activeColor: { |
|
type: String, |
|
default: '#303133' |
|
}, |
|
// 未激活的颜色 |
|
inactiveColor: { |
|
type: String, |
|
default: '#606266' |
|
}, |
|
// 模式选择，mode=button为按钮形式，mode=subsection时为分段模式 |
|
mode: { |
|
type: String, |
|
default: 'button' |
|
}, |
|
// 字体大小，单位rpx |
|
fontSize: { |
|
type: [Number, String], |
|
default: 28 |
|
}, |
|
// 是否开启动画效果 |
|
animation: { |
|
type: Boolean, |
|
default: true |
|
}, |
|
// 组件的高度，单位rpx |
|
height: { |
|
type: [Number, String], |
|
default: 70 |
|
}, |
|
// 激活tab的字体是否加粗 |
|
bold: { |
|
type: Boolean, |
|
default: true |
|
}, |
|
// mode=button时，组件背景颜色 |
|
bgColor: { |
|
type: String, |
|
default: '#eeeeef' |
|
}, |
|
// mode = button时，滑块背景颜色 |
|
buttonColor: { |
|
type: String, |
|
default: '#ffffff' |
|
}, |
|
// 在切换分段器的时候，是否让设备震一下 |
|
vibrateShort: { |
|
type: Boolean, |
|
default: false |
|
} |
|
}, |
|
data() { |
|
return { |
|
listInfo: [], |
|
itemBgStyle: { |
|
width: 0, |
|
left: 0, |
|
backgroundColor: '#ffffff', |
|
height: '100%', |
|
transition: '' |
|
}, |
|
currentIndex: this.current, |
|
buttonPadding: 3, // mode = button 时，组件的内边距 |
|
borderRadius: 5, // 圆角值 |
|
firstTimeVibrateShort: true // 组件初始化时，会触发current变化，此时不应震动 |
|
}; |
|
}, |
|
watch: { |
|
current: { |
|
immediate: true, |
|
handler(nVal) { |
|
this.currentIndex = nVal; |
|
this.changeSectionStatus(nVal); |
|
} |
|
} |
|
}, |
|
created() { |
|
// 将list的数据，传入listInfo数组，因为不能修改props传递的list值 |
|
// 可以接受直接数组形式，或者数组元素为对象的形式，如：['简介', '评论'],或者[{name: '简介'}, {name: '评论'}] |
|
this.listInfo = this.list.map((val, index) => { |
|
if (typeof val != 'object') { |
|
let obj = { |
|
width: 0, |
|
name: val |
|
}; |
|
return obj; |
|
} else { |
|
val.width = 0; |
|
return val; |
|
} |
|
}); |
|
}, |
|
computed: { |
|
// 设置mode=subsection时，滑块特有的样式 |
|
noBorderRight() { |
|
return index => { |
|
if (this.mode != 'subsection') return; |
|
let classs = ''; |
|
// 不显示右边的边框 |
|
if (index < this.list.length - 1) classs += ' u-none-border-right'; |
|
// 显示整个组件的左右边圆角 |
|
if (index == 0) classs += ' u-item-first'; |
|
if (index == this.list.length - 1) classs += ' u-item-last'; |
|
return classs; |
|
}; |
|
}, |
|
// 文字的样式 |
|
textStyle() { |
|
return index => { |
|
let style = {}; |
|
// 设置字体颜色 |
|
if (this.mode == 'subsection') { |
|
if (index == this.currentIndex) { |
|
style.color = '#ffffff'; |
|
} else { |
|
style.color = this.activeColor; |
|
} |
|
} else { |
|
if (index == this.currentIndex) { |
|
style.color = this.activeColor; |
|
} else { |
|
style.color = this.inactiveColor; |
|
} |
|
} |
|
// 字体加粗 |
|
if (index == this.currentIndex && this.bold) style.fontWeight = 'bold'; |
|
// 文字大小 |
|
style.fontSize = this.fontSize + 'rpx'; |
|
return style; |
|
}; |
|
}, |
|
// 每个分段器item的样式 |
|
itemStyle() { |
|
return index => { |
|
let style = {}; |
|
if (this.mode == 'subsection') { |
|
// 设置border的样式 |
|
style.borderColor = this.activeColor; |
|
style.borderWidth = '1px'; |
|
style.borderStyle = 'solid'; |
|
} |
|
return style; |
|
}; |
|
}, |
|
// mode=button时，外层view的样式 |
|
subsectionStyle() { |
|
let style = {}; |
|
style.height = uni.upx2px(this.height) + 'px'; |
|
if (this.mode == 'button') { |
|
style.backgroundColor = this.bgColor; |
|
style.padding = `${this.buttonPadding}px`; |
|
style.borderRadius = `${this.borderRadius}px`; |
|
} |
|
return style; |
|
}, |
|
// 滑块的样式 |
|
itemBarStyle() { |
|
let style = {}; |
|
style.backgroundColor = this.activeColor; |
|
style.zIndex = 1; |
|
if (this.mode == 'button') { |
|
style.backgroundColor = this.buttonColor; |
|
style.borderRadius = `${this.borderRadius}px`; |
|
style.bottom = `${this.buttonPadding}px`; |
|
style.height = uni.upx2px(this.height) - this.buttonPadding * 2 + 'px'; |
|
style.zIndex = 0; |
|
} |
|
return Object.assign(this.itemBgStyle, style); |
|
} |
|
}, |
|
mounted() { |
|
setTimeout(() => { |
|
this.getTabsInfo(); |
|
}, 10); |
|
}, |
|
methods: { |
|
// 改变滑块的样式 |
|
changeSectionStatus(nVal) { |
|
if (this.mode == 'subsection') { |
|
// 根据滑块在最左边和最右边时，显示左边和右边的圆角 |
|
if (nVal == this.list.length - 1) { |
|
this.itemBgStyle.borderRadius = `0 ${this.buttonPadding}px ${this.buttonPadding}px 0`; |
|
} |
|
if (nVal == 0) { |
|
this.itemBgStyle.borderRadius = `${this.buttonPadding}px 0 0 ${this.buttonPadding}px`; |
|
} |
|
if (nVal > 0 && nVal < this.list.length - 1) { |
|
this.itemBgStyle.borderRadius = '0'; |
|
} |
|
} |
|
// 更新滑块的位置 |
|
setTimeout(() => { |
|
this.itemBgLeft(); |
|
}, 10); |
|
if (this.vibrateShort && !this.firstTimeVibrateShort) { |
|
// 使手机产生短促震动，微信小程序有效，APP(HX 2.6.8)和H5无效 |
|
// #ifndef H5 |
|
uni.vibrateShort(); |
|
// #endif |
|
} |
|
// 第一次过后，设置firstTimeVibrateShort为false，让其下一次可以震动(如果允许震动的话) |
|
this.firstTimeVibrateShort = false; |
|
}, |
|
click(index) { |
|
// 不允许点击当前激活选项 |
|
if (index == this.currentIndex) return; |
|
this.currentIndex = index; |
|
this.changeSectionStatus(index); |
|
this.$emit('change', Number(index)); |
|
}, |
|
// 获取各个tab的节点信息 |
|
getTabsInfo() { |
|
let view = uni.createSelectorQuery().in(this); |
|
for (let i = 0; i < this.list.length; i++) { |
|
view.select('.u-item-' + i).boundingClientRect(); |
|
} |
|
view.exec(res => { |
|
if (!res.length) { |
|
setTimeout(() => { |
|
this.getTabsInfo(); |
|
return; |
|
}, 10); |
|
} |
|
// 将分段器每个item的宽度，放入listInfo数组 |
|
res.map((val, index) => { |
|
this.listInfo[index].width = val.width; |
|
}); |
|
// 初始化滑块的宽度 |
|
if (this.mode == 'subsection') { |
|
this.itemBgStyle.width = this.listInfo[0].width + 'px'; |
|
} else if (this.mode == 'button') { |
|
this.itemBgStyle.width = this.listInfo[0].width + 'px'; |
|
} |
|
// 初始化滑块的位置 |
|
this.itemBgLeft(); |
|
}); |
|
}, |
|
itemBgLeft() { |
|
// 根据是否开启动画效果， |
|
if (this.animation) { |
|
this.itemBgStyle.transition = 'all 0.35s'; |
|
} else { |
|
this.itemBgStyle.transition = 'all 0s'; |
|
} |
|
let left = 0; |
|
// 计算当前活跃item到组件左边的距离 |
|
this.listInfo.map((val, index) => { |
|
if (index < this.currentIndex) left += val.width; |
|
}); |
|
// 根据mode不同模式，计算滑块需要移动的距离 |
|
if (this.mode == 'subsection') { |
|
this.itemBgStyle.left = left + 'px'; |
|
} else if (this.mode == 'button') { |
|
this.itemBgStyle.left = left + this.buttonPadding + 'px'; |
|
} |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
@import "../../libs/css/style.components.scss"; |
|
|
|
.u-subsection { |
|
@include vue-flex; |
|
align-items: center; |
|
overflow: hidden; |
|
position: relative; |
|
} |
|
|
|
.u-item { |
|
flex: 1; |
|
text-align: center; |
|
font-size: 26rpx; |
|
height: 100%; |
|
@include vue-flex; |
|
align-items: center; |
|
justify-content: center; |
|
color: $u-main-color; |
|
padding: 0 6rpx; |
|
} |
|
|
|
.u-item-bg { |
|
background-color: $u-type-primary; |
|
position: absolute; |
|
z-index: -1; |
|
} |
|
|
|
.u-none-border-right { |
|
border-right: none !important; |
|
} |
|
|
|
.u-item-first { |
|
border-top-left-radius: 8rpx; |
|
border-bottom-left-radius: 8rpx; |
|
} |
|
|
|
.u-item-last { |
|
border-top-right-radius: 8rpx; |
|
border-bottom-right-radius: 8rpx; |
|
} |
|
|
|
.u-item-text { |
|
transition: all 0.35s; |
|
color: $u-main-color; |
|
@include vue-flex; |
|
align-items: center; |
|
position: relative; |
|
z-index: 3; |
|
} |
|
</style>
|
|
|