查看“Template模板的使用”的源代码
←
Template模板的使用
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
==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 "....";
返回至
Template模板的使用
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息