[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> ~~~