需求
- 轮播图自动循环切换
- 控制轮播图的速度和切换间隔
- 本地图片 的切换
- 联网图片(即给定图片url集的切换)
步骤
- 微信小程序给出了相关的组件可以直接拿来用就行
- 里面封装了很好的功能,包括速度的控制和切换
- 实现本地图片的切换(单机版)
- 实现联网请求的切换(联网版)
代码实现
index.wxml
<view class="swiper-container">
<!-- <image calss="swiper-imgs" src="../../image/index2.png"> </image> -->
<swiper class='swiper_box' indicator-dots='{{indicatorDots}}' autoplay='{{autoplay}}' circular='{{circular}}' indicator-color='#fff000' indicator-active-color='#ff0000'>
<block wx:for="{{images}}" wx:key="id">
<swiper-item>
<image class='image_banner' src='../../image/{{item}}'></image>
</swiper-item>
</block>
</swiper>
</view>
index.js
Page({
data:{
indicatorDots:true,
circular:true,
autoplay:true,
images: ['index1.png', 'index2.png', 'index3.png', 'index4.png', 'index5.png']
}
})
index.wxss
@import "../../libs/weui.wxss";
page {
background-color: #F8F8F8;
height: 100%;
font-size: 32rpx;
line-height: 1.6;
}
.image_banner{
position: relative;
align-items: center;
justify-content: center;
background-color: #1AAD19;
color: #FFFFFF;
font-size: 36rpx;
}
.image_banner:before{
display: block;
top:50%;
left:50%
}
index.json
{
"navigationBarTitleText": "首页"
}
微信集成了各个组件的功能,可以直接拿来使用即可,包括轮播图中图片的切换速度和时间控制,直接给相关属性赋值即可做到
微信小程序组件应用
https://developers.weixin.qq.com/miniprogram/dev/component/navigation-bar.html
Demo链接
https://github.com/EugeniaGao/miniProgram