微信template模板

可参考微信开发者文档wxml模板
目录：

listItem.wxml中定义模板

<template name="listItem">      //name属性为模板的名字<view class="commonItem"><image src="{{img}}"></image><view class="itemRight"><view class="itemTitle">{{title}}</view><view class="itemFooter"><text>{{name}}</text><text>{{date}}</text></view></view></view>
</template>

listItem.wxss

.commonItem{width: 646rpx;height: 160rpx;background:rgba(244,244,244,1);box-shadow:0rpx 1rpx 7rpx 0rpx rgba(139,139,139,0.36);border-radius:0rpx 30rpx 30rpx 0rpx;margin:0 auto;display: flex;align-items: center;padding: 25rpx 30rpx;box-sizing: border-box;margin-top: 35rpx;
}
.commonItem image{width: 130rpx;height: 108rpx;margin-right: 30rpx;
}
.itemRight{/* flex: 100%; */            ----------在弹性盒子中慎用flex：100%；或者width:100%;width: 415rpx;height: 100%;display: flex;flex-direction: column;justify-content: space-around;
}
.itemTitle{font-size:30rpx;word-break: keep-all;word-wrap: break-word;white-space:pre-line;
}
.itemFooter{font-size:24rpx;
}

在相对应的组件中（.wxml）使用模板：

<import src="../../../../template/listItem/listItem.wxml" />      -------------------用import方式(写相对路径)引入模板（include引入方式不适合这里）
<template is="listItem" data="{{...data}}"/>                         -------------------使用...可在模板中少写item,is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板

在相对应的组件中（.wxss）使用模板：

@import "../../../../template/listItem/listItem.wxss";

微信template模板相关推荐

微信小程序template模板与component自定义组件的区别和使用
前言: 除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义.而component组件则有自己 ...
微信小程序（三）：使用template模板时无法获取for循环下标index的问题
使用template模板渲染的数据列表,点击后跳转到详情页,本想通过for循环中的index对应点击的是哪一条数据,后来发现template模板中无法获取index. 问题重现:[接微信小程序(二)的 ...
小程序template模板为知你客服传入微信头像和昵称
小程序template模板为知你客服传入微信头像和昵称自从利用了知你客服以来,我们自己的小程序已经完全完成了服务内环化,即所有操作已经可以完全在微信内部完成,不必在使用qq联系客户,但在未配置 ...
微信小程序中template模板使用
小程序官方使用简介模板 WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用. 定义模板使用 name 属性,作为模板的名字.然后在内定义代码片段,如: <! ...
template模板的使用及文章详情跳转
title: template模板的使用及文章详情跳转 date: 2018-08-27 16:45:55 tags: 微信小程序 wx:for只能在当前页面循环当前页面的数据用template可以 ...
java微信开发模板消息接口使用
微信开发--模板消息接口 http://blog.csdn.net/u010486495/article/details/46985729 微信开发者文档:模板消息接口模板消息运营规范:http:/ ...
设计模式之——Template模板模式
Template模式又叫模板模式,是在父类中定义处理流程的框架,在子类中实现具体处理逻辑的模式.当父类的模板方法被调用时程序行为也会不同,但是,不论子类的具体实现如何,处理的流程都会按照父类中所定义的 ...
第六章-template模板
第六章-template模板文章目录第六章-template模板函数模板类模板函数模板函数模板可以用来创建一个通用功能的函数,以支持多种不同形参,进一步简化重载函数的函数体设计函数定义的 ...
Ansible PLaybook template 模板详解
template 模板模板是一个文本文件,可以做为生成文件的模版,并且模板文件中还可嵌套jinja语法 jinja2语言网站:https://jinja.palletsprojects.com/e ...

微信template模板

微信template模板相关推荐

最新文章

热门文章