weex 项目开发(五)自定义 过滤函数 和 混合 及 自定义 Header 组件
1.自定义 过滤函数
src / filters / index.js
/*** 自定义 过滤函数*/
export function host (url) {if (!url) return ''const host = url.replace(/^https?:\/\//, '').replace(/\/.*$/, '')const parts = host.split('.').slice(-3)if (parts[0] === 'www') parts.shift()return parts.join('.')
}export function https (url) {const env = weex.config.env || WXEnvironmentif (env.platform === 'iOS' && typeof url === 'string') {return url.replace(/^http\:/, 'https:')}return url
}export function timeAgo (time) {const between = Date.now() / 1000 - Number(time)if (between < 3600) {return pluralize(~~(between / 60), ' minute')} else if (between < 86400) {return pluralize(~~(between / 3600), ' hour')} else {return pluralize(~~(between / 86400), ' day')}
}function pluralize (time, label) {if (time === 1) {return time + label}return time + label + 's'
}export function unescape (text) {let res = text || '';[['<p>', '\n'],['&', '&'],['&', '&'],[''', '\''],[''', '\''],['/', '/'],[''', '\''],['/', '/'],['<', '<'],['>', '>'],[' ', ' '],['"', '"']].forEach(pair => {res = res.replace(new RegExp(pair[0], 'ig'), pair[1])})return res
}
2.自定义 混合 函数
src / mixins / index.js
/*** 混合*/
export default {methods: {jump (to) {if (this.$router) {this.$router.push(to)}}}
}
3.自定义 Header 组件
src / components / Header.vue
Header.vue
<!-- Header 组件 -->
<template><div class="wrapper"><div class="scan"><text class="ic iconfont"></text><text class="txt">扫一扫</text></div><text class="search iconfont" @click="jumpWeb()"> 搜索商品,共8888款好物</text><div class="notice"><text class="ic iconfont"></text><text class="txt">消息</text></div></div>
</template><script>var navigator = weex.requireModule('navigator');import util from '../utils/util.js';export default {data () {return {//}},created () {//},methods: {jumpWeb (_url) {if(!_url) _url = 'http://m.you.163.com/search';const url = this.$getConfig().bundleUrl;navigator.push({url: util.setBundleUrl(url, 'page/webview.js?weburl='+_url) ,animated: "false"});}}}
</script><style scoped>.iconfont {font-family:iconfont;}.wrapper{position: fixed;top: 0;left: 0;right: 0;height: 114px;padding-top: 34px;display:flex;flex-wrap: nowrap;flex-direction: row;justify-content: space-around;z-index: 101;background-color: #fafafa;opacity: .99;}.scan,.notice{height: 80px;width: 96px}.ic,.txt,.search{text-align: center;color:#666;font-weight: 300;}.ic{font-size: 32px;}.txt{font-size: 18px;}.search {flex: 1;height: 60px;font-size: 26px;padding-top: 13px;background-color: #ededed;border-radius: 8px;}
</style>
4.页面调用
src / pages / Home / Home.vue
Home.vue
<!-- 首页 -->
<template><div><!-- 顶部标题栏 --><home-header></home-header></div>
</template><script>import Header from '../../components/Header.vue';export default {name: 'Home',components: {'home-header': Header,},data: () => ({//}),created () {//},methods: {//}};
</script>
5.效果图
转载于:https://www.cnblogs.com/crazycode2/p/7989057.html
weex 项目开发(五)自定义 过滤函数 和 混合 及 自定义 Header 组件相关推荐
- php 自定义 引用函数,php总结6——自定义函数、引用传值
6.1 自定义函数 function 函数名称(参数[=默认值],参数[=默认值]...){ 函数体 [return val]; } 1) 无参数无返回 2) 有参数无返回 3) 有参数有返回 函数中 ...
- 17.项目开发中遇到的问题(this.$parent.$parent子组件调父组件的父组件的方法不可用问题)
前言: 在今天的项目开发中,遇到了一个问题,就是通过this.$parent.$parent.getHostInf()无法去调用其父组件的父组件的方法(因为此时获取的不是其父组件,而是包含父组件的一个 ...
- [Linux驱动开发五]实现ioctl函数
目录 一.前言 1.1 ioctl用来做什么? 1.2 ioctl和unlock_ioctl区别? (1)ioctl()主要用于应用层系统调用 (2)unlock_ioctl主要用于驱动层系统调用 1 ...
- java怎样实现自定义过滤关键词_SpringSecurity学习之自定义过滤器的实现代码
我们系统中的认证场景通常比较复杂,比如说用户被锁定无法登录,限制登录IP等.而SpringSecuriy最基本的是基于用户与密码的形式进行认证,由此可知它的一套验证规范根本无法满足业务需要,因此扩展势 ...
- WPF 项目开发入门(五)ListView列表组件 与 Expander组件
WPF 项目开发入门(一) 安装运行 WPF 项目开发入门(二) WPF 页面布局 WPF 项目开发入门(三)WPF 窗体与页面 WPF 项目开发入门(四) MVVM 模式 与 TreeView树组件 ...
- WPF 项目开发入门(一) 安装运行
WPF 项目开发入门(一) 安装运行 WPF 项目开发入门(二) WPF 页面布局 WPF 项目开发入门(三)WPF 窗体与页面 WPF 项目开发入门(四) MVVM 模式 与 TreeView树组件 ...
- WPF 项目开发入门(三)WPF 窗体与页面
WPF 项目开发入门(一) 安装运行 WPF 项目开发入门(二) WPF 页面布局 WPF 项目开发入门(三)WPF 窗体与页面 WPF 项目开发入门(四) MVVM 模式 与 TreeView树组件 ...
- WPF 项目开发入门(十)DevExpress 插件+NHibernate 登录实现
WPF 项目开发入门(一) 安装运行 WPF 项目开发入门(二) WPF 页面布局 WPF 项目开发入门(三)WPF 窗体与页面 WPF 项目开发入门(四) MVVM 模式 与 TreeView树组件 ...
- WPF 项目开发入门(二) WPF 页面布局
WPF 项目开发入门(一) 安装运行 WPF 项目开发入门(二) WPF 页面布局 WPF 项目开发入门(三)WPF 窗体与页面 WPF 项目开发入门(四) MVVM 模式 与 TreeView树组件 ...
- 自定义防抖函数五步应对复杂需求
防抖定义 某些频繁操作的事件会影响性能,"防抖"可以用来减少事件的响应频次,当事件触发的时候,相对应的函数并不会立即触发,而是会进行等待,只有等待了一段时间之后,事件停止触发,此时 ...
最新文章
- 职场PUA到底有多可怕?
- 【数学建模】线性规划模型MATLAB求解(最优化)
- 你相亲成功的几率有多高?机器学习硬核预测
- 常见网络命令介绍及使用
- 20220130---CTF WEB方向---命令执行和URL解码
- c++中初始化列表顺序和声明顺序一致
- 学科分类号查询 计算机工程,学科 分类号查询表.doc
- TFS2010 - 强制撤销签出
- 微型计算机的微处理器芯片集成了,微型计算机的微处理器芯片上集成了什么东西...
- dis的前缀单词有哪些_按前后缀分类单词——dis前缀的名词
- Python实现基于ClipCap的看图说话Image Caption模型
- windows2003通过iis配置ftp服务器
- 34岁的困境!测试工程师如何突破职业瓶颈?
- declare 简单用法
- 摄影基础之【**相机画幅、人眼视角范围**】
- zabbix用户和组权限、admin密码的修改
- BZOJ1005 [HNOI2008]明明的烦恼
- electron中showMessageBox里关于选择按钮回调函数不执行的错误
- VC++多线程封装类(附源码)
- 2021-07-04 IP地址与子网掩码
热门文章
- java的css的块_CSS基础知识(概念、块级元素、行内元素、选择器)
- 2021-09-02Hive
- Information Extraction
- Lucene的几种分词系统
- Playing Atari with Deep Reinforcement Learning 中文 讲解3
- python备注(持续更新……)
- 矩阵运算中的trick
- 378.有序矩阵中第k小的元素(力扣leetcode) 博主可答疑该问题
- rsync linux 教程,rsync 用法教程
- EPPlus.Core 1.5.4 报错 font '?' cannot be found docker core运行时2.1.0 alpine镜像 缺失微软字体...