效果体验二维码如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢!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.游戏列表
微信小程序模板template-个人小程序模板-小程序模板代码
浏览量:4213
时间:
来源:Rattenking
版权声明
即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

最新资讯
-
抖音再现本地生活服务,咫尺同城圈商业变现新通道
短视频成为本地生活探店网红营销变现引流的新阵地,每一位网红都渴望在短视频内“一夜爆红”。即速应用团队对多商家小程序进行升级,打造了咫尺同城圈:“同城探店营销助手”,不仅完善商家营销技巧,还助力探店网红玩转本地生活服务。 -
抖音再现本地生活服务,咫尺同城圈商业变现新通道
短视频成为本地生活探店网红营销变现引流的新阵地,每一位网红都渴望在短视频内“一夜爆红”。即速应用团队对多商家小程序进行升级,打造了咫尺同城圈:“同城探店营销助手”,不仅完善商家营销技巧,还助力探店网红玩转本地生活服务。 -
阿坝小程序代理
阿坝藏族羌族小程序代理公司有哪些?阿坝藏族羌族小程序代理平台哪个好?阿坝藏族羌族小程序代理商怎么收费,代理政策如何?下面就让即速应用产品经理jisuapp.cn来告诉你吧!