小程序轮播图实现中间大两边小的效果（超简单实现）

先上效果图，实现其实很简单，不需要你去调什么样式，写什么逻辑。

只要你细心看下文档，你会发现有两个属性。

你会发现微信已经实现了对于这样式的实现，我也是来做这个效果的时候才发现的这个配置，之前都是一闪而过。接下来就很简单了，直接配置下，就实现了。

这里展示的代码是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
所以还是得好好看文档，官方已经给我们实现了，我们就不需要再重复去实现了。

个人水平有限，有问题欢迎大家留言指导，仅供学习和参考。

学海无涯！努力二字，共勉！