Fork me on GitHub

[小程序]-制作弯底swiper轮播

制作一个弯底的swiper,如下图:

image

wxml

1
2
3
4
5
6
7
8
9
10
11
<swiper class='banner' indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}" wx:key="">
<swiper-item>
<image src="{{item}}" class="slide-image" />
</swiper-item>
</block>
</swiper>
<view class='wanbox'>
<image class='wan' src='http://wechatpx.oss-cn-beijing.aliyuncs.com/qixing/ceng.png'></image>
</view>

wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.slide-image {
width: 750rpx;
height: 345rpx;
}
.banner {
width: 750rpx;
height: 345rpx;
}
.wanbox{position: relative;z-index: 99}
.wan {
display: block;
width: 750rpx;
height: 35rpx;
margin-top: -34rpx;
}
支持作者