微信小程序自定义模板的功能实现

主要介绍了微信小程序自定义模板的使用方法，并结合实例详细分析了微信小程序自定义模板的定义、数据调用、布局设置等简单技巧。有需要的可以参考一下。

1.创建一个新的wxml(为了方便测试，wxml文件设置在这里的主目录中)

/home/home/botmenu.wxml:

& lt模板名称= & quot底部菜单& quot& gt& ltview class = & quot底部位置& quot& gt& ltnavigator class = & quotitem_info&quoturl = & quot../home/home & quot；& gt& ltimage src = & quot../img/sy . png & quot；& gt& lt/image & gt；& lttext & gt主页</text & gt；& lt/navigator & gt；& ltnavigator class = & quotitem_info&quoturl = & quot/pages/home/home & quot；& gt& ltimage src = & quot../img/xx . png & quot；& gt& lt/image & gt；& lttext & gt消息

/home/home/botmenu.wxss:

。bottomposition{宽度:100%；身高:10%；位置:固定；溢出:隐藏；左:0；top:90%；Z-指数:1100；显示器:flexborder -top:1 rpx solid # dada da；}.item _ info { width:25%；身高:100%；显示器:flexalign -项:居中；flex -方向:列；justify -内容:居中；}.item _ info image { width:20px；高度:20px}.item _ info text { margin -top:5px；font -size:12px；}.infolist { margin:10px；填充:0 10pxfont -size:12px；}3.页面参考

& lt导入src = & quot../home/home . wxml & quot；/& gt；& ltview class = & quot信息& quot& gt& lt模板是= & quot底部菜单& quot& gt& lt/template & gt；& lt/view & gt；4.页面样式参考

@ import & quot../home/home . wxss & quot；；5.index.js中的数据data:

数据:{ tool _ list:[{ name:& quot；在线JavaScript代码美化和格式化工具&quot，URL:& quot；{ http://tools.jb51.net/code/js" }，{姓名:& quotJson在线代码格式化/美化/压缩/编辑/转换工具&quot，URL:& quot；{ http://tools.jb51.net/code/jsoncodeformat" }，{姓名:& quot中文繁简转换工具”，网址:& quot{ http://tools.jb51.net/transcoding/convertzh" }，{姓名:& quot正则表达式在线生成工具&quot，URL:& quot；{ http://tools.jb51.net/regex/create_reg" }，{姓名:& quot代码在线格式化和美化工具&quot，URL:& quot；{ http://tools.jb51.net/code/xmlcodeformat" }，{姓名:& quot在线科学计算器”，网址:& quot{ http://tools.jb51.net/jisuanqi/jsqkexue" }，{姓名:& quotBASE64编码和解码工具的urlhttp://tools.jb51.net/transcoding/base64" }]}，6、index.wxml

& lt！--index.wxml-->& ltview class = & # 039userinfo & # 039& gt脚本房屋在线工具

相关建议:

微信小程序动态改变视图标签宽度和高度的方法

微信小程序开发入门

微信小程序如何实现图片放大预览功能？