需要达到效果:
- 横向展示商品,默认一行展示5个,超出隐藏,页面一打开,该模块自动横向滚动
- 有前进后退按钮,默认隐藏,鼠标移入显示,且动画停止;鼠标移出按钮隐藏,动画重启
效果展示: (由于是截图拼接成的gif, 滚动效果未能展示出来,正常滚动是5s后发生,且很顺滑)
实现原理:
1. 使用css3 的 transition 过渡属性完成动画,使动画盒子脱标(脱离标准流), 不影响其他布局, 且方便通过 left 属性进行动画
具体就是通过在发生动画的盒子里修改行内属性 left 值,进而发生动画
2. 使用 cubic-bezier 控制变化的速度曲线
实现代码:
HTML:
<template>
<div class="hotSalesGoods_container">
<div class="hot_sale_product_box" v-if="hotSaleProductList.length">
<section class="w mt30 clearfix">
<div class="module_box module_box2">
<div class="title">
<div class="left">
<span>1F</span>
热销商品
</div>
</div>
<div
class="mall_good_box hot_product_btn_box"
@mouseenter="hoverTimer()"
@mouseleave="outTimer()"
>
<div
class="mall_good_inner"
:style="{'left': -(swiperConfig.index * (swiperConfig.width +16)) +'px'}"
>
<hotMallGoods
:msg="iitem"
:index="j"
v-for="(iitem,j) in hotSaleProductList"
:key="j+'key'"
></hotMallGoods>
</div>
<i class="hot_product_btn_left cursor" @click="prevPage()"></i>
<i class="hot_product_btn_right cursor" @click="nextPage()"></i>
</div>
</div>
</section>
</div>
</div>
</template>JS:
<script>
import hotMallGoods from "./components/mallGoods";
export default {
name: "hotSalesGoods",
data() {
return {
swiperTimer: null,
swiperConfig: {
width: 1220,
index: 0,
page: 0,
},
hotSaleProductList: [], //
};
},
components: {
hotMallGoods,
},
updated() {
console.log(this.swiperConfig.index);
},
created() {
this.init();
this.outTimer();
},
methods: {
init() {
this.hotSaleProductList = [
{
productImage:
"//vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/vphonor/201807/10/636668517512866990.png",
productName: "测试商品-防雾剂",
sales: 54,
price: 0.01,
},
{
productImage:
"https://vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/88888888/201806/11/201806111100348297.jpg",
productName:
"九阳（Joyoung）电压力锅IH电磁压力煲5L高压锅电饭锅Y-50IHS6",
sales: 54,
price: 0.01,
},
{
productImage:
"https://vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/88888888/201806/11/201806111104563816.jpg",
productName:
"飞利浦（PHILIPS） 电动剃须刀 男士刮胡刀胡须刀电须刀双刀头须刀 PQ190/16",
sales: 54,
price: 0.01,
},
{
productImage:
"https://vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/88888888/201806/11/201806111104563816.jpg",
productName:
"飞利浦（PHILIPS） 电动剃须刀 男士刮胡刀胡须刀电须刀双刀头须刀 PQ190/16",
sales: 54,
price: 0.01,
},
{
productImage:
"https://vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/88888888/201806/11/201806111104563816.jpg",
productName:
"飞利浦（PHILIPS） 电动剃须刀 男士刮胡刀胡须刀电须刀双刀头须刀 PQ190/16",
sales: 54,
price: 0.01,
},
{
productImage:
"https://vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/88888888/201806/11/201806111104563816.jpg",
productName:
"飞利浦（PHILIPS） 电动剃须刀 男士刮胡刀胡须刀电须刀双刀头须刀 PQ190/16",
sales: 54,
price: 0.01,
},
{
productImage:
"https://vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/88888888/201806/13/201806131021319705.jpg",
productName:
"飞利浦（PHILIPS） 家用卧式吸尘器 尘桶型可水洗滤网无耗材大功率地毯地板吸尘机 孔雀蓝FC8515",
sales: 54,
price: 0.01,
},
{
productImage:
"https://vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/88888888/201806/13/201806131033313750.jpg",
productName:
"飞利浦（PHILIPS） 蒸汽挂烫机家用手持大功率1600W电熨斗烫衣机带晾衣架1.6L-2L GC512/48（3档）",
sales: 54,
price: 0.01,
},
{
productImage:
"https://vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/88888888/201806/11/201806111104563816.jpg",
productName:
"飞利浦（PHILIPS） 电动剃须刀 男士刮胡刀胡须刀电须刀双刀头须刀 PQ190/16",
sales: 54,
price: 0.01,
},
{
productImage:
"//vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/vphonor/201807/10/636668517512866990.png",
productName: "测试商品-防雾剂",
sales: 54,
price: 0.01,
},
{
productImage:
"https://vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/88888888/201806/11/201806111100348297.jpg",
productName:
"九阳（Joyoung）电压力锅IH电磁压力煲5L高压锅电饭锅Y-50IHS6",
sales: 54,
price: 0.01,
},
{
productImage:
"//vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/vphonor/201807/10/636668517512866990.png",
productName: "测试商品-防雾剂",
sales: 54,
price: 0.01,
},
{
productImage:
"https://vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/88888888/201806/11/201806111100348297.jpg",
productName:
"九阳（Joyoung）电压力锅IH电磁压力煲5L高压锅电饭锅Y-50IHS6",
sales: 54,
price: 0.01,
},
];
this.swiperConfig.page =
Math.floor(this.hotSaleProductList.length / 5) -
1 +
(this.hotSaleProductList.length % 5 ? 1 : 0);
},
// 鼠标移入清除动画
hoverTimer() {
clearInterval(this.swiperTimer);
},
// 鼠标移出开始动画
outTimer() {
clearInterval(this.swiperTimer);
this.swiperTimer = setInterval(() => {
this.autoPlay();
}, 5000);
},
// 开启自动动画
autoPlay() {
if (this.swiperConfig.page - this.swiperConfig.index) {
this.swiperConfig.index += 1;
} else {
this.swiperConfig.index = 0;
}
},
// 左移动
prevPage() {
if (this.swiperConfig.page - this.swiperConfig.index) {
this.swiperConfig.index += 1;
} else {
this.swiperConfig.index = 0;
}
},
// 右移动
nextPage() {
if (!this.swiperConfig.index) {
this.swiperConfig.index =
this.swiperConfig.page - this.swiperConfig.index;
} else {
this.swiperConfig.index -= 1;
}
console.log(this.swiperConfig.index);
},
},
};
</script>CSS:
<style scoped lang="less">
.hotSalesGoods_container {
padding: 100px 0;
margin: 0px auto;
width: 1500px;
// width: 100%;
background: rgba(0, 0, 0, 0.2);
// height: 500px;
.hot_sale_product_box {
// background: rgba(0, 0, 0, 0.2);
width: 1220px;
margin: 0 auto;
// margin: 30px 0;
.module_box2 {
height: 420px;
position: relative;
.mall_good_box {
width: 100%;
height: 360px;
overflow: hidden;
position: relative;
.mall_good_inner {
// margin-left: -16px;
position: absolute;
left: 0px;
top: 0px;
white-space: nowrap;
background: #ededed;
z-index: 20;
transition: left 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
// transform: translate3d(0, 0, 0);
// transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
// transition: left 0.5s ease-in-out;
.good-item {
display: inline-block;
// margin-left: 16px;
margin-right: 16px;
}
}
}
.hot_product_btn_box {
position: absolute;
width: 100%;
height: 360px;
z-index: 22;
&:hover {
.hot_product_btn_left,
.hot_product_btn_right {
opacity: 1;
}
}
.hot_product_btn_left,
.hot_product_btn_right {
opacity: 0;
transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1);
position: absolute;
width: 50px;
height: 50px;
top: 50%;
z-index: 111;
transform: translateY(-50%);
}
.hot_product_btn_left {
left: 20px;
background: url("http://vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/vphonor/202007/14/637303389272140619.png")
no-repeat center/100%;
&:hover {
background: url("//vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/vphonor/202007/14/637303390930454246.png")
no-repeat center/100%;
}
}
.hot_product_btn_right {
right: 20px;
background: url("http://vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/vphonor/202007/14/637303389733372943.png")
no-repeat center/100%;
&:hover {
background: url("//vpclub-img.oss-cn-shenzhen.aliyuncs.com/upload/vphonor/202007/14/637303391341562323.png")
no-repeat center/100%;
}
}
}
}
.module_box {
// height: 632px;
width: 100%;
// background: rgba(0, 0, 0, 0.2);
background-color: #fff;
&:last-child {
margin-bottom: 50px;
}
.title {
height: 60px;
line-height: 60px;
width: 100%;
display: flex;
justify-content: space-between;
border-bottom: 2px solid #da251d;
padding: 0 10px;
.left {
font-size: 22px;
font-weight: bold;
color: #000;
span {
font-size: 30px;
color: #da251d;
}
}
.right {
// background: rgba(0, 0, 0, 0.2);
height: 100%;
display: flex;
align-items: center;
.more_icon {
width: 66px;
height: 12px;
background: url("//vpjicai.oss-cn-beijing.aliyuncs.com/upload/vphonor/202007/13/637302600877688271.png")
no-repeat center/100%;
&:hover {
background: url("//vpjicai.oss-cn-beijing.aliyuncs.com/upload/vphonor/202007/13/637302601861212254.png")
no-repeat center/100%;
}
}
}
}
.floors {
width: 100%;
height: 572px;
display: flex;
flex-wrap: wrap;
align-items: center;
.imgbanner {
width: 300px;
height: 572px;
.banner {
width: 100%;
height: 100%;
background-position: center;
}
}
.mall_good_box {
flex: 1;
display: flex;
flex-wrap: wrap;
height: 100%;
background: #f5f5f5;
}
}
}
}
}
</style>贝塞尔曲线:
cubic-bezier(<x1>,<y1>,<x2>,<y2>), 其实是用4个点确定速度曲线,已知 两个点 (0,0) (1,1) ,我们通过 x1,y1 x2,y2 坐标来控制另外两个点,从而确定速度曲线
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
