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

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

浏览量:4213 时间: 来源: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.

游戏列表

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎