记录内容：微信小程序swiper组件的简单入门使用

日期：2019年11月29

记录内容：微信小程序swiper组件的简单入门使用

流程：

l  进入微信小程序官网注册，并且获取到小程序码，下载微信开发者工具

 

 

 

 

 

 

 

 

 

 

 

 

 

l  新建一个带有云开发功能的项目

 

 

 

 

 

 

 

 

 

l  Page文件夹下面建立一个index文件夹，下级目录包括文件js / json / wxml / wxss四个基本项目文件

 

 

 

l  写入wxml文件

 

 

 

l  修改样式wxss

 

 

 

l  效果展示

 

 

 

l  拓展

总的来说微信小程序的轮播图组件使用特别简洁明了，上手很简单，类似与element插件，微信小程序的插件也有很多的属性值：

 

 

 之后的更好效果图

 

<!--index.wxml-->
<view class="container">

  <view class="index-1">
    轮播图
    <swiper class="index-lb" indicator-dots='true' autoplay='true' interval='4000'>
      <swiper-item>
        <image src="https://7879-xybserver-glo1m-1300776885.tcb.qcloud.la/images/original.jpg?sign=5bf13aa42ab26bc0847887ab14a7bade&t=1575014969"></image>
      </swiper-item>
      <swiper-item>
        <image src="https://7879-xybserver-glo1m-1300776885.tcb.qcloud.la/images/5d6034a85edf8db1a2af6ebf0723dd54574e7463.jpg?sign=62b6978bfae2ab0f5f9f17f600f8396a&t=1575014893"></image>
      </swiper-item>
      <swiper-item>
        <image src="https://7879-xybserver-glo1m-1300776885.tcb.qcloud.la/images/preview.jpg?sign=bd03c625e8ee856c2e990afd41f2bc01&t=1575014380"></image>
      </swiper-item>
      <swiper-item>
        <image src="https://7879-xybserver-glo1m-1300776885.tcb.qcloud.la/images/bg.png?sign=6e97a5810bdc3c04d7803e34d13ca31c&t=1575014193"></image>
      </swiper-item>
    </swiper>
  </view>

</view>

　　

 

 

 

具体内容见官方文档：

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html