当前位置:  开发笔记 > 编程语言 > 正文

微信小程序中template模块的使用方法

​本篇文章给大家带来的内容是关于微信小程序中template模块的使用方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
本篇文章给大家带来的内容是关于微信小程序中template模块的使用方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。
首先在pages目录下新建一个template目录用来存放模板
模板怎么建呢?
模板只需要新建xxx.wxss和xxx.wxml这两个文件就可以了,其他两个.js和.json不需要
在template目录中新建list-template.wxml和list-template.wxss

list-template.wxml:

list-template.wxss:

.tmpContainer{
  display: flex;  
  flex-direction: column;
  }
.avatar_date image{
  width: 60rpx;  
  height: 60rpx;  
/* 把此元素放置在父元素的中部。就可以让图片与文字都在中间了 */
  vertical-align: middle;  
  margin-right: 10rpx;
  }
.avatar_date {
  padding: 10rpx;
  }
.avatar_date text{
  font-size: 32rpx;
  }
.company{
  margin-left: 10rpx;  
  font-size: 36rpx;  
  font-weight: 700;  
  margin: 10rpx;
  }
.contentImg{
  width: 100%;  
  height: 460rpx;
  }
.content{
  font-size: 32rpx;  
  /* 段落首字母缩进两个字 */
  text-indent: 64rpx;
  }
.collection_love image{
  width: 32rpx;  
  height: 32rpx;  
  vertical-align: middle;  
  margin-right: 10rpx;
  }
.collection_love text{
  font-size: 28rpx;  
  margin-right: 10rpx;
  }

list.wxml中引入模板:


然后在你想用模板的地方引用

使用pdb模块调试Python程序实例

以上就是微信小程序中template模块的使用方法的详细内容,更多请关注其它相关文章!

推荐阅读
无名有名我无名_593
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有