“Template模板的使用”的版本间的差异
来自CloudWiki
(→创建post-item-template.wxml) |
|||
(未显示同一用户的3个中间版本) | |||
第2行: | 第2行: | ||
wx:for解决代码重复只在当前页面,不能跨多个页面 | wx:for解决代码重复只在当前页面,不能跨多个页面 | ||
如果跨多个页面可以使用template模板 | 如果跨多个页面可以使用template模板 | ||
− | |||
==创建post-item-template.wxml== | ==创建post-item-template.wxml== | ||
第8行: | 第7行: | ||
在post-item文件夹中创建post-item-template.wxml | 在post-item文件夹中创建post-item-template.wxml | ||
*代码 | *代码 | ||
+ | |||
<template name="postItem"> | <template name="postItem"> | ||
<view class='post-container'> | <view class='post-container'> | ||
第25行: | 第25行: | ||
</view> | </view> | ||
</template> | </template> | ||
+ | |||
'''改写post.js中代码,并引用post-item-template.wxml''' | '''改写post.js中代码,并引用post-item-template.wxml''' | ||
第134行: | 第135行: | ||
} | } | ||
− | + | *小结: | |
+ | wxml和wxss两种引用不同,前者为<import src="引用路径" />,后者则是@import "...."; | ||
+ | |||
+ | 在一个项目中需要在多处页面使用类似的模块,就需要创建模板—-减少代码量,同时代码高度复用 |
2018年11月25日 (日) 14:45的最新版本
template解决重复问题
wx:for解决代码重复只在当前页面,不能跨多个页面 如果跨多个页面可以使用template模板
创建post-item-template.wxml
在posts文件中新建post-item文件夹 在post-item文件夹中创建post-item-template.wxml
- 代码
<template name="postItem"> <view class='post-container'> <view class='post-author-date'> <image wx:if="{ {item.img_condition} }" class='post-author' src="{ {item.avatar} }"></image> <text class='post-date'>{ {item.date} }</text> </view> <text class='post-title'>{ {item.title} }</text> <image class='post-image' src="{ {item.imgSrc}}"></image> <text class='post-content'>{ {content} }</text> <view class='post-like'> <image class='post-like-image' src='../../images/icon/01.jpg'></image> <text class='post-like-font'>{ {item.collection} }</text> <image class='post-like-image' src='../../images/icon/02.jpg'></image> <text class='post-like-font'>{ {item.reading} }</text> </view> </view> </template>
改写post.js中代码,并引用post-item-template.wxml
格式:<import src="引用路径" />
- 代码
<import src="post-item/post-item-template.wxml" /> <view> <swiper indicator-indicator-dots='true' autoplay='true' interval='5000'> <swiper-item><image src='/images/04.jpg'></image></swiper-item> <swiper-item><image src='/images/02.jpg'></image></swiper-item> <swiper-item><image src='/images/03.jpg'></image></swiper-item> </swiper> <block wx:for="{ {posts_key} }" wx:for-item="item" wx:for-index="idx"> <template is="postItem" data="{ {item} }" /> </block> </view> </block> </view>
注意:
- is template 的is 属性和模板中的name 属性对应,表示你要使用的具体模板。
- data 是用来做数据传递,同样用数据绑定的方式。其中item是posts_key中的子元素,而<template />不是指列表所有文章,而是其中一个,所以用子元素填充。
创建post-item-template.wxss
在post-item文件夹中创建post-item-template.wxss
- 代码
.post-author-date{ margin: 10rpx 0 20rpx 10rpx; } .post-author{ width: 60rpx; height: 60rpx; border-radius: 50%; vertical-align: middle; } .post-date{ margin-left: 20rpx; vertical-align: middle; margin-bottom: 10px; font-size: 26rpx; } .post-title{ font-size: 34rpx; font-weight: 600; color: #333; margin-bottom: 10px; margin-left: 10px; } .post-image{ margin-left: 16px; width: 100%; height: 340rpx; margin: auto 0; margin-bottom: 15px; } .post-content{ color: #666; font-size: 28rpx; margin-bottom: 20rpx; margin-left: 20rpx; letter-spacing: 2rpx; line-height:40rpx; } .post-like{ font-size: 13px; flex-direction: row; line-height: 16px; margin-left: 10px; } .post-like-image{ width: 16px; height: 16px; margin-left: 8px; vertical-align: middle; } .post-like-font{ vertical-align: middle; margin-right: 20px; }
建议:
- 此代码可以放在当前页面的WXSS中,也可以放在全局wxss中 ;如果项目需要大量使用一个模板,WXSS引入到全局,减少代码量;如果项目只是很少地方使用模板,可以在需要的页面引入WXSS。
改写post.wxss代码,并引用post-item-template.wxss
格式:@import "....";
- 代码
@import "post-item/post-item-template.wxss"; swiper{ width: 100%; height: 600rpx; } swiper image { width: 100%; height: 600rpx; } .post-container{ display: flex; flex-direction: column; margin-top: 20rpx; margin-bottom: 40rpx; background-color: #fff; border-top: 1px solid #ededed; border-bottom: 1px solid #ededed; padding-bottom: 5px; }
- 小结:
wxml和wxss两种引用不同,前者为<import src="引用路径" />,后者则是@import "....";
在一个项目中需要在多处页面使用类似的模块,就需要创建模板—-减少代码量,同时代码高度复用