小程序添加轮播图

不啰嗦的介绍小程序啦直接分享干货。

没有下载工具的请移驾到：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html我下载的是稳定版的

下载好工具创建一个项目

创建项目 已创建完的项目

简单介绍下.json  相当于java的配置文件

.wxml相当于.html、wxss相当于.css

找当index.wxml将下列代码粘贴到项目中：

------------------------------------------------------------------------------------------------------代码

<!--index.wxml-->

<view class="">

<swiper class='' indicator-dots='true' autoplay='true' interval='5000' duration='1000' circular='true'>

  <block wx:for="{{bnrUrl}}" wx:for-index="index">

    <swiper-item>

      <image src='{{item.url}}' class='u-img-slide' mode='aspectFill'></image>

    </swiper-item>

  </block>

</swiper>

</view>

----------------------------------------------------------------------------------------------------------------------

在 index.js中添加如下代码：

-------------------------------------------------------------------------------------------------------代码

Page({

  data: {

    "bnrUrl": [{

      "url": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555155895&di=347e5b24af5d1bbaa2aa54374947fb0b&imgtype=jpg&er=1&src=http%3A%2F%2Fimg3.redocn.com%2Ftupian%2F20140715%2Fdongzhuangpicaowangyelunbotusheji_2665395.jpg"

    }, {

        "url": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554560904844&di=d8164b6a3b0f1abcc04afa717713ab1a&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F019a0558be22d6a801219c77d0578a.jpg%402o.jpg"

    }, {

        "url": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554560904844&di=d8164b6a3b0f1abcc04afa717713ab1a&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F019a0558be22d6a801219c77d0578a.jpg%402o.jpg"

    }]

  }

});

----------------------------------------------------------------------------------------------------------------------

在index.wxss中添加如下代码：

-----------------------------------------------------------------------------------------------------------------代码

/**index.wxss**/

.u-img-slide {

  width: 100%;

  height: inherit;

}

-----------------------------------------------------------------------------------------------------------------

轮播图添加成功的图片