微信小程序最基本的组件swiper的使用

学习微信小程序开发，最基本的便是轮播图的使用，当然微信官方给了最基本的组件的使用，swipe的使用，在我使用的时候，我发现也有很多的小坑，不过程序开发就是在Bug中不断成长

swiper插件的使用

swiper插件也就是轮播图，只不过我们在自己开发HTML的时候，我们一边下载别人的封装好的插件，不过在微信小程序后，我们官方文档给了一些配置，这使得我们通过配置某些参数，我们能够达到某些复杂插件的作用。

首先我们写入最基本的结构

<view >
  <swiper class="swiper" >
    <swiper-item ><image src="/images/wx.png" ></image></swiper-item>
    <swiper-item ><image src="/images/vr.png" ></image></swiper-item>
    <swiper-item ><image  src="/images/iqiyi.png"></image></swiper-item>
  </swiper>
</view>

在引入这样的代码我们运行就会发现

我们发现图片的宽度未满。我们需要像swiper-item输入宽度为100%;我们发现我们的宽度虽然达到了要求，但是我们的h没有达到要求
我们可以看下官方文档
仅可放置在swiper组件中，宽高自动设置为100%。
所以我们放入一下代码便可以

<!--pages/posts/posts.wxml-->
<view >
  <swiper class="swiper" style="width:100%;height:500rpx" >
    <swiper-item ><image src="/images/wx.png" style="width:100%;height:500rpx"></image></swiper-item>
    <swiper-item ><image src="/images/vr.png" style="width:100%;height:500rpx"></image></swiper-item>
    <swiper-item ><image  src="/images/iqiyi.png"style="width:100%;height:500rpx"></image></swiper-item>
  </swiper>
</view>

这样最基本的就完成了，我们还需要的就是多看官方文档！