main
fanfan
8 months ago
parent
3a4c52f674
commit
0f76dc0da4
@ -1,402 +1,416 @@ |
||||
<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> |
||||
<u-badge v-if="item.num > 0" :count="item.num" :offset="offset" size="mini"></u-badge> |
||||
</view> |
||||
<view class="u-item-bg" :style="[itemBarStyle]"></view> |
||||
</view> |
||||
<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> |
||||
<u-badge |
||||
v-if="item.num > 0" |
||||
:count="item.num" |
||||
:offset="offset" |
||||
size="mini" |
||||
></u-badge> |
||||
</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", |
||||
emits: ["change","update:modelValue", "input"], |
||||
props: { |
||||
// tab的数据 |
||||
list: { |
||||
type: Array, |
||||
default () { |
||||
return []; |
||||
} |
||||
}, |
||||
value: { |
||||
type: [String, Number], |
||||
default: 0 |
||||
}, |
||||
modelValue: { |
||||
type: [String, Number], |
||||
default: 0 |
||||
}, |
||||
// 当前活动的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 |
||||
}, |
||||
offset: { |
||||
type: Array, |
||||
default: function(){ |
||||
return [0,0] |
||||
} |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
itemBgStyle: { |
||||
width: 0, |
||||
left: 0, |
||||
backgroundColor: '#ffffff', |
||||
height: '100%', |
||||
transition: '' |
||||
}, |
||||
currentIndex: this.current, |
||||
buttonPadding: 3, // mode = button 时，组件的内边距 |
||||
borderRadius: 5, // 圆角值 |
||||
firstTimeVibrateShort: true ,// 组件初始化时，会触发current变化，此时不应震动 |
||||
listInfo:[] |
||||
}; |
||||
}, |
||||
watch: { |
||||
valueCom: { |
||||
immediate: true, |
||||
handler(nVal) { |
||||
if (!nVal) nVal = 0; |
||||
this.currentIndex = nVal; |
||||
this.changeSectionStatus(nVal); |
||||
} |
||||
}, |
||||
current: { |
||||
immediate: true, |
||||
handler(nVal) { |
||||
if (!nVal) nVal = this.valueCom || 0; |
||||
this.currentIndex = nVal; |
||||
this.changeSectionStatus(nVal); |
||||
} |
||||
}, |
||||
list: { |
||||
deep:true, |
||||
handler(nVal=[]) { |
||||
this.listInfoFn(); |
||||
setTimeout(() => { |
||||
this.getTabsInfo(); |
||||
}, 10); |
||||
} |
||||
}, |
||||
/** |
||||
* 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", |
||||
emits: ["change", "update:modelValue", "input"], |
||||
props: { |
||||
// tab的数据 |
||||
list: { |
||||
type: Array, |
||||
default() { |
||||
return []; |
||||
}, |
||||
}, |
||||
value: { |
||||
type: [String, Number], |
||||
default: 0, |
||||
}, |
||||
modelValue: { |
||||
type: [String, Number], |
||||
default: 0, |
||||
}, |
||||
// 当前活动的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, |
||||
}, |
||||
offset: { |
||||
type: Array, |
||||
default: function () { |
||||
return [0, 0]; |
||||
}, |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
itemBgStyle: { |
||||
width: 0, |
||||
left: 0, |
||||
backgroundColor: "#ffffff", |
||||
height: "100%", |
||||
transition: "", |
||||
}, |
||||
currentIndex: this.current, |
||||
buttonPadding: 3, // mode = button 时，组件的内边距 |
||||
borderRadius: 5, // 圆角值 |
||||
firstTimeVibrateShort: true, // 组件初始化时，会触发current变化，此时不应震动 |
||||
listInfo: [], |
||||
}; |
||||
}, |
||||
watch: { |
||||
valueCom: { |
||||
immediate: true, |
||||
handler(nVal) { |
||||
if (!nVal) nVal = 0; |
||||
this.currentIndex = nVal; |
||||
this.changeSectionStatus(nVal); |
||||
}, |
||||
}, |
||||
current: { |
||||
immediate: true, |
||||
handler(nVal) { |
||||
if (!nVal) nVal = this.valueCom || 0; |
||||
this.currentIndex = nVal; |
||||
this.changeSectionStatus(nVal); |
||||
}, |
||||
}, |
||||
list: { |
||||
deep: true, |
||||
handler(nVal = []) { |
||||
this.listInfoFn(); |
||||
setTimeout(() => { |
||||
this.getTabsInfo(); |
||||
}, 10); |
||||
}, |
||||
}, |
||||
}, |
||||
computed: { |
||||
valueCom() { |
||||
// #ifndef VUE3 |
||||
return this.value; |
||||
// #endif |
||||
|
||||
}, |
||||
computed: { |
||||
valueCom() { |
||||
// #ifndef VUE3 |
||||
return this.value; |
||||
// #endif |
||||
|
||||
// #ifdef VUE3 |
||||
return this.modelValue; |
||||
// #endif |
||||
}, |
||||
// 设置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() { |
||||
this.listInfoFn(); |
||||
setTimeout(() => { |
||||
this.getTabsInfo(); |
||||
}, 10); |
||||
}, |
||||
methods: { |
||||
listInfoFn(){ |
||||
let { list =[] } = this; |
||||
this.listInfo = this.list.map((val, index) => { |
||||
if (typeof val != 'object') { |
||||
let obj = { |
||||
width: 0, |
||||
name: val, |
||||
}; |
||||
return obj; |
||||
} else { |
||||
return val; |
||||
} |
||||
}); |
||||
return this.listInfo; |
||||
}, |
||||
// 改变滑块的样式 |
||||
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)); |
||||
this.$emit("input", Number(index)); |
||||
this.$emit("update:modelValue", 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'; |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
// #ifdef VUE3 |
||||
return this.modelValue; |
||||
// #endif |
||||
}, |
||||
// 设置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() { |
||||
this.listInfoFn(); |
||||
setTimeout(() => { |
||||
this.getTabsInfo(); |
||||
}, 10); |
||||
}, |
||||
methods: { |
||||
listInfoFn() { |
||||
let { list = [] } = this; |
||||
this.listInfo = this.list.map((val, index) => { |
||||
if (typeof val != "object") { |
||||
let obj = { |
||||
width: 0, |
||||
name: val, |
||||
}; |
||||
return obj; |
||||
} else { |
||||
return val; |
||||
} |
||||
}); |
||||
return this.listInfo; |
||||
}, |
||||
// 改变滑块的样式 |
||||
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)); |
||||
this.$emit("input", Number(index)); |
||||
this.$emit("update:modelValue", 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.listInfo) { |
||||
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"; |
||||
@import "../../libs/css/style.components.scss"; |
||||
|
||||
.u-subsection { |
||||
@include vue-flex; |
||||
align-items: center; |
||||
overflow: hidden; |
||||
position: relative; |
||||
} |
||||
.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; |
||||
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; |
||||
position: relative; |
||||
} |
||||
|
||||
.u-item-bg { |
||||
background-color: $u-type-primary; |
||||
position: absolute; |
||||
z-index: -1; |
||||
} |
||||
.u-item-bg { |
||||
background-color: $u-type-primary; |
||||
position: absolute; |
||||
z-index: -1; |
||||
} |
||||
|
||||
.u-none-border-right { |
||||
border-right: none !important; |
||||
} |
||||
.u-none-border-right { |
||||
border-right: none !important; |
||||
} |
||||
|
||||
.u-item-first { |
||||
border-top-left-radius: 8rpx; |
||||
border-bottom-left-radius: 8rpx; |
||||
} |
||||
.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-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; |
||||
} |
||||
.u-item-text { |
||||
transition: all 0.35s; |
||||
color: $u-main-color; |
||||
@include vue-flex; |
||||
align-items: center; |
||||
position: relative; |
||||
z-index: 3; |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue