商品轮播图！！！用户购买商品展示！！

最新推荐文章于 2022-07-05 19:24:18 发布

_YkRonin

最新推荐文章于 2022-07-05 19:24:18 发布

阅读量754

点赞数

分类专栏：微信小程序 Vue

本文链接：https://blog.csdn.net/weixin_45114701/article/details/106882797

版权

Vue 同时被 2 个专栏收录

26 篇文章

订阅专栏

微信小程序

6 篇文章

订阅专栏

使用动画进行编写！代码如下栗子Vue

data(){
this.isCurrent:0
}
methods:{
编写一个定时器
autoplay(){
setTimeout(()=>{
if (this.isCurrent <= 数组的长度的时候) {
this.isCurrent ++
} else {
this.isCurrent = 0
}
},3000)
}

}

动画：
@keyframes myAnim {
0% {
transform: translateY(18px);
opacity: 0;
}
30% {
opacity: 0.4;
}
40% {
opacity: 0.7;
}
50% {
transform: translateY(0px);
opacity: 1;
}
70% {
opacity: 0.7;
}
80% {
opacity: 0.3;
}
100% {
transform: translateY(-18px);
opacity: 0;
}
}

html:

广东省广州市**购买了该商品

css

.toolTipbox {
position: fixed;
top: 8%;
left: 2%;
z-index: 10;
.carousel-message {
position: relative;
width: 380px;
height: 60px;
padding: 7px;
background: rgba(51, 51, 51, 0.9);
border-radius: 29px;
box-sizing: border-box;
animation: myAnim 2.3s infinite;
img {
margin-right: 12px;
margin-left: 5px;
width: 40px;
height: 40px;
border-radius: 50%;
}
span {
flex: 1;
display: inline-block;
color: #fff;
font-size: 22px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}