轮播图 -- view, swiper

效果图

制作步骤：

一、创建一个page

 

 二、编写demo.wxml写界面元素

 

src里面都是图片的链接，在百度随便搜的。

autoplay设置自动轮播为true，interval设置轮播间隔为3秒，indocator-dots为true表示显示下面的小点，indicator-color为white表示底色为白色，indicator-active-color为red表示轮播时的颜色为红色，duration为2000表示滑的速度为2秒，current-item-id为item1表示第一个播放的是id为item1的图片，

display-multiple-times为2表示一页的宽度显示2个item，即显示2张图片，previous-margin为20表示前面会留20的空白，next-margin为20表示后面会有20的空白。

例如：把display-multiple-time="1"，效果图如下

三、编写demo.wxss设置样式

/* miniprogram/pages/demo/demo.wxss */
.swiper-img image{
  width: 100%;
}

 

设置图片宽度为100%