微信小程序开发实现轮播图
更新时间:2022年06月24日 09:51:57 作者:开发者小埋
这篇文章主要为大家详细介绍了微信小程序开发实现轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
小程序,移动端离不开轮播图的功能,下面就写一个小程序的轮播图功能分享给大家
效果图:
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.配置样式
/**index.wxss**/ /*轮播控件*/ .home-swiper { width: 95%; height: 360rpx; } .slide-image { width: 100%; height: 100%; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
实现类似于Photoshop控制面板输入文本数字的效果,所以名称叫做PsWheel。用于控制输入数字类型文本框实现鼠标滚轮上下滑动改变值,支持正整数、小数类型输入文本。2010-02-02
最新评论