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

电玩女神 2023-02-19 16:19 2阅读 0赞

先上效果图，实现其实很简单，不需要你去调什么样式，写什么逻辑。  
![在这里插入图片描述][20200621163221903.gif]

只要你细心看下文档，你会发现有两个属性。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTMxODg0_size_16_color_FFFFFF_t_70]  
你会发现微信已经实现了对于这样式的实现，我也是来做这个效果的时候才发现的这个配置，之前都是一闪而过。接下来就很简单了，直接配置下，就实现了。

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

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

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

[20200621163221903.gif]: https://img-blog.csdnimg.cn/20200621163221903.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTMxODg0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200621163458275.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTMxODg0,size_16,color_FFFFFF,t_70
[https_developers.weixin.qq.com_miniprogram_dev_component_swiper.html]: https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html