微信小程序轮播图实现(超简单)

简介: 本文介绍了微信小程序使用内置swiper组件实现轮播图的简单方法。对于普通开发,示例代码展示了在wxml中配置swiper组件和嵌套image标签,以及相应的wxss样式设置。采用云开发时,wxml利用wx:for绑定数据列表,js部分展示如何从云端数据库获取数据并设置到list中。只需替换image的src为实际图片路径,即可完成轮播图功能。

微信小程序轮播图实现(超简单)

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

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中的路径换成自己图片的路径就可以了,

目录
相关文章
|
1月前
|
小程序 JavaScript
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
|
1月前
|
存储 小程序 API
【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果(五十二)
【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果(五十二)
【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果(五十二)
|
8月前
|
JSON 小程序 前端开发
微信小程序进阶——Flex弹性布局&轮播图&会议OA项目(首页)
微信小程序进阶——Flex弹性布局&轮播图&会议OA项目(首页)
96 0
|
1月前
|
存储 小程序
微信小程序的轮播图
微信小程序的轮播图
58 0
|
7月前
|
小程序 JavaScript
小程序点击轮播图跳转到tab导航界面
小程序点击轮播图跳转到tab导航界面
61 0
|
7月前
|
小程序 JavaScript
微信小程序从零开始开发步骤(五)轮播图
微信小程序从零开始开发步骤(五)轮播图
157 0
|
8月前
|
小程序 UED
微信小程序轮播图image控件图片mode属性自适应及解决图片加载闪烁bug
微信小程序轮播图image控件图片mode属性自适应及解决图片加载闪烁bug
252 0
|
1月前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
23天前
|
小程序 API 数据安全/隐私保护
微信小程序开发中的一些常用标签
这些标签是微信小程序开发中的基础,开发者可以根据需要组合使用这些标签来构建小程序的界面。每个标签都有其属性和事件,可以通过属性来调整组件的样式和行为,通过事件来响应用户的操作。
43 5
|
10天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的外卖小程序的研究与开发的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的外卖小程序的研究与开发的详细设计和实现
14 0

热门文章

最新文章