先上效果图,实现其实很简单,不需要你去调什么样式,写什么逻辑。
只要你细心看下文档,你会发现有两个属性。
你会发现微信已经实现了对于这样式的实现,我也是来做这个效果的时候才发现的这个配置,之前都是一闪而过。接下来就很简单了,直接配置下,就实现了。
这里展示的代码是mpvue框架下写的。但是原理差不多。
<template>
<div>
<swiper autoplay interval="2000" indicator-dots previous-margin="80rpx" next-margin="80rpx" >
<swiper-item v-for="(item,i) in bj" :key="i">
<view :class="item"></view>
</swiper-item>
</swiper>
</div>
</template>
<script>
export default {
data () {
return {
bj:['red','yellow','blue','orange','green']
}
},
}
</script>
<style>
.red{
background: red;
height: 100%;
}
.blue{
background: blue;
height: 100%;
}
.yellow{
background: yellow;
height: 100%;
}
.orange{
background: orange;
height: 100%;
}
.green{
background: green;
height: 100%;
}
</style>
文档地址https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
所以还是得好好看文档,官方已经给我们实现了,我们就不需要再重复去实现了。
个人水平有限,有问题欢迎大家留言指导,仅供学习和参考。
学海无涯!努力二字,共勉!