微信小程序轮播图实现（超简单）「建议收藏」

全栈程序员站长

发布于 2022-08-31 15:22:45

5.1K0

发布于 2022-08-31 15:22:45

文章被收录于专栏：全栈程序员必看全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

微信 小程序轮播图实现（超简单）

微信小程序的轮播图可以用官方给的swiper组件。下图是官方给出的swiper属性，我截取了比较常用的一些属性。

效果实现如下图

1. 普通开发（不采用云开发）

1.1wxml

<view class="banner">
   <swiper indicator-dots indicator-color="rgba(255,255,255,0.5)"
   indicator-active-color="#fff" circular autoplay interval="4000">
   <swiper-item><image src="/image/1.jpg"></image></swiper-item>
   <swiper-item><image src="/image/2.jpg"></image></swiper-item>
   <swiper-item><image src="/image/3.jpg"></image></swiper-item>
   </swiper>
</view>

1.2wxss

.banner{ 
   
  width: 100%;
  height: 350rpx;
}
.banner swiper{ 
   
  height: 100%;
  width: 100%;
}
.banner image{ 
   
  width: 100%;
  height: 350rpx;
}

2. 采用云开发

2.1wxml

<view class="banner">
   <swiper indicator-dots indicator-color="rgba(255,255,255,0.5)"
   indicator-active-color="#fff" circular autoplay interval="4000">
   <swiper-item wx:for="{ 
   {list}}">
     <image src="{ 
   {item.imge}}"></image>
    </swiper-item>
   </swiper>
</view>

2.2wxss

.banner{ 
   
  width: 100%;
  height: 400rpx;
}
.banner swiper{ 
   
  height: 100%;
  width: 100%;
}
.banner image{ 
   
  width: 100%;
  height: 400rpx;
}

2.3js

getTopList(){ 
   
  wx.cloud.database().collection('lunbo').get()
  .then(res => { 
   
    console.log("数据上传成功",res)
  this.setData ({ 
   
    list:res.data 
  })
})

自己赶紧试试吧，只需件swiper组件中写入image，将image中的src中的路径换成自己图片的路径就可以了，

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/143250.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022年5月2，如有侵权请联系 cloudcommunity@tencent.com 删除

云开发