前端开发-微信小程序实现轮播图的页面效果

迈不过友情╰ 2023-06-15 07:27 194阅读 0赞

## 1、使用swiper控件 ##

**一起来看一下使用控件时这些属性的含义**

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>indicator-dots</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>是否显示面板指示点</td> 
  </tr> 
  <tr> 
   <td>indicator-color</td> 
   <td>Color</td> 
   <td>rgba(0, 0, 0, .3)</td> 
   <td>指示点颜色</td> 
  </tr> 
  <tr> 
   <td>indicator-active-color</td> 
   <td>Color</td> 
   <td>#000000</td> 
   <td>当前选中的指示点颜色</td> 
  </tr> 
  <tr> 
   <td>autoplay</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>是否自动切换</td> 
  </tr> 
  <tr> 
   <td>current</td> 
   <td>Number</td> 
   <td>0</td> 
   <td>当前所在滑块的 index</td> 
  </tr> 
  <tr> 
   <td>current-item-id</td> 
   <td>String</td> 
   <td>“”</td> 
   <td>当前所在滑块的 item-id ，不能与 current 被同时指定 1.9.0</td> 
  </tr> 
  <tr> 
   <td>interval</td> 
   <td>Number</td> 
   <td>5000</td> 
   <td>自动切换时间间隔</td> 
  </tr> 
  <tr> 
   <td>duration</td> 
   <td>Number</td> 
   <td>500</td> 
   <td>滑动动画时长</td> 
  </tr> 
  <tr> 
   <td>circular</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>是否采用衔接滑动</td> 
  </tr> 
  <tr> 
   <td>vertical</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>滑动方向是否为纵向</td> 
  </tr> 
  <tr> 
   <td>previous-margin</td> 
   <td>String</td> 
   <td>“0px”</td> 
   <td>前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值</td> 
  </tr> 
  <tr> 
   <td>next-margin</td> 
   <td>String</td> 
   <td>“0px”</td> 
   <td>后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值</td> 
  </tr> 
  <tr> 
   <td>display-multiple-items</td> 
   <td>Number</td> 
   <td>1</td> 
   <td>同时显示的滑块数量</td> 
  </tr> 
  <tr> 
   <td>skip-hidden-item-layout</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息</td> 
  </tr> 
  <tr> 
   <td>bindchange</td> 
   <td>EventHandle</td> 
   <td></td> 
   <td>current 改变时会触发 change 事件，event.detail = {current: current, source: source}</td> 
  </tr> 
  <tr> 
   <td>bindanimationfinish</td> 
   <td>EventHandle</td> 
   <td></td> 
   <td>动画结束时会触发 animationfinish 事件，event.detail 同上</td> 
  </tr> 
 </tbody> 
</table>

## 2、JS部分 ##

data: { 
        imgUrls:[
          "cloud://haisikaier-ej74j.6861-haisikaier-ej74j-1300492834/banner.jpg",
          "cloud://haisikaier-ej74j.6861-haisikaier-ej74j-1300492834/banner2.jpeg"
          ],
        indicatorDots:true,//是否显示面板指示点
        autoplay: true,//是否自动切换
        circular: true,//是否采用衔接滑动
        interval: 3000,//自动切换时间间隔
        duration: 1000,//动动画时长
      },

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODEwODEz_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODEwODEz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191121153117851.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODEwODEz,size_16,color_FFFFFF,t_70