微信小程序-轮播图渲染

最新推荐文章于 2024-01-10 10:50:09 发布

原创

最新推荐文章于 2024-01-10 10:50:09 发布 · 838 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

本文介绍了如何在微信小程序中实现轮播图的渲染，包括设置autoplay、indicator-dots和circular属性来实现自动播放、显示点状指示器和循环播放功能。通过调整样式，确保轮播图能完美适应屏幕，最终展示效果良好。

首先先获取轮播图

 <view class="index_swiper">
    <swiper autoplay indicator-dots="true"  circular="true">
      <swiper-item
      wx:for="{
   
   {
   
   swiperList}}"
      wx:key="goods_id"
      >
        <navigator>
          <image  mode="widthFix"   src="{
   
   {
   
   item.image_src}}"></image>
        </navigator>
       </swiper-item>
    </swiper>
  </view>

//其中swiper中的属性autoplay 与indicator-dots 还有circular 可以使图片自动播放显示图片下标点点还有循环播放

将轮播图服帖屏幕即添加样式改变宽高