PHP前端开发

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

百变鹏仔 4天前 #前端问答
文章标签 实例

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

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

1.编写页面结构

pages/index/index.wxml

<!--index.wxml--><view><swiper>        	<block>  	        <swiper-item>  	           	<navigator>  	            	<image></image>  	           	</navigator>   	        </swiper-item>        	</block>  </swiper> </view>

注意:不要在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.效果