Skip to content

T
tea_resources_pc
Commit 828bba3d authored by mengzixuan's avatar mengzixuan
Browse files
Options

学习平台-tab滑动切换组件修改

parent 8d5ad868
Hide whitespace changes
Inline Side-by-side
Showing with 76 additions and 71 deletions
src/views/learningPlatform/tabSwitch/index.vue
View file @ 828bba3d
...@@ -3,8 +3,7 @@ ...@@ -3,8 +3,7 @@
<div class="switch"> <div class="switch">
<div v-for="(item, index) in list" :key="index" @mouseover="mouseover(item,index)" @mouseleave="mouseleave(item,index)"> <div v-for="(item, index) in list" :key="index" @mouseover="mouseover(item,index)" @mouseleave="mouseleave(item,index)">
<div :class="item.color"> <div :class="item.color">
<div class="solid" v-if="index !== 0"></div> <div :class="index === 0 ? 'elementTwo' : 'element'">
<div :class="index !== 0 ? 'elementTwo' : 'element'">
<div class="child"></div> <div class="child"></div>
</div> </div>
<div :class="index !== 0 ? 'textTwo' : 'text'">{{ item.name }}</div> <div :class="index !== 0 ? 'textTwo' : 'text'">{{ item.name }}</div>
...@@ -13,7 +12,7 @@ ...@@ -13,7 +12,7 @@
</div> </div>
</div> </div>
<div class="app-wrapper"> <div class="app-wrapper">
<!-- 文本超出，左右按钮滚动 --> <!-- 文本超出，左右滚动 -->
<div id="click-scroll-X"> <div id="click-scroll-X">
<div class="scroll_wrapper" ref="wrapperCon"> <div class="scroll_wrapper" ref="wrapperCon">
<div class="scroll_list"> <div class="scroll_list">
...@@ -28,6 +27,7 @@ ...@@ -28,6 +27,7 @@
</template> </template>
<script> <script>
import 'swiper/css/swiper.min.css' import 'swiper/css/swiper.min.css'
export default { export default {
name: 'Index', name: 'Index',
data() { data() {
...@@ -36,28 +36,28 @@ export default { ...@@ -36,28 +36,28 @@ export default {
timer: null, // 定时器（方便清除） timer: null, // 定时器（方便清除）
classify: [ classify: [
{ img: require('@/assets/image/xuexiTab1.png') }, { img: require('@/assets/image/xuexiTab1.png') },
{ img: require('@/assets/image/xuexiTab1.png') }, { img: require('@/assets/image/xuexiTab2.png') },
{ img: require('@/assets/image/xuexiTab1.png') }, { img: require('@/assets/image/xuexiTab3.png') },
{ img: require('@/assets/image/xuexiTab1.png') } { img: require('@/assets/image/xuexiTab4.png') }
], ],
list: [ list: [
{ {
name: 'name1', name: '学习行为监测',
id: 1, id: 1,
color: 'blue' color: 'blue'
}, },
{ {
name: 'name2', name: '数据分析服务',
id: 2, id: 2,
color: 'grey' color: 'grey'
}, },
{ {
name: 'name3', name: '角色管理服务',
id: 3, id: 3,
color: 'grey' color: 'grey'
}, },
{ {
name: 'name4', name: '课程推荐服务',
id: 4, id: 4,
color: 'grey' color: 'grey'
} }
...@@ -71,7 +71,8 @@ export default { ...@@ -71,7 +71,8 @@ export default {
if (oldVal !== '') { if (oldVal !== '') {
if (newVal > oldVal) { if (newVal > oldVal) {
const difference = newVal - oldVal const difference = newVal - oldVal
this.rightSlide(difference) this.rightSlide(difference, newVal)
console.log('difference', difference)
} else if (newVal < oldVal) { } else if (newVal < oldVal) {
const difference = oldVal - this.value const difference = oldVal - this.value
this.leftSlide(difference) this.leftSlide(difference)
...@@ -85,15 +86,16 @@ export default { ...@@ -85,15 +86,16 @@ export default {
leftSlide(difference) { leftSlide(difference) {
// 保存滚动盒子左侧已滚动的距离 // 保存滚动盒子左侧已滚动的距离
let left = this.$refs.wrapperCon.scrollLeft let left = this.$refs.wrapperCon.scrollLeft
console.log('left', left)
let num = 0 let num = 0
clearInterval(this.timer) // clearInterval(this.timer)
this.timer = null this.timer = null
this.timer = setInterval(() => { this.timer = setInterval(() => {
// !left:已经滚动到最左侧 // !left:已经滚动到最左侧
// 一次性滚动距离1091（可调节） // 一次性滚动距离1091（可调节）
if (!left || num >= difference * 1091) { if (!left || num >= difference * 1091) {
// 停止滚动 // 停止滚动
clearInterval(this.timer) // clearInterval(this.timer)
this.timer = null this.timer = null
return return
} }
...@@ -101,33 +103,36 @@ export default { ...@@ -101,33 +103,36 @@ export default {
this.$refs.wrapperCon.scrollLeft = left -= 30 this.$refs.wrapperCon.scrollLeft = left -= 30
// 保存向左滚动距离（方便判断一次性滚动多少距离） // 保存向左滚动距离（方便判断一次性滚动多少距离）
num += 30 num += 30
}, 20) }, 0)
// 20：速度（可调节） // 10：速度（可调节）
}, },
// 右移动 // 右移动
rightSlide(difference) { rightSlide(difference) {
// 保存滚动盒子左侧已滚动的距离 // 保存滚动盒子左侧已滚动的距离
let left = this.$refs.wrapperCon.scrollLeft let left = this.$refs.wrapperCon.scrollLeft
console.log('right', left)
// 保存元素的整体宽度 // 保存元素的整体宽度
const scrollWidth = this.$refs.wrapperCon.scrollWidth const scrollWidth = this.$refs.wrapperCon.scrollWidth
console.log('scrollWidth', scrollWidth)
// 保存元素的可见宽度 // 保存元素的可见宽度
const clientWidth = this.$refs.wrapperCon.clientWidth const clientWidth = this.$refs.wrapperCon.clientWidth
console.log('clientWidth', clientWidth)
let num = 0 let num = 0
clearInterval(this.timer) // clearInterval(this.timer)
this.timer = setInterval(() => { this.timer = setInterval(() => {
// 已经滚动距离+可见宽度 // 已经滚动距离+可见宽度
// left+clientWidth>=scrollWidth：滚动到最右侧 // left+clientWidth>=scrollWidth：滚动到最右侧
// num>=1091一次性滚动距离 // num>=1091一次性滚动距离
if (left + clientWidth >= scrollWidth || num >= difference * 1091) { if (left + clientWidth >= scrollWidth || num >= difference * 1091) {
clearInterval(this.timer) // clearInterval(this.timer)
return return
} }
// 给滚动盒子元素赋值向左滚动距离 // 给滚动盒子元素赋值向左滚动距离
this.$refs.wrapperCon.scrollLeft = left += 30 this.$refs.wrapperCon.scrollLeft = left += 30
// 保存向左滚动距离（方便判断一次性滚动多少距离） // 保存向左滚动距离（方便判断一次性滚动多少距离）
num += 30 num += 30
}, 20) }, 0)
// 20：速度（可调节） // 10：速度（可调节）
}, },
mouseover(item, index) { mouseover(item, index) {
this.value = index this.value = index
...@@ -156,16 +161,18 @@ export default { ...@@ -156,16 +161,18 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.switch { .switch {
margin-left: 125px;
display: flex; display: flex;
justify-content: center; justify-content: center;
height: 100px; height: 100px;
width: 1920px; width: 1920px;
.grey { .grey {
cursor: pointer; cursor: pointer;
width: 260px; width: 340px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; //justify-content: space-between;
flex-direction: row;
.element{ .element{
width: 30px; width: 30px;
height: 30px; height: 30px;
...@@ -186,7 +193,6 @@ export default { ...@@ -186,7 +193,6 @@ export default {
font-size: 24px; font-size: 24px;
} }
.elementTwo { .elementTwo {
margin-left: 25px;
width: 30px; width: 30px;
height: 30px; height: 30px;
border-radius: 50%; border-radius: 50%;
...@@ -202,66 +208,66 @@ export default { ...@@ -202,66 +208,66 @@ export default {
} }
} }
.textTwo { .textTwo {
margin-right: 25px;
color: #ddd; color: #ddd;
font-size: 24px; font-size: 24px;
} }
.solid { .solid {
margin: 0 25px;
border: 0.5px solid #ddd; border: 0.5px solid #ddd;
width: 50px width: 100px
} }
} }
.blue { .blue {
cursor: pointer; cursor: pointer;
width: 260px; width: 340px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; //justify-content: space-between;
.element{ flex-direction: row;
width: 30px; .element{
height: 30px; width: 30px;
border-radius: 50%; height: 30px;
border: 1px solid #00aeff;
.child{
width: 20px;
height: 20px;
border-radius: 50%; border-radius: 50%;
background-color: #00aeff; border: 1px solid #00aeff;
position: relative; .child{
top: 4px; width: 20px;
left: 3px; height: 20px;
border-radius: 50%;
background-color: #00aeff;
position: relative;
top: 4px;
left: 3px;
}
} }
} .text {
.text { color: #00aeff;
color: #00aeff; font-size: 24px;
font-size: 24px; }
} .elementTwo {
.elementTwo { width: 30px;
margin-left: 25px; height: 30px;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid #00aeff;
.child{
width: 20px;
height: 20px;
border-radius: 50%; border-radius: 50%;
background-color: #00aeff; border: 1px solid #00aeff;
position: relative; .child{
top: 4px; width: 20px;
left: 4px; height: 20px;
border-radius: 50%;
background-color: #00aeff;
position: relative;
top: 4px;
left: 4px;
}
}
.textTwo {
color: #00aeff;
font-size: 24px;
}
.solid {
margin: 0 25px;
border: 0.5px solid #ddd;
width: 100px
} }
} }
.textTwo {
margin-right: 25px;
color: #00aeff;
font-size: 24px;
}
.solid {
border: 0.5px solid #ddd;
width: 50px
}
}
} }
...@@ -297,7 +303,6 @@ export default { ...@@ -297,7 +303,6 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 1px solid #ccc;
border-radius: 3px; border-radius: 3px;
box-sizing: border-box; box-sizing: border-box;
flex-shrink: 0; flex-shrink: 0;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment