微信小程序轮播图功能开发实例

小云云
发布: 2018-05-25 13:56:32
原创
5808 人浏览过

轮播图在应用中很常见,本文主要和大家分享微信小程序轮播图功能开发实例,希望能帮助到大家。

轮播图:swiper滑块视图容器。

1.编写页面结构

pages/index/index.wxml

<!--index.wxml-->
<view>
	<swiper indicator-dots="{{indicatorDots}}"  
	        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">  
	      	<block wx:for="{{imgUrls}}">  
		        <swiper-item>  
		           	<navigator url="{{item.link}}" hover-class="navigator-hover">  
		            	<image src="{{item.url}}" class="slide-image" width="355" height="150"/>  
		           	</navigator>   
		        </swiper-item>  
	      	</block>  
	</swiper> 
</view>
登录后复制

注意:不要在view中加css设置:display: flex;否则效果呈现不了

2.设置数据

了解属性,方可设置


swiper-item仅可放置在<swiper/>组件中,宽高自动设置为100%。

在index.js中设置数据

//index.js  
//获取应用实例  
var app = getApp()  
Page({
	data: {  
        imgUrls: [  {  
			link:&#39;/pages/index/index&#39;,  
			url:&#39;../uploads/a01.jpg&#39;   
        },{  
			link:&#39;/pages/logs/logs&#39;,  
			url:&#39;../uploads/a02.jpg&#39;  
        },{  
			link:&#39;/pages/user/user&#39;,  
			url:&#39;../uploads/a03.jpg&#39;    
        }   
    ],  
	    indicatorDots: true,  
	    autoplay: true,  
	    interval: 5000,  
	    duration: 1000
	} 
})
登录后复制

3.效果


相关推荐:

react轮播图组件react-slider-light详解

jquery实现PC端轮播图代码

两种js实现轮播图的方式

以上是微信小程序轮播图功能开发实例的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板