微信小程序模板template-个人小程序模板-小程序模板代码-即速应用

微信小程序模板template-个人小程序模板-小程序模板代码

浏览量：4321 时间：2020-04-06 来源：Rattenking

效果体验二维码如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！1.
DEMO下载
效果图2.
以MUI的实例首页和列表页面为实例
3.
通过上图，可以看出两个页面的列表部分很相近，以每行作为单元制作模板。
template模板4.
1、模板存放的位置以及使用模板页面存放的位置
template模板的WXML!--右侧无箭头--templatename"listNone"viewclass"tui-menu-list"navigatorurl"{{item.url}}"blocktext{{item.title}}/text/block/navigator/view/template!--右侧有箭头--templatename"list"viewclass"tui-menu-listtui-youjiantou"navigatorurl"{{item.url}}"blocktext{{item.title}}/text/block/navigator/view/template5.
注意：上边在同一个WXML文件内创建了两个模板，一个右侧有箭头，一个右侧无箭头，以name名识别。
template模板的WXSS.tui-menu-list{line-height:80rpx;color:#555;font-size:35rpx;padding:00rpx010px;position:relative;}在index页面使用template模板WXMLimportsrc"../../template/list.wxml"/viewclass"tui-fixed"scroll-viewstyle"height:100%;"scroll-y"true"templatewx:for"{{menu}}"is"list"data"{{item}}"/template/scroll-view/view用import将模板引入；使用模板，template的is属性和模板中：name属性对应，表示你要使用的具体模板，data属性是模板中要使用的数据，注意数据结构要相同；可以直接循环模板，需要也可以在模板外加一层进行循环。WXSS6.
此处将WXSS引入到全局！
@import"./template/list.wxss";直接使用import引入列表的WXSS；此代码可以放在当前页面的WXSS（index.wxss）中，也可以放在全局wxss（app.wxss）中；建议：如果项目需要大量使用一个模板，WXSS引入到全局，减少代码量；如果项目只是很少地方使用模板，可以在需要的页面引入WXSS。在list页面使用template模板WXMLimportsrc"../../template/list.wxml"/viewclass"tui-list-box"viewclass"tui-list-head"右侧无箭头/viewtemplatewx:for"{{menu}}"is"listNone"data"{{item}}"/template/viewviewclass"tui-list-box"viewclass"tui-list-head"右侧有箭头/viewtemplatewx:for"{{menu}}"is"list"data"{{item}}"/template/viewviewclass"tui-list-box-raduis"viewclass"tui-list-head"圆角列表/viewtemplatewx:for"{{menu}}"is"list"data"{{item}}"/template/view总结在一个项目中需要在多处页面使用类似的模块，就需要创建模板----减少代码量，同时代码高度复用；在同一个WXML文件中创建多个类似的模板用name属性来区别；模板WXSS在全局引入和在使用页面引入的区别在于模板的使用量；使用import引入模板WXML和WXSS；通过template标签使用模板，template标签的is属性与模板的name属性对应，data属性代表传入模板的数据。WXRUI体验二维码如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！其他7.
我的博客，欢迎交流！
8.
我的CSDN博客，欢迎交流！
9.
微信小程序专栏
10.
前端笔记专栏
11.
微信小程序实现部分高德地图功能的DEMO下载
12.
微信小程序实现MUI的部分效果的DEMO下载
13.
微信小程序实现MUI的GIT项目地址
14.
微信小程序实例列表
15.
前端笔记列表
16.
游戏列表