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

更新时间：2020年12月01日 11:07:09 作者：大个子痞老板

swiper组件是滑块视图容器，主要用来做图片轮播。这篇文章主要给大家介绍了关于微信小程序轮播图swiper代码的相关资料,需要的朋友可以参考下

微信小程序自定义swiper

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

先在index.wxml中写

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

<view class="container">
 <swiper class="swiper1" 
 indicator-dots="{{indicatorDots}}" 是否显示面板指示点
 autoplay="{{autoplay}}" 是否自动切换
 interval="{{interval}}" 自动切换时间间隔
 duration="{{duration}}" 滑动动画时长
 circular="{{circular}}" 是否采用衔接滑动
 indicator-active-color="#ff0099" 选中指示点颜色
 >
 <block wx:for="{{background}}" wx:key="index"> 循环遍历数据
  <swiper-item>
  <view class="swiper-item" style="background:{{item}}"></view>
  </swiper-item>
 </block>
 </swiper>
</view>

再在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代码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JS实现颜色动态淡化效果
本文主要介绍了JS实现颜色动态淡化效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03
JavaScript接口的实现三种方式(推荐)
这篇文章主要介绍了JavaScript接口的实现三种方式，有注释法，检查属性法和鸭式辨行法，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
2016-06-06
JavaScript闭包实例详解
这篇文章主要介绍JavaScript闭包知识，包括闭包的基本概念，闭包的用途等相关知识，介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧
2016-06-06
js学习总结_轮播图之渐隐渐现版(实例讲解)
下面小编就为大家带来一篇js学习总结_轮播图之渐隐渐现版(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
微信小程序-小说阅读小程序实例（demo）
本篇文章主要介绍了微信小程序-阅读小程序实例（demo），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-01-01
动态创建的表格单元格中的事件实现代码
好久没有搞网页了，今天重新弄了一个，做个动态表格，具体的实现代码，大家可以自己写吧
2008-12-12
深入理解js A*寻路算法原理与具体实现过程
这篇文章主要介绍了js A*寻路算法原理与具体实现过程,结合实例形式详细分析了A*寻路算法的具体概念、原理、实现方法与相关操作技巧,需要的朋友可以参考下
2018-12-12
Bootstrap模态框案例解析
这篇文章主要介绍了Bootstrap模态框案例解析,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-03-03
npm scripts 使用指南详解
这篇文章主要介绍了npm scripts 使用指南详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
seajs和requirejs模块化简单案例分析
这篇文章主要介绍了seajs和requirejs模块化,结合具体案例形式分析了seaj和requirejs模块化应用的相关操作技巧与使用注意事项,需要的朋友可以参考下
2019-08-08