微信小程序开发--引导页的实现

1、背景

公司移动端目前有Android 跟 小程序两块，老板要求小程序跟Android的实现要基本一致。

Android端的一般在应用首次启动的时候会有个引导页，用于对当前app的一个简单介绍。

如下图所示，实现的效果。

当然了，对于这些引导页的图片最好还是放到服务器上面，毕竟小程序这边对包的大小是有限制的。

2、实现

下面我们看下这种效果要怎样实现。

通过上面的效果图，可以看到这里主要做了一件事情：

通过左右滑动视图，显示不同的图片。

那么在小程序中有这种可以左右切换视图的组件吗？

答案是：

swiper-item 组件

滑块视图容器，并且它的内部只可放置swiper-item组件。

好了既然了这个组件可以达到效果那就整起来呗。

2.1布局代码

<swiper >
        <block wx:for="{{imgs}}" wx:for-index="index" wx:key="swiperItem" wx:for-item="item" >
          <swiper-item class="swiper-items"  >
            <image class="swiper-image" src="{{item}}"></image>
            <button class="button-img" bindtap="jumpLogin" wx:if="{{index == imgs.length - 1}}" >立即体验</button>
          </swiper-item>
        </block>
</swiper>

可以看到，整个布局的外层使用swiper组件进行包裹，然后在进行一个循环wx:for="{{imgs}}"，循环中在包裹swiper-item组件。

也就是说有imgs中有几个图片数据，swiper-item就有几个。

另外需要注意的一点是： 在最后一张图片上添加了一个 按钮，如下图所示：

当点击这张图片的时候，就会进行跳转。

2.2样式代码

swiper {
  position: absolute;
  height: 100%;
  width: 100%;
}

.swiper-image {
  height: 100%;
  width: 100%;
  opacity:0.9;
}

.button-img{   
   position: relative;
   bottom: 85px;
   height: 40px;
   width: 120px;
   opacity:0;
}

样式代码比较简单，就不过多介绍了。

2.3逻辑代码

data: {
    imgs:[
    'http://******WCFKd6AcgkDAAMQcOXZojM321.png',
    'http://******6AUz98AALDH9L_Pq4017.png',
    'http://******MQEjElqeQ315.png'
  ]
  },

逻辑代码中主要就是定义了一个imgs数组，用于在布局代码中做循环使用的。

好了，内容就这么多，想要实现小程序的引导页就这样了。