小白学微信小程序————swiper

swiper滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。想要建立如下图的效果（可以左右滑动，也可自动滑动，并且可以看到上一个项目和下一个项目）代码如下

<swiper class="banner" indicator-dots indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff" autoplay interval="2000" circular current="1" duration="200" previous-margin="15" next-margin="15">
<swiper-item>
<navigator url="/pages/logs/logs">
//想要有链接则需要使用navigator标签
<image src="http://qingnian8.oss-cn-qingdao.aliyuncs.com/images/20170823/1503496830.jpg"></image>
</navigator>
</swiper-item>
<swiper-item>
<navigator url="/pages/logs/logs">
<image src="http://qingnian8.oss-cn-qingdao.aliyuncs.com/images/20200217/1581924211.jpg"></image>
</navigator>
</swiper-item>
<swiper-item>
<navigator url="/pages/logs/logs">
<image src="http://qingnian8.oss-cn-qingdao.aliyuncs.com/images/20180117/1516166454.jpg"></image>
</navigator>
</swiper-item>
<swiper-item>
<navigator url="/pages/logs/logs">
<image src="http://qingnian8.oss-cn-qingdao.aliyuncs.com/images/20171211/1513014360.jpg"></image>
</navigator>
</swiper-item>
</swiper>

indicator-dots表示显示面板指示点

indicator-color="rgba(255,255,255,0.6)"

rgb不用多说表示颜色，a表示透明度。

indicator-active-color="#fff"

表示当前页面时指示点的颜色

autoplay interval="2000" circular current="1" duration="200" previous-margin="15" next-margin="15"

autoplay表示自动滑动，current的初始位置时0，表示第一个项目，current可以改变初始位置，duration时表示切换速度
其他的内容可以从微信的API文档一个个尝试和理解。[微信API文档(https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html)

.banner{border: 1px solid red;
width: 100%;
height: 240px}
.banner swiper-item{
  padding: 0 5px;
  box-sizing: border-box;
  /* box-sizing向内填充 */
}
.banner image{
  width:100%;
  height: 240px;
}