微信小程序常用组件视频课程-滑块视图容器-swiper的使用

效果图

js代码

  /**
   * 页面的初始数据
   */
  data: {
    a:true,
    vertical:false,
    autoplay:true,
    interval:3000,
    duration:500,
    ads: ['/tupian/1.jpg', '/tupian/2.jpg', '/tupian/3.jpg']
  },

wxml代码

<swiper
 indicator-dots="{{true}}"
 vertical="{{false}}"
 autoplay="{{true}}"
 interval="1000"
 duration="500"
 style='height:120px;'
>
  <swiper-item>
    <image src='/tupian/1.jpg' class='img01'></image>
  </swiper-item>
  <swiper-item>
    <image src='/tupian/2.jpg' class='img01'></image>
  </swiper-item>  
  <swiper-item>
    <image src='/tupian/3.jpg' class='img01'></image>
  </swiper-item>   
</swiper>

<view>indicator-dots 是否显示面板指示点 false</view>
<view>vertical 滑动方向是否为纵向 false	</view>
<view>autoplay 是否自动切换 false	</view>
<view>interval 自动切换时间间隔</view>
<view>duration 滑动动画时长</view>
<view>height 调整默认高度</view>

<swiper
 indicator-dots="{{a}}"
 vertical="{{vertical}}"
 autoplay="{{autoplay}}"
 interval="{{interval}}"
 duration="{{duration}}
>
 <block wx:for="{{ads}}" wx:key="*this">
  <swiper-item>
    <image src='{{item}}' class='img02'></image>
  </swiper-item>
 </block> 
</swiper>

wxss代码

.img01{
  width: 100%;
  height: 120px;
}

欢迎大家收看我的****：微信小程序组件入门到精通
https://edu.csdn.net/course/detail/16193