1.数据放入data文件中的data.js
var swiper_content=[
{
url:"/images/3.jpg",
title1: "最好的华俱",
title2: "副标语"
},
{
url: "/images/4.jpg",
title1: "标语2",
title2: "副标语2"
},
{
url: "/images/5.jpeg",
title1: "标语3",
title2: "副标语3"
}
]
2.在data.js中设置出口
module.exports={
swiperList: swiper_content
}
3.页面中的swiper.js文件中引入数据
var swiperData=require("../../data/data.js"); 必须是相对路径
4.在swiper.js中onLoad函数中绑定数据
onLoad: function (options) {
this.setData({
swiper_key: swiperData.swiperList
});
}
5.在swiper目录中创建template目录，存放template.wxml和wxss文件
template.wxml：
<template name="swiperItem">
模版代码
轮播图这个怎么都出不来可能不行
<!-- <swiper-item>
<image class="pic1" src="{{url}}"></image>
<text class="title">{{title1}}</text>
<text class="subtitle">{{title2}}</text>
</swiper-item> -->
</template>
template.wxss正常放代码
6.引入模版在swiper.wxml和wxss文件（最上面）
swiper.wxml:
<import src="template/template.wxml" />
在需要模版的地方
<template is="swiperItem" data="{{..item}}"/>
data="{{..item}}"不加..就需要在模版中加item{{item.title1}}
swiper.wxss:
@import "template/template.wxss"
7.循环生成代码
<block wx:for="{{swiper_key}}">
<template is="postItem" data="{{item}}"/>
</block>
8.想在模版上加事件
<block wx:for="{{post_key}}">
<view catchtap='onPostTap'>
<template is="postItem" data="{{item}}"/>
</view>
</block>
用view包裹
轮播图好像没有办法用template，只能省略template步骤，
<swiper indicator-dots="true" autoplay="true">
<block wx:for="{{swiper_key}}">
<swiper-item>
<image class="pic1" src="{{item.url}}"></image>
<text class="title">{{item.title1}}</text>
<text class="subtitle">{{item.title2}}</text>
</swiper-item>
</block>
</swiper>
多用循环生成代码，如果不能用模版，参照轮播图方法
小程序
