本文主要介绍微信小程序用户自定义模版用法,结合实例形式较为详细的分析了微信小程序自定义模板的定义、数据调用、布局设置等简单使用技巧,需要的朋友可以参考下。
1、新建一个wxml(为测试方便,这里将wxml文件建立在home目录下)
/home/home/botmenu.wxml:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | < template name = "bottommenu" >
< view class = "bottomposition" >
< navigator class = "item_info" url = "../home/home" >
< image src = "../img/sy.png" ></ image >
< text >首页</ text >
</ navigator >
< navigator class = "item_info" url = "/pages/home/home" >
< image src = "../img/xx.png" ></ image >
< text >消息</ text >
</ navigator >
< navigator class = "item_info" url = "/pages/home/home" >
< image src = "../img/lz.png" ></ image >
< text >工具</ text >
</ navigator >
< navigator class = "item_info" url = "/pages/home/home" >
< image src = "../img/wo.png" ></ image >
< text >我</ text >
</ navigator >
</ view >
</ template >
|
Salin selepas log masuk
2、新建wxss
/home/home/botmenu.wxss:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | .bottomposition{
width : 100% ;
height : 10% ;
position : fixed ;
overflow : hidden ;
left : 0 ;
top : 90% ;
z-index : 1100 ;
display : flex;
border-top : 1 rpx solid #dadada ;
}
.item_info {
width : 25% ;
height : 100% ;
display : flex;
align-items: center ;
flex- direction : column;
justify- content : center ;
}
.item_info image {
width : 20px ;
height : 20px ;
}
.item_info text {
margin-top : 5px ;
font-size : 12px ;
}
.infolist{
margin : 10px ;
padding : 0 10px ;
font-size : 12px ;
}
|
Salin selepas log masuk
3、页面引用
1 2 3 4 | < import src = "../home/home.wxml" />
< view class = "info" >
< template is = "bottommenu" ></ template >
</ view >
|
Salin selepas log masuk
4、页面样式引用
1 | @import "../home/home.wxss" ;
|
Salin selepas log masuk
5、index.js中的data数据:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | data: {
tool_list:[{
name: "在线JavaScript代码美化、格式化工具" ,
url: "http://tools.jb51.net/code/js"
},{
name: "json代码在线格式化/美化/压缩/编辑/转换工具" ,
url: "http://tools.jb51.net/code/jsoncodeformat"
},{
name: "中文繁体字简体字转换(繁简转换)工具" ,
url: "http://tools.jb51.net/transcoding/convertzh"
},{
name: "正则表达式在线生成工具" ,
url: "http://tools.jb51.net/regex/create_reg"
},{
name: "XML代码在线格式化美化工具" ,
url: "http://tools.jb51.net/code/xmlcodeformat"
},{
name: "在线科学计算器" ,
url: "http://tools.jb51.net/jisuanqi/jsqkexue"
},{
name: "BASE64编码解码工具" ,
url: "http://tools.jb51.net/transcoding/base64"
}]
},
|
Salin selepas log masuk
6、index.wxml
1 2 3 4 5 6 7 8 9 | < view class = "'userinfo'" >脚本之家在线工具</ view >
< view wx:for = "{{tool_list}}" class = "infolist" >
< text >{{item.name}} - {{item.url}}</ text >
</ view >
< import src = "../home/home.wxml" />
< view class = "info" >
< template is = "bottommenu" ></ template >
</ view >
|
Salin selepas log masuk
以上内容就是微信小程序用户自定义模版的功能实现,希望能帮助到大家。
相关推荐:
微信小程序实现动态改变view标签宽度和高度的方法
微信小程序开发入门实例
微信小程序如何实现图片放大预览功能
Atas ialah kandungan terperinci 微信小程序用户自定义模版的功能实现. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!