微信小程序轮播图功能怎么开发

小编给大家分享一下微信小程序轮播图功能怎么开发,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

成都创新互联公司专注于企业全网营销推广、网站重做改版、五莲网站定制设计、自适应品牌网站建设、H5网站设计商城网站建设、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为五莲等各大城市提供网站开发制作服务。

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

1.编写页面结构

pages/index/index.wxml



	  
	      	  
		          
		           	  
		            	  
		           	   
		          
	      	  
	 

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

2.设置数据

了解属性,方可设置

微信小程序轮播图功能怎么开发

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

在index.js中设置数据

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

3.效果

微信小程序轮播图功能怎么开发

看完了这篇文章,相信你对“微信小程序轮播图功能怎么开发”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


文章题目:微信小程序轮播图功能怎么开发
分享链接:http://scyanting.com/article/pdgphd.html