这个功能当时用css动画做过,但是结果并不是太理想,所以我想到了用轮播图来实现。
很简单,直接上代码!
HTML布局
<view class="home">
<swiper class="swiper"
// 这里面的属性看下文档,里面都有
:autoplay="value" //给autoplay一个变量
circular
disable-touch="false"
:interval="100">
<!-- v-for循环遍历你要展示的数组 -->
<swiper-item v-for="(item, index) in data" :key="index">
<view class="item">{{ item.name }}</view>
</swiper-item>
</swiper>
</view>
<button @click="openBoxClick">停止</button>
<button @click="BoxClick">开始</button>
JS
data() {
return {
// 默认为true
value: true,
data: [
{ id: 1, name: 1 },
{ id: 2, name: 2 },
{ id: 3, name: 3 },
{ id: 4, name: 4 },
{ id: 5, name: 5 },
{ id: 6, name: 6 },
{ id: 7, name: 7 },
{ id: 8, name: 8 },
{ id: 9, name: 9 },
{ id: 10, name: 10 }
]
};
},
methods: {
// 点击按钮来改变autoplay的值
openBoxClick() {
this.value = false;
},
BoxClick() {
this.value = true;
}
}
CSS
.home {
.swiper {
width: 100%;
background-color: black;
/deep/.uni-swiper-slide-frame {
width: 50% !important;
left: -78px !important;
.item {
width: 176px;
height: 149px;
background-color: red;
font-size: 20px;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
看效果图
写成自动的话就给 this.value 这个赋值操作时候添加定时器即可。
总的来说用轮播图来写要比css动画简单多。