【练习】小程序动态生成页面

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>

多用循环生成代码，如果不能用模版，参照轮播图方法