2023年7月9日发(作者:)
微信⼩程序template模板详解及实例代码微信⼩程序 template模板详解如下图,我在做华企商学院⼩程序的时候,课程搜索结果页和课程列表页结构是完全⼀样的,这时就⾮常适合使⽤模板来完成页⾯搭建。实现⼀次定义,到处使⽤。模板⼀、定义模板1、新建⼀个template⽂件夹⽤来管理项⽬中所有的模板;
2、新建⼀个⽂件来定义模板;
3、使⽤name属性,作为模板的名字。然后在内定义代码⽚段。注意:
a.可以看到⼀个.wxml⽂件中可以定义多个模板,只需要通过name来区分;
b.模板中的数据都是展开之后的属性。
a.可以通过表达式来确定使⽤哪个模板is="{{index%2 === 0 ? 'courseLeft' : 'courseRight'}}"或者通过wx:if来确定。index是数组当前项的下标。b. data 是要模板渲染的数据,data="{{...item}}" 写法是ES6的写法,item是wx:for当前项,... 是展开运算符,在模板中不需要再{{Name}} ⽽是直接{{courseName}} 。三、模板样式1、在新建模板的时候同时新建⼀个 的⽂件,与CSS同样的写法控制样式。
2、在需要使⽤模板的页⾯ .wxss⽂件中import进来;或者直接在中引⼊,这样只需要⼀次引⼊,其他⽂件就不⽤引⼊了。@import url("../template/");感谢阅读,希望能帮助到⼤家,谢谢⼤家对本站的⽀持!
发布者:admin,转转请注明出处:http://www.yc00.com/web/1688894468a181795.html
评论列表(0条)