微信小程序实现轮播图(自动切换＆手动切换)

需求

• 轮播图自动循环切换
• 控制轮播图的速度和切换间隔
• 本地图片 的切换
• 联网图片(即给定图片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