小程序轮播图swiper实现

wxml   ---***vertical写上之后一定要是"{{false}}"  直接写"false"会是true，方向一直是垂直

<!--pages/index4/index4.wxml-->
<view class="container">
    <!-- swiper轮播图 -->
    <view class="swiper-container" hover-class="none" hover-stop-propagation="false">
        <swiper class="top-swiper"   indicator-dots="true" autoplay="true"  circular="true" vertical="{{false}}" >
            <block wx:for="{{swiperitems}}">
                <swiper-item class="top_swiper_item" >
                    <image class="swiper-image" src="{{item}}" mode="scaleToFill" ></image>
                </swiper-item>
            </block>
        </swiper>
    </view>

    <!-- 导航按钮 -->
    <view class="bottom-nav" hover-class="none" hover-stop-propagation="false">
        <block wx:for="{{navItems}}">
            <view class="wrap-item {{item.isSplot?'border-all':'border-bottom'}}" hover-class="none" hover-stop-propagation="false">
                <navigator  target="" url="../../pages/{{item.url}}/{{item.url}}" hover-class="navigator-hover" open-type="navigate">
                    {{item.name}}
                </navigator>
            </view>
        </block>
    </view>
</view>

wxss  --- -***page写height：100%属性，否则轮播图height：30%:属性可能不生效，高度为0；

swiper可以自己定义自己的宽度；

swiper不能自己定义自己的高度，需要父控件控制/或者由swipe-item控制   

@1 在swiper外加一层view来控制高度显示

@2 控制swiper-item的高度

page {
	height: 100%;
}
.container {
	height: 100%;
	box-sizing: border-box;
	background-color: #f4f4f4;
}
.swiper-container{
    width: 100%;
    height: 30%;
}
.top-swiper{
    height: 100%;
}
.top_swiper_item{
    width: 100%;
}

js  data中代码

 swiperitems: [
      '../../icons/gongke.jpg',
      '../../icons/greenbook.png',
      '../../icons/Wolverine.png'
      // 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      // 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      // 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],