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 组件相关推荐

  1. php 自定义 引用函数,php总结6——自定义函数、引用传值

    6.1 自定义函数 function 函数名称(参数[=默认值],参数[=默认值]...){ 函数体 [return val]; } 1) 无参数无返回 2) 有参数无返回 3) 有参数有返回 函数中 ...

  2. 17.项目开发中遇到的问题(this.$parent.$parent子组件调父组件的父组件的方法不可用问题)

    前言: 在今天的项目开发中,遇到了一个问题,就是通过this.$parent.$parent.getHostInf()无法去调用其父组件的父组件的方法(因为此时获取的不是其父组件,而是包含父组件的一个 ...

  3. [Linux驱动开发五]实现ioctl函数

    目录 一.前言 1.1 ioctl用来做什么? 1.2 ioctl和unlock_ioctl区别? (1)ioctl()主要用于应用层系统调用 (2)unlock_ioctl主要用于驱动层系统调用 1 ...

  4. java怎样实现自定义过滤关键词_SpringSecurity学习之自定义过滤器的实现代码

    我们系统中的认证场景通常比较复杂,比如说用户被锁定无法登录,限制登录IP等.而SpringSecuriy最基本的是基于用户与密码的形式进行认证,由此可知它的一套验证规范根本无法满足业务需要,因此扩展势 ...

  5. WPF 项目开发入门(五)ListView列表组件 与 Expander组件

    WPF 项目开发入门(一) 安装运行 WPF 项目开发入门(二) WPF 页面布局 WPF 项目开发入门(三)WPF 窗体与页面 WPF 项目开发入门(四) MVVM 模式 与 TreeView树组件 ...

  6. WPF 项目开发入门(一) 安装运行

    WPF 项目开发入门(一) 安装运行 WPF 项目开发入门(二) WPF 页面布局 WPF 项目开发入门(三)WPF 窗体与页面 WPF 项目开发入门(四) MVVM 模式 与 TreeView树组件 ...

  7. WPF 项目开发入门(三)WPF 窗体与页面

    WPF 项目开发入门(一) 安装运行 WPF 项目开发入门(二) WPF 页面布局 WPF 项目开发入门(三)WPF 窗体与页面 WPF 项目开发入门(四) MVVM 模式 与 TreeView树组件 ...

  8. WPF 项目开发入门(十)DevExpress 插件+NHibernate 登录实现

    WPF 项目开发入门(一) 安装运行 WPF 项目开发入门(二) WPF 页面布局 WPF 项目开发入门(三)WPF 窗体与页面 WPF 项目开发入门(四) MVVM 模式 与 TreeView树组件 ...

  9. WPF 项目开发入门(二) WPF 页面布局

    WPF 项目开发入门(一) 安装运行 WPF 项目开发入门(二) WPF 页面布局 WPF 项目开发入门(三)WPF 窗体与页面 WPF 项目开发入门(四) MVVM 模式 与 TreeView树组件 ...

  10. 自定义防抖函数五步应对复杂需求

    防抖定义 某些频繁操作的事件会影响性能,"防抖"可以用来减少事件的响应频次,当事件触发的时候,相对应的函数并不会立即触发,而是会进行等待,只有等待了一段时间之后,事件停止触发,此时 ...

最新文章

  1. 职场PUA到底有多可怕?
  2. 【数学建模】线性规划模型MATLAB求解(最优化)
  3. 你相亲成功的几率有多高?机器学习硬核预测
  4. 常见网络命令介绍及使用
  5. 20220130---CTF WEB方向---命令执行和URL解码
  6. c++中初始化列表顺序和声明顺序一致
  7. 学科分类号查询 计算机工程,学科 分类号查询表.doc
  8. TFS2010 - 强制撤销签出
  9. 微型计算机的微处理器芯片集成了,微型计算机的微处理器芯片上集成了什么东西...
  10. dis的前缀单词有哪些_按前后缀分类单词——dis前缀的名词
  11. Python实现基于ClipCap的看图说话Image Caption模型
  12. windows2003通过iis配置ftp服务器
  13. 34岁的困境!测试工程师如何突破职业瓶颈?
  14. declare 简单用法
  15. 摄影基础之【**相机画幅、人眼视角范围**】
  16. zabbix用户和组权限、admin密码的修改
  17. BZOJ1005 [HNOI2008]明明的烦恼
  18. electron中showMessageBox里关于选择按钮回调函数不执行的错误
  19. VC++多线程封装类(附源码)
  20. 2021-07-04 IP地址与子网掩码

热门文章

  1. java的css的块_CSS基础知识(概念、块级元素、行内元素、选择器)
  2. 2021-09-02Hive
  3. Information Extraction
  4. Lucene的几种分词系统
  5. Playing Atari with Deep Reinforcement Learning 中文 讲解3
  6. python备注(持续更新……)
  7. 矩阵运算中的trick
  8. 378.有序矩阵中第k小的元素(力扣leetcode) 博主可答疑该问题
  9. rsync linux 教程,rsync 用法教程
  10. EPPlus.Core 1.5.4 报错 font '?' cannot be found docker core运行时2.1.0 alpine镜像 缺失微软字体...