“Template模板的使用”的版本间的差异
来自CloudWiki
(创建页面,内容为“计算机1702 周浩”) |
|||
第1行: | 第1行: | ||
− | + | ==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--> | ||
+ | <template is="postItem" data="{{item}}" /> | ||
+ | </block> | ||
+ | </view> | ||
+ | </block> | ||
+ | </view> | ||
+ | |||
+ | |||
+ | ==创建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; | ||
+ | } | ||
+ | |||
+ | |||
+ | 改写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 "...."; |
2018年11月25日 (日) 13:51的版本
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>
创建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;
}
改写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 "....";