小程序輪播圖實現中間大兩邊小的效果（超簡單實現）

先上效果圖，實現其實很簡單，不需要你去調什麼樣式，寫什麼邏輯。

只要你細心看下文檔，你會發現有兩個屬性。

你會發現微信已經實現了對於這樣式的實現，我也是來做這個效果的時候才發現的這個配置，之前都是一閃而過。接下來就很簡單了，直接配置下，就實現了。

這裏展示的代碼是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
所以還是得好好看文檔，官方已經給我們實現了，我們就不需要再重複去實現了。

個人水平有限，有問題歡迎大家留言指導，僅供學習和參考。

學海無涯！努力二字，共勉！