如下图,我们经常做这样的列表页,课程搜索结果页和课程列表页结构是完全一样的,非常适合使用模板来完成页面搭建。这样我们就不用写那些重复的代码了,而且修改界面的时候也只需要改动模板一个地方WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。一、定义模板1、新建一个template文件夹用来管理项目中所有的模板;”pages/template/personCourseTmp”,2、新建一个personCourseTmp.wxml文件来定义模板;3、使用name属性,作为模板的名字。然后在template/内定义代码片段。templatename=”personCourseItemTmp”/template4.那我们开始实现吧,建模板2个文件1.personCourseTmp.wxmltemplatename=”personCourseItemTmp”!–显示–viewwx:if=”{{mentor_image_uri==null}}”imageclass=”widget_arrow”src=”http://dev.cfo-mentor.com/menter/public/assets/images/avatar_default.png”mode=”aspectFill”/image/viewviewwx:elseimageclass=”widget_arrow”src=”{{mentor_image_uri}}”mode=”aspectFill”/image/viewviewclass=’info’姓名:{{mentor_name}}/viewviewclass=’info’职位:{{career}}/viewviewclass=’info’公司:{{company_name}}/viewviewclass=’info’地区:{{address}}/viewviewclass=’info’擅长:{{mentor_skills}}/viewnavigatorurl=’../../pages/info/info?user_id={{user_id}}’详情/navigatorviewclass=’hr’/view/template2.样式文件personCourseTmp.wxss.name{text-align:center;}.widget_arrow{margin-top:20px;height:200px;width:200px;margin-left:25%;}.info{font-size:14px}.info_border{height:200px;width:200px;border:8pxsolidred;}navigator{margin:0auto;height:40px;width:90%;margin-top:20px;margin-bottom:20px;background-color:green;line-height:40px;text-align:center;}.hr{height:0;width:100%;border:1pxsolidgreen;}那我们如何在页面上使用呢,引入样式文件和视图文件比如我们要在.wxss上面引入样式文件@import”../template/personCourseTmp.wxss”;只需要在.wxss里面加入上面的代码我们要在.wxml上面引入视图文件importsrc=”../template/personCourseTmp.wxml”/blockwx:for=”{{message}}”wx:key=”id”templateis=”personCourseItemTmp”data=”{{…item}}”/template/blocktemplateis=””data=””/template此时的is用来进行判断data是要传入模板中的数据…eg…(spread运算符)传数据时item前面加三个点…模板里面就不需要写item了。注意import作用域,其仅仅引用目标文件中template。如:CimportBBimportA,C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template。
微信小程序模板,微信小程序十二实战小程序模板template的使用,以及传递集合数据
相关推荐
微信小程序用户授权,以及判断登录江城区E企盈小程序是否过期
数据恢复软件(二):用C++重写恢复B乐都县E企盈小程序MP位图文件的小程序
公众号再次改版高坪区E企盈小程序小程序又多了一个入口
微信小程序加载图片时,湘桥区E企盈小程序先拉长,再恢复正常
转:(很有用)有多个按钮,点击一个变色,点击另吴中区E企盈小程序一个变色,原来的恢复颜色的方法
第12课微信小程序Component构造器自道里区E企盈小程序定义组件:
导航中的南海区E企盈小程序小竖线总结
小程序:after实现德格县E企盈小程序1px纵向分割线
汉沽区E企盈小程序企业微信内测朋友圈和客户群功能:小程序C位出道!
小程序运行加载密山市E企盈小程序机制
小程通城县E企盈小程序序中间有字的分隔线
公众号和小程序可以同名了名称支持同主体复盘锦E企盈小程序用
最新评论
独特万商直播系统,直播系统技术开发公司
万商直播系统开发公司
优秀的团队,万商直播管理系统
不错的小程序案例
优秀的团队,不错的服务!
讲的很好
主播长的帅气
好系统好服务