介绍
小编给大家分享一下微信小程序如何实现用户自定义模版的功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
1,新建一个wxml(为测试方便,这里将wxml文件建立在家里目录下)
/home/home/botmenu。wxml:
& lt; template name=癰ottommenu"比; & lt;才能view 类=癰ottomposition"比; ,才能& lt; navigator 类=癷tem_info", url=? ./home/home"比; ,,,,& lt; https://www.yisu.com/zixun/image src=" . ./img/sy.png "> 图片> <文本>首页文本> 导航><图像src=" . ./img/xx.png "> 图像> <文本>消息文本> 导航> <图像src=" . ./img/lz.png "> 图像> <文本>工具文本> 导航> <图像src=" . ./img/wo.png "> 图像> <文本>我文本> 导航> 视图> 模板>
2,新建wxs
/home/home/botmenu。wxs:
.bottomposition { ,宽度:100%; ,高度:10%; 位置:大敌;固定; ,溢出:隐藏; ,左:0; ,上图:90%; z - index: 1100; ,显示:flex; ,border-top: 1 rpx solid #达达达; } .item_info { ,宽度:25%; ,高度:100%; ,显示:flex; ,对齐项目:中心; ,flex-direction:列; ,justify-content:中心; } .item_info image  { ,宽度:20 px; ,高度:20 px; } .item_info text  { ,margin-top: 5 px; ,字体大小:12 px; } .infolist { ,保证金:10 px; ,填充:0,10 px; ,字体大小:12 px; }
3页面引用
& lt; https://www.yisu.com/zixun/import src=" . ./home/home.wxml "/> <视图类="信息"> <模板=" bottommenu "> 模板> 视图>
4页面样式引用
@import “. ./home/home.wxss"
5,指数。js中数据的数据:
数据:,{ ,tool_list: [{ 名称:“才能在JavaScript线代码美化,格式化工具“, url:才能“http://tools.jb51.net/code/js" },{ 名称:“才能json代码在线格式化/美化/压缩/编辑/转换工具“, url:才能“http://tools.jb51.net/code/jsoncodeformat" },{ 名称:“才能中文繁体字简体字转换(繁简转换)工具“, url:才能“http://tools.jb51.net/transcoding/convertzh" },{ 名称:“才能正则表达式在线生成工具“, url:才能“http://tools.jb51.net/regex/create_reg" },{ 名称:才能“XML代码在线格式化美化工具“, url:才能“http://tools.jb51.net/code/xmlcodeformat" },{ 名称:“才能在线科学计算器“, url:才能“http://tools.jb51.net/jisuanqi/jsqkexue" },{ 名称:“才能BASE64编码解码工具“, url:才能“http://tools.jb51.net/transcoding/base64" ,}] },
6,指数。wxml
& lt; !——index.wxml祝辞 & lt; view 类=& # 39;用户信息# 39;在脚本之家在线工具& lt;/view> & lt; view  wx:=皗{tool_list}}“,类=癷nfolist"比; ,& lt; text> {{item.name}},安康,{{item.url}} & lt;/text> & lt;/view> https://www.yisu.com/zixun/& lt; import  src=" . ./home/home.wxml "/> <视图类="信息"> <模板=" bottommenu "> 模板> 视图>
以上是“微信小程序如何实现用户自定义模版的功能”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!