E企盈营销工具技术服务商 热线:4006-838-530

微信小程序模板,微信小程序template模板的使用

E企盈直播平台营销卖货系统

模板WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。当项目需要多次使用同一个布局和样式的时候,就可以考虑使用template(模板)来减少冗余代码。如何定义以及使用模板wxml模块:新建template文件夹,新建wxml。wxml文件由template标签包裹,并设置template标签名字属性方便调用。使用时在对应wxml文件通过import引用。templatename=”postitem”viewclass=’post-container’viewclass=’post-author-date’imageclass=’post-author’src=’/images/xml.jpg’/imagetextclass=’post-date'{{item.date}}/text/viewtextclass=’post-title'{{item.title}}/textimagewx:if=”{{!boolean_show}}”class=’post-image’src=”{{item.image}}”/imagetextclass=’post-content'{{item.content}}/textviewclass=’post-like’imageclass=’post-like-image’src=”{{item.img.view_img}}”/imagetextclass=’post-like-font'{{item.view_num}}/textimageclass=’post-like-image’src=”{{item.img.collect_img}}”/imagetextclass=’post-like-font'{{item.collect_num}}/text/view/view/template引用template模板的语句实际上只有下面一句,后面加上data属性是为了遍历数组得到数组中的每一个元素对象的每个内容templateis=”postitem”/importsrc=”文件路径”/!-在需要调用处,通过名字属性调用–blockwx:for=”{{post_key}}”wx:for-item=”item”!–将postId作为一个属性存放到view标签中,自定义属性data开头–viewcatchtap=’onPostTap’data-postId=”{{item.postId}}”templateis=”postitem”data=”{{item}}”//view/blockwxss模块:1.在template文件夹下新建wxss文件。2.写入wxss内容。3.使用时在对应wxml文件通过@import引用。.post-container{/弹性盒子模型/display:flex;flex-direction:column;margin-top:20rpx;margin-bottom:40rpx;background-color:#fff;/上下边界/border-bottom:1pxsolid#ededed;border-top:1pxsolid#ededed;/页边距/padding-bottom:5px;}引用语句只有一句,不需要通过import引用@import”文件路径”;下面的wxss文件中就已经引用了template文件夹下的wxss文件的内容了,比如上面的.post-container@import”文件路径”;swiper{width:100%;height:600rpx;}swiperimage{width:100%;height:600rpx;}

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序模板,微信小程序template模板的使用
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏