微信小程序之轮播图

swiper滑块视图容器

swiper滑块视图容器用来在指定区域内切换内容的显示,常用于制作海报轮播图效果和页签内容的切换效果,它的属性如下

属性名 类型 默认值 说明 最低版本
indicator-dots Boolean false 是否显示面板指示点
indicator-color Color rgba(0, 0, 0, .3) 指示点颜色 1.1.0
indicator-active-color Color #000000 当前选中的指示点颜色 1.1.0
autoplay Boolean false 是否自动切换
current Number 0 当前所在滑块的 index
current-item-id String "" 当前所在滑块的 item-id ,不能与 current 被同时指定 1.9.0
interval Number 5000 自动切换时间间隔
duration Number 500 滑动动画时长
circular Boolean false 是否采用衔接滑动
vertical Boolean false 滑动方向是否为纵向
previous-margin String "0px" 前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值 1.9.0
next-margin String "0px" 后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值 1.9.0
display-multiple-items Number 1 同时显示的滑块数量 [1.9.0]

效果如图

wxml文件

<!--pages/one/one.wxml-->
<view class='haibao'>
  <swiper 
  indicator-dots='{{indicationDots}}'
   autoplay='{{autoplay}}' 
   interval='{{interval}}' 
   duration='{{duration}}' 
   circular='{{circular}}' >
 <block wx:for="{{imgurls}}" wx:key="key">
    <swiper-item>
    <image src="{{item}}" class="side-image" style="width:100%"></image>
    </swiper-item>
 </block>
  </swiper>
</view>

js文件

Page({

  /**
   * 页面的初始数据
   */
  data: {
    indicationDots:true,
    autoplay:true,
    interval:5000,
    duration:1000,
    circular:true,
    
    imgurls:["../images/1.jpg","../images/2.jpg","../images/3.jpg"]

  },
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容