微信小程序——滑块视图容器swiper（轮播图）

热爱前端，学习前端

已于 2023-05-16 13:40:28 修改

阅读量409

点赞数

分类专栏：微信小程序文章标签：微信小程序小程序

于 2023-05-15 22:28:45 首次发布

本文链接：https://blog.csdn.net/weixin_61972561/article/details/130693953

版权

微信小程序专栏收录该内容

22 篇文章 2 订阅

订阅专栏

微信小程序实现自动轮播

以下是.wxml代码

<!--pages/swiper/swiper.wxml-->
<swiper class="swiper-container" autoplay indicator-dots indicator-color="rgba(0, 0, 0,.5)"  indicator-active-color="#ffffff" interval="2000">
  <swiper-item >
    <image src="https://img0.baidu.com/it/u=3223565936,3365309332&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" mode=""/>
  </swiper-item>
  
  <swiper-item>
    <image src="https://pic.lvmama.com/uploads/pc/place2/2017-11-24/19e96e3c-ba34-4dc4-8b17-62b3aa595cf9.jpg" mode=""/>
  </swiper-item>
  <swiper-item >
    <image src="https://img0.baidu.com/it/u=3223565936,3365309332&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" mode=""/>
  </swiper-item>
  
  <swiper-item>
    <image src="https://pic.lvmama.com/uploads/pc/place2/2017-11-24/19e96e3c-ba34-4dc4-8b17-62b3aa595cf9.jpg" mode=""/>
  </swiper-item>
  
</swiper>

以下是.wxss代码

/* pages/swiper/swiper.wxss */
.swiper-container{
  width: 100%;
  height: 565rpx;
 
}

微信小程序（swiper）

改进：把图片路径写到page里的data里

以下是.wxml代码

<swiper autoplay interval="2000" indicator-dots="black">
  <swiper-item wx:for="{{imgs}}">
    <image src="{{item}}" mode=""/>
  </swiper-item>
</swiper>