小潘杂谈

微信小程序template模板详解

字号+ 作者:admin 来源:seo博客 2020-09-07 11:00 我要评论( )

微信小程序中提供了template使用,即相同的板块可以进行代码互用,如下方的效果图,就可以用template。本文主要介绍了微信小程序template模板使用的相关资料,希望......

微信小程序中提供了template使用,即相同的板块可以进行代码互用,如下方的效果图,就可以用template。本文主要介绍了微信小程序template模板使用的相关资料,希望通过本文能帮助到大家,让大家理解掌握这样的功能,需要的朋友可以参考下。

微信小程序template模板使用

微信小程序template模板详解

效果图

一、模板定义

模板最重要的是模板的名称,即""

以下是实例模板代码<template name="postItem"> <view>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文件<import alt="微信小程序template模板详解" src="post-item/post-item-template.wxml" /><view> <block wx:for="{{postList}}" wx:for-item="item"><template is="postItem" data="{{...item}}" /> </block></view>wxss 文件@import 'post-item/post-item-template.wxss';相关推荐:

微信小程序审核不通过怎么办

微信小程序实现image组件图片自适应宽度比例实例分享

微信小程序实现跟随菜单效果和循环嵌套加载数据实例详解以上就是微信小程序template模板详解的详细内容,更多请关注小潘博客其它相关文章!

转载请注明出处。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。转载请注明seohttp://www.hkxiaopan.com

网友点评
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
验证码: 点击我更换图片
精彩导读