vue版本左右按钮点击移动 时间轴------ Timeline
vue版本左右按钮点击移动 时间轴------ Timeline效果:代码:<template><div class="carousel"><span class="el-icon-d-arrow-left" @click="leftBtn(1)"></span><div class="list" v-bind:style="{ left: l
·
vue版本左右按钮点击移动 时间轴------ Timeline
之前做的有不少没完善--修改版本
20220409_201448
这个是引入背景
<template>
<div class="hello">
<span
class="span1"
@click="leftBtn(1)"
:class="{ 'btn-onlyRead': disabledLeft == true }"
>
《</span
><span
class="span2"
@click="leftBtn(2)"
:class="{ 'btn-onlyRead': disabledRigth == true }"
>》</span
>
<div class="RemSoteSensiRng">
<ul :style="actived">
<li class="li"></li>
<li
v-for="(item, i) in month"
:key="i++"
:style="{ width: widthLi + 'px' }"
:class="{ active: isActive == i }"
@click="iconClick(item, i)"
>
{{ item.timestamp }}
</li>
<li class="li"></li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "RemSoteSensiRng",
data() {
return {
isActive: 1, //当前选中样式
num: 0, //计数器
disabledLeft: false, //左边按钮禁用
disabledRigth: false, //右边按钮禁用
widthLi: 50, //一个li宽度
actived: {
width: 0,
marginLeft: 0,
transition: "",
},
month: [
{
timestamp: "01",
},
{
timestamp: "02",
},
{
timestamp: "03",
},
{
timestamp: "04",
},
{
timestamp: "05",
},
{
timestamp: "06",
},
{
timestamp: "07",
},
{
timestamp: "08",
},
{
timestamp: "09",
},
{
timestamp: "10",
},
{
timestamp: "11",
},
{
timestamp: "12",
},
{
timestamp: "08",
},
{
timestamp: "09",
},
{
timestamp: "10",
},
{
timestamp: "11",
},
{
timestamp: "12",
},
{
timestamp: "08",
},
{
timestamp: "09",
},
{
timestamp: "10",
},
{
timestamp: "11",
},
{
timestamp: "12",
},
{
timestamp: "08",
},
{
timestamp: "09",
},
{
timestamp: "10",
},
{
timestamp: "11",
},
{
timestamp: "12",
},
{
timestamp: "08",
},
{
timestamp: "09",
},
{
timestamp: "10",
},
{
timestamp: "11",
},
{
timestamp: "12",
},
{
timestamp: "08",
},
{
timestamp: "09",
},
{
timestamp: "10",
},
{
timestamp: "11",
},
{
timestamp: "12",
},
],
};
},
watch: {
// 监听计算
// isActive: {
// handler: function (val, oldVal) {
// console.log(val+" 2")
// console.log(oldVal);
// if (val < this.month.length) {
// this.disabledLeft = false;
// } else {
// this.disabledLeft = true;
// console.log(val+" 1 3")
// }if (val > 1) {
// this.disabledRigth= false;
// } else {
// this.disabledRigth = true;
// console.log(val+" 1 3")
// }
// },
// // 深度观察监听
// deep: true,
// immediate: true,
// },
},
methods: {
//按钮点击
leftBtn(val) {
//val==1 左边按钮点击 数字变小
if (val == 1 && this.isActive > 1) {
this.iconClick(null, this.isActive - 1);
}
//val==2 右边按钮点击数字变大
if (val == 2 && this.isActive < this.month.length) {
this.iconClick(null, this.isActive + 1);
}
this.keyBtn();
},
iconClick(item, i) {
this.actived.marginLeft = -this.widthLi * i + "px";
this.isActive = i;
this.keyBtn();
},
//左右按钮点击事件失效条件
keyBtn() {
console.log(this.isActive);
// 选中下标小于1时候,锁住左边点击事件
if (this.isActive <= 1) {
this.disabledLeft = true;
} else {
this.disabledLeft = false;
}
// 选中下标大于数组长度时候,锁住右边点击事件
if (this.isActive >= this.month.length) {
this.disabledRigth = true;
} else {
this.disabledRigth = false;
}
},
},
mounted() {
this.keyBtn(); //由于默认选中第一个,左边事件先执行一次,让左边的按钮静止状态
// this.iconClick();
this.actived.width = this.month.length * this.widthLi + 480 + "px";
},
beforeCreate() {},
};
</script>
<style scope>
.hello {
position: relative;
height: 50px;
width: 1000px;
background: rgb(125, 125, 163);
}
.RemSoteSensiRng {
margin: 0 0 0 100px;
height: 50px;
width: 800px;
background: #1a2637;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
margin-left: 0px;
width: 1200px;
height: 51px;
}
.li {
/* 占位宽度 */
width: 240px;
border-bottom: 0px red solid;
/* background: blueviolet; */
}
li {
text-align: center;
border-bottom: 1px rgb(187, 141, 14) dashed;
width: 50px;
height: 50px;
margin: 0;
padding: 0;
/* background: aquamarine; */
float: left;
line-height: 50px;
list-style: none;
color: #969292;
cursor: pointer;
}
.active {
background: url("./../assets/date-icon.png") bottom no-repeat;
color: rgb(232, 231, 238);
/* transition: background 0.3s ease 0.4s; */
}
/* span {
position: absolute;
line-height: 50px;
} */
.span1 {
float: left;
line-height: 50px;
margin: 0 0 0 50px;
cursor: pointer;
}
.span2 {
float: right;
line-height: 50px;
margin: 0 50px 0 0;
cursor: pointer;
}
.btn-onlyRead {
cursor: not-allowed !important;
}
.btn-onlyRead:hover {
pointer-events: none !important;
}
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)