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 || WXEnvironment
  if (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.效果图

posted @ 2017-12-08 22:01 每天都要进步一点点阅读(1092) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

公告

昵称：每天都要进步一点点
园龄： 8年2个月
粉丝： 320
关注： 2

2025年3月

日

一

二

三

四

五

六

每天都要进步一点点

weex 项目开发（五）自定义 过滤函数 和 混合 及 自定义 Header 组件

公告

weex 项目开发（五）自定义过滤函数和混合及自定义 Header 组件