介绍
这篇文章主要介绍小程序中模板模块怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
WXML提供模板(模板),可以在模板中定义代码片段,然后在不同的地方调用。
首先在页目录下新建一个模板目录用来存放模板
模板怎么建呢?
模板只需要新建xxx.wxss和xxx.wxml这两个文件就可以了,其他两个. js和。json不需要
在模板目录中新建list-template.wxml和list-template.wxss
list模板。wxml:
& lt; template name=& # 39; listTmp& # 39;祝辞& lt; view> & lt;才能view> ,,,& lt; image src=https://www.yisu.com/zixun/0./图片/阿凡达/png的> 图片> <文本> 2018年5月9日文本> 视图> <文本>火影村文本> <图像src='/6./细节/旋转/jpg图像“> 图片> <文本>火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火文本> <视图> <图像src='/图片/图标/view.png '> 图片> <文本> 88 文本> <图像src='/图片/图标/star.png '> 图片> <文本> 88 文本> 视图> 视图> 模板>
<代码> list模板。wxs: 代码>
.tmpContainer { ,,显示:flex,,, ,,flex-direction:列; ,,} {.avatar_date 图像 ,,宽度:60 rpx;,, ,,身高:60 rpx;,,/*,把此元素放置在父元素的中部。就可以让图片与文字都在中间了,*/vertical-align才能:中间,,, ,,margin-right: 10 rpx; ,,} .avatar_date { ,,填充:10 rpx; ,,} {.avatar_date 文本 ,,字体大小:32 rpx; ,,} 相关{ ,,margin-left: 10 rpx;,, ,,字体大小:36 rpx;,, ,,粗细:700;,, 保证金才能:10 rpx; ,,} .contentImg { ,,宽度:100%,,, ,,身高:460 rpx; ,,} .content { ,,字体大小:32 rpx;,,/*,才能段落首字母缩进两个字,*/,,indent: 64 rpx; ,,} {.collection_love 图像 ,,宽度:32 rpx;,, ,,身高:32 rpx;,, vertical-align才能:中间,,, ,,margin-right: 10 rpx; ,,} {.collection_love 文本 ,,字体大小:28 rpx;,, ,,margin-right: 10 rpx; 以前,,}>在<代码>列表。wxml> 代码中引入模板:
& lt; !——,在头部引入,注意结尾别忘了/,——比; & lt; import  src=https://www.yisu.com/zixun/'/页面/模板/list-template.wxml '/>然后在你想用模板的地方引用
以上是“小程序中模板模块怎么用”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!小程序中模板模块怎么用