微信小程序视图template模板引用的实例详解

微信小程序视图template模板引用的实例详解

微信小程序视图template模板引用的实例详解

WXML 提供两种文件引用方式import和include。

include可以将目标文件除了的整个代码引入，相当于是拷贝到include位置

temlate.wxml

qpwqitz {{item.date}}{{idx}}

{{item.title}}

{{item.content}}

66

88

redirect.wxml引用

template.js

var content_for = [

{

date: "2020年 10月 9日 ",

title: "那年夏天",

header_url: "/images/3.png",

image_url: "/images/6.jpg",

content: "天不言自高，地不言自厚，奇迹，是不会在容易的道路上绽放的。人生没有如果，只有后果和结果，过去的不再回来，回来的不再完美。",

},

{

date: "2022年 10月 9日 ",

title: "夏天",

header_url: "/images/3.png",

image_url: "/images/8.jpg",

content: "人生没有如果，只有后果和结果，过去的不再回来，回来的不再完美。",

},

]

//输出出口

module.exports={

templates: content_for

}

redirect.js引用

var content_data=require('../../template/template.js')

// pages/redirect/redirect.js

Page({

/**

* 页面的初始数据

*/

data: {

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (optionsqpwqitz) {

this.setData({

key: content_data.templates

});

}

});

wxml

template.wxss文件

.title{

font-size: 34rpx;

font-weight: 600;

color:#333;

margin-bottom: 20px;

}

redirect.wxss文件引用上面样式

@import "template/template.wxss" //使用import定义

swiper{

width:100%;

height:500rpx;

}

swiper image{

width:100%;

height:500rpx;

}

http://

本站关于小程序的文章还有很多，希望大家能搜索查阅，希望通过本文能帮助到大家，谢谢大家对本站的支持,

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。