微信小程序之自定义轮播图实例 —— 微信小程序实战系列(3)

由于微信小程序,整个项目编译后的大小不能超过1M

微信小程序之自定义轮播图实例 —— 微信小程序实战系列(3)_第1张图片

查看做轮播图功能的一张图片大小都已经有100+k了

微信小程序之自定义轮播图实例 —— 微信小程序实战系列(3)_第2张图片

那么我们可以把图片放在服务器上,发送请求来获取。

index.wxml:

这里使用小程序提供的组件

autoplay:自动播放

interval:自动切换时间

duration:滑动动画的时长

current:当前所在的页面

bindchange:current 改变时会触发 change 事件

由于组件提供的指示点样式比较单一,另外再自定义指示点的样式

{ {index+1}}

index.wxss:

.swiper-container{

position: relative;

}

.swiper-container .swiper{

height: 300rpx;

}

.swiper-container .swiper .img{

width: 100%;

你可能感兴趣的:(程序员,微信小程序,小程序)