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


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 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
js登录弹出层特效
Mar 07 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
Aug 15 Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 Javascript
JS验证不重复验证码
Feb 10 Javascript
vue使用drag与drop实现拖拽的示例代码
Sep 07 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
Vue源码解析之数据响应系统的使用
Apr 24 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 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 Calender(日历)代码分享
2014/01/03 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
JS实现仿FLASH效果的竖排导航代码
2015/09/15 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
浅析JavaScript异步代码优化
2019/03/18 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
python绘制分布折线图的示例
2020/09/24 Python
python操作链表的示例代码
2020/09/27 Python
英国航空官网:British Airways
2016/09/11 全球购物
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
总经理办公室主任岗位职责
2013/11/12 职场文书
四年级评语大全
2014/04/21 职场文书
乡镇保密工作责任书
2014/07/28 职场文书
个人委托书怎么写
2014/09/17 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书
Html5获取用户当前位置的几种方式
2022/01/18 HTML / CSS
Vue Mint UI mt-swipe的使用方式
2022/06/05 Vue.js