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


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 相关文章推荐
JS获取scrollHeight问题想到的标准问题
May 27 Javascript
有关DOM元素与事件的3个谜题
Nov 11 Javascript
深入理解JQuery keyUp和keyDown的区别
Dec 12 Javascript
jquery无法设置checkbox选中即没有变成选中状态
Mar 27 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
Javascript实现快速排序(Quicksort)的算法详解
Sep 06 Javascript
js 求时间差的实现代码
Apr 26 Javascript
详解Angular.js的$q.defer()服务异步处理
Nov 06 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
Jun 30 Javascript
Vue2.0设置全局样式(less/sass和css)
Nov 18 Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
谈谈我在vue-cli3中用预渲染遇到的坑
Apr 22 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
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
PHP合并静态文件详解
2014/11/14 PHP
php简单实现无限分类树形列表的方法
2015/03/27 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
2019/04/08 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
AngularJs中$cookies简单用法分析
2019/05/30 Javascript
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
Python实现身份证号码解析
2015/09/01 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
django迁移数据库错误问题解决
2019/07/29 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
python中的django是做什么的
2020/07/31 Python
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
Java面试题:说出如下代码的执行结果
2015/10/30 面试题
2015年元旦文艺汇演主持词
2014/03/26 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
道歉信怎么写
2015/05/12 职场文书
大学运动会通讯稿
2015/07/18 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python