微信小程序轮播图实现(超简单)「建议收藏」
2023-06-13 09:11:42 时间
大家好,又见面了,我是你们的朋友全栈君。
微信小程序轮播图实现(超简单)
微信小程序的轮播图可以用官方给的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年08月 微信小程序-省市区三联动功能实现
- 【愚公系列】2022年08月 微信小程序-左划删除效果实现
- 【愚公系列】2022年08月 微信小程序-下拉刷新功能实现
- 微信小程序–单选复选按钮组的实现
- 微信小程序 轮播图 修改小点点「建议收藏」
- 微信小程序轮播图实现 含小圆点 图片下方显示标题
- 微信小程序下订单支付代码实现
- 微信小程序+php 授权登陆,完整代码
- 微信小程序常用的组件
- 微信小程序从注册appid到熟悉静态微信特有标签
- Go开发微信小程序SDK推荐
- 【说站】狼人杀微信娱乐游戏小程序源码
- 【说站】幸运红包娱乐微信小程序源码 多玩法安装简单
- 【说站】土味情话恋爱话术微信小程序源码
- 【愚公系列】2022年09月 微信小程序-图片裁剪功能实现
- 【愚公系列】2022年09月 微信小程序-实现直播功能
- 【愚公系列】2022年10月 微信小程序-电商项目-商品详情页面的标题及价格功能实现
- 【愚公系列】2022年10月 微信小程序-电商项目-确认订单功能实现
- 微信小程序官方组件展示之开放能力ad源码
- 微信小程序性能监控方式
- 微信小程序switchTab传参以及接收参数
- 微信小程序Video组件实现视频、自定义播放按钮、封面图、封面图文字demo
- 微信小程序返回上一页传值方法
- 微信小程序是如何实现编译的
- 微信小程序如何发布上线①
- 抓取微信小程序源码的方法详解手机开发
- 新型微信小程序借助Redis缓存实现极致性能(微信小程序redis缓存)