微信小程序的template模板怎么使用
发表于:2024-12-03 作者:千家信息网编辑
千家信息网最后更新 2024年12月03日,本文小编为大家详细介绍"微信小程序的template模板怎么使用",内容详细,步骤清晰,细节处理妥当,希望这篇"微信小程序的template模板怎么使用"文章能帮助大家解决疑惑,下面跟着小编的思路慢慢
千家信息网最后更新 2024年12月03日微信小程序的template模板怎么使用
本文小编为大家详细介绍"微信小程序的template模板怎么使用",内容详细,步骤清晰,细节处理妥当,希望这篇"微信小程序的template模板怎么使用"文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。
微信小程序template模板使用
前言
微信小程序中提供了template使用,即相同的板块可以进行代码互用,如下方的效果图,就可以用template。
效果图
一、模板定义
模板最重要的是模板的名称,即""
以下是实例模板代码
{{date}} {{title}} {{content}} {{collection}} {{reading}}
wxss文件
.post-container { display: flex; flex-direction: column; margin-top: 20rpx; margin-bottom: 40rpx; background-color: white; border-bottom: 1px solid #ededed; border-top: 1px solid #ededed; padding-bottom: 5px;}.post-author-date { margin: 10rpx 0 20rpx 10rpx;}.post-author { width: 60rpx; height: 60rpx; vertical-align: middle;}.post-date { margin-left: 20rpx; vertical-align: middle; margin-bottom: 5px; font-size: 26rpx;}.post-title { font-size: 34rpx; font-weight: 600; color: #333; margin-bottom: 10px; margin-left: 10px; margin-right: 10px;}.post-image { margin-left: 16px; width: 100%; height: 340rpx; margin: auto 0; margin-bottom: 15rpx;}.post-content { color: #666; font-size: 28rpx; margin-bottom: 20rpx; margin-left: 20rpx; margin-right: 20rpx; letter-spacing: 2rpx; line-height: 40rpx;}.post-like { font-size: 13px; flex-direction: row; line-height: 16px; margin-left: 16px; color: gray;}.post-like-image { height: 16px; width: 16px; margin-right: 8px; vertical-align: middle;}.post-link-text { vertical-align: middle; margin-right: 20px;}
二、模板使用
引入模板文件
使用模板文件 用is 使用 模板定义时的名称 data里面是循环里面里面的数据 用"..."表示的话,就可以把item里面的数据全部平铺出来,这样在template里面就不用写"item.xx"了,直接写item里面的属性就可以了 要使用template的程序wxml文件
wxss 文件
@import 'post-item/post-item-template.wxss';
读到这里,这篇"微信小程序的template模板怎么使用"文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注行业资讯频道。
模板
程序
文件
文章
代码
内容
名称
效果
效果图
数据
妥当
相同
重要
不用
前言
实例
属性
思路
新知
更多
数据库的安全要保护哪些东西
数据库安全各自的含义是什么
生产安全数据库录入
数据库的安全性及管理
数据库安全策略包含哪些
海淀数据库安全审计系统
建立农村房屋安全信息数据库
易用的数据库客户端支持安全管理
连接数据库失败ssl安全错误
数据库的锁怎样保障安全
数据库中SCNV
汽车网络技术课后题
广州市信息网络安全局
微信多开互联网黑科技
西安学习计算机网络技术
我的世界服务器怎么私信玩家
查询数据库表时间段数据
如何搭建大型服务器机房
阴阳师网易最早的服务器
北京白瑞互联网科技有限公司
虚拟服务器的缺点
如何给数据库制作界面
网络安全等级制度发展趋势
数据库客户端连接服务器
16进制数字怎么存到数据库中
境外服务器哪家便宜
什么是对网络安全事件分级的标准
tidb数据库是哪国
网上正面宣传维护网络安全
数据库查询数学成绩最高分
软件开发有什么专业证可以考
数据库系统主要特点是什么
消防软件开发公司有哪些
计算机网络技术的手抄报图片
魔兽世界最好的服务器
软件开发部部长岗位职责
懒猫小说软件开发
建立医疗大数据库的意义
成都市教育系统网络安全注册
口碑好的软件开发哪家好