[TOC] # swiper,详细api请点击：[链接](https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html?search-key=swiper) ~~~ <swiper indicator-dots="true" autoplay="false" interval="3000" duration="1000"> <block wx:for="{{imgUrl}}" wx:key="index"> <swiper-item> <image src="{{item.src}}" alt=""></image> </swiper-item> </block> </swiper> ~~~ 微信小程序中，变量和页面是可以分离的，一般都将变量写在data中 eg：*将数据放在local.js中* ~~~ var imgUrl = [ {src:"/images/banner01.png"}, {src:"/images/banner02.png"}, {src:"/images/banner03.png"}, {src:"/images/banner04.png"} ] module.exports={ imgUrl:imgUrl } ~~~ > module.exports={}// 模块赋值，页面与页面之间数据传输的不二选择 > require("xxx") // 接收模块想要传递的数据 *index.js内需要数据* ~~~ // 接收"../data/local.js"内，存在module.exports内的数据 var local = require("../data/local.js") Page({ onLoad:function(){ var bannerData = local.imgUrl; this.setData({ imgUrl:bannerData }) }, toggleUser(){ wx.navigateTo({ url: '../user/user', }) } }); ~~~ *index.wxml渲染数据* ~~~ <import src="../template/banner.wxml"></import> <template is="banner" data="{{imgUrl}}"></template> <button bindtap='toggleUser'>user</button> ~~~ template：模板工具，减少冗余代码。 创建template文件夹，其内创建banner页面存放模板代码 ~~~ <template name="banner"> <swiper indicator-dots="true" autoplay="false" interval="3000" duration="1000"> <!-- <swiper indicator-dots="{{true}}" autoplay="{{true}}" interval="3000" duration="1000"> --> <block wx:for="{{imgUrl}}" wx:key="index"> <swiper-item> <image src="{{item.src}}" alt=""></image> </swiper-item> </block> </swiper> </template> ~~~