微信小程序用户自定义模版用法实例分析


Posted in Javascript onNovember 28, 2017

本文实例讲述了微信小程序用户自定义模版用法。分享给大家供大家参考,具体如下:

1、新建一个wxml(为测试方便,这里将wxml文件建立在home目录下)

/home/home/botmenu.wxml:

<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>

2、新建wxss

/home/home/botmenu.wxss:

.bottomposition{
 width: 100%;
 height: 10%;
 position: fixed;
 overflow: hidden;
 left: 0;
 top: 90%;
z-index: 1100;
 display: flex;
 border-top: 1rpx 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;
}

3、页面引用

<import src="../home/home.wxml"/>
<view class="info">
 <template is="bottommenu"></template>
</view>

4、页面样式引用

@import "../home/home.wxss";

5、index.js中的data数据:

data: {
 tool_list:[{
  name:"在线JavaScript代码美化、格式化工具",
  url:"http://tools.3water.com/code/js"
 },{
  name:"json代码在线格式化/美化/压缩/编辑/转换工具",
  url:"http://tools.3water.com/code/jsoncodeformat"
 },{
  name:"中文繁体字简体字转换(繁简转换)工具",
  url:"http://tools.3water.com/transcoding/convertzh"
 },{
  name:"正则表达式在线生成工具",
  url:"http://tools.3water.com/regex/create_reg"
 },{
  name:"XML代码在线格式化美化工具",
  url:"http://tools.3water.com/code/xmlcodeformat"
 },{
  name:"在线科学计算器",
  url:"http://tools.3water.com/jisuanqi/jsqkexue"
 },{
  name:"BASE64编码解码工具",
  url:"http://tools.3water.com/transcoding/base64"
 }]
 },

6、index.wxml

<!--index.wxml-->
<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>

页面测试效果:

微信小程序用户自定义模版用法实例分析

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
Javascript load Page,load css,load js实现代码
Mar 31 Javascript
Js保留小数点的4种效果实现代码分享
Apr 12 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
Jun 06 Javascript
javascript常用方法汇总
Dec 02 Javascript
js控制TR的显示隐藏
Mar 04 Javascript
简单实现JS倒计时效果
Dec 23 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
canvas绘制七巧板
Feb 03 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
Jul 17 Javascript
详解Webpack实战之构建 Electron 应用
Dec 25 Javascript
基于Vue渲染与插件的加载顺序的问题详解
Mar 05 Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 #Javascript
浅谈vue中慎用style的scoped属性
Nov 28 #Javascript
元素全屏的设置与监听实例
Nov 28 #Javascript
vue2实现数据请求显示loading图
Nov 28 #Javascript
Vue2仿淘宝实现省市区三级联动
Apr 15 #Javascript
ligerUI---ListBox(列表框可移动的实例)
Nov 28 #Javascript
基于vue2实现上拉加载功能
Nov 28 #Javascript
You might like
在字符串指定位置插入一段字符串的php代码
2010/02/16 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
PHP超全局数组(Superglobals)介绍
2015/07/01 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
PHP SESSION机制的理解与实例
2019/03/22 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
BootStrap按钮标签及基本样式
2016/11/23 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
python实现从字典中删除元素的方法
2015/05/04 Python
python获取中文字符串长度的方法
2018/11/14 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
Python Django切换MySQL数据库实例详解
2019/07/16 Python
PyCharm中代码字体大小调整方法
2019/07/29 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
python 多线程中join()的作用
2020/10/29 Python
python空元组在all中返回结果详解
2020/12/15 Python
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
params有什么用
2016/03/01 面试题
精神文明建设先进工作者事迹材料
2014/05/02 职场文书
国际贸易系求职信
2014/08/09 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
2015年纪委工作总结
2015/05/13 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书
MySQL索引失效场景及解决方案
2022/07/23 MySQL