小程序,移动端离不开轮播图的功能,下面就写一个小程序的轮播图功能分享给大家 效果图: 1.页面代码 <!--index.wxml--> <view class="
小程序,移动端离不开轮播图的功能,下面就写一个小程序的轮播图功能分享给大家
效果图:
1.页面代码
<!--index.wxml-->
<view class="container">
<!--轮播图-->
<swiper class="home-swiper" indicator-dots="true" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for-items="{{lunboData}}">
<swiper-item>
<image src="{{item.imgurl}}" class="slide-image" />
</swiper-item>
</block>
</swiper>
</view>
2.配置信息
//index.js
Page({
data: {
//轮播图配置
autoplay: true,
interval: 3000,
duration: 1200
},
onLoad: function () {
var that = this;
var data = {
"datas": [
{
"id": 1,
"imgurl": "../../images/a1.jpg"
},
{
"id": 2,
"imgurl": "../../images/a2.jpg"
}
]
};
that.setData({
lunboData: data.datas
})
}
})
3.配置样式
.home-swiper {
width: 95%;
height: 360rpx;
}
.slide-image {
width: 100%;
height: 100%;
}
--结束END--
本文标题: 微信小程序开发实现轮播图
本文链接: https://www.lsjlt.com/news/152478.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0