微信小程序轮播图swiper代码详解

微信小程序自定义swiper

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

先在index.wxml中写

style=“background:{{item}}” 报错不要管，不影响页面布局

 
  循环遍历数据
  
  
  
 
 

再在index.js中写

Page({
 data: {
  background: ["red", "pink","yellowgreen"],
  indicatorDots: true,
  vertical: false,
  autoplay: true,
  interval: 2000,
  duration: 500,
  circular:true
 }
})

最后在index.wxss中写

.swiper1{
width: 100%;
height: 200px;
}
.swiper-item{
 width: 100%;
 height: 100%;
}

记住：

图片跟背景颜色思路一样

到此这篇关于微信小程序轮播图swiper代码的文章就介绍到这了,更多相关微信小程序轮播图swiper代码内容请搜索考高分网以前的文章或继续浏览下面的相关文章希望大家以后多多支持考高分网！