Framework7+Framework7-vue+vue踩坑记（二）

原文地址：https://yawuling.com/201707171854.html

接上一篇博客 Framework7+Framework7-vue+vue踩坑记（一），这里继续framework7+vue+framework7-vue踩坑第二波，同样通过重构官网demo来运用framework-vue。

1、`f7-message`组件图片显示问题

f7-message中无法在信息的text属性中使用[图片上传失败...(image-eaca70-1531214814977)]标签，因为vue的模板语法是将html标签直接转换成字符串的，而在这篇博客编写时官方文档也没给出f7-messages中如何插入图片，如要实现以下效果

信息列表

实现代码如下：

<f7-messages>
  <f7-message v-for="message in messages"
    :text="message.text"
    :label="message.label"
    :date="message.date"
    :name="message.name"
    :avatar="message.avatar"
    :type="message.type"
    :day="message.day"
    :time="message.time"
  >
    ![](message.img)
  </f7-message>
</f7-messages>

我们可以看到f7-message的源代码中有一个不具名slot，所以父组件的内容会被插入到该slot所在的Dom位置，这一点是官方文档所没有说明的

<template>
  <div :class="classesObject" @click="onClick">
    {{day}} <span v-if="time">{{time}}</span>
    <slot name="start"></slot>
    <div class="message-name" v-if="name" @click="onNameClick">{{name}}</div>
    <div class="message-text" @click="onTextClick">
      //不具名slot
      <slot>{{text}}</slot>
      <div class="message-date" v-if="date">{{date}}</div>
    </div>
    <div class="message-avatar" v-if="avatar" :style="{'background-image': 'url(' + avatar + ')'}" @click="onAvatarClick"></div>
    <div class="message-label" v-if="label">{{label}}</div>
    <slot name="end"></slot>
  </div>
</template>

2、`f7-messagebar`

要使用f7-messagebar需要在组件的f7-page加上no-toolbar和toolbar-fixed，使用no-toolbar会隐藏掉所有的.toolbar，而f7-message渲染后根标签是带有.toolbar，因此需要对f7-toolbar的样式进行修改，如下：

<style lang="less" scoped>
.toolbar.messagebar{
  transform: none;
  transition: 0ms;
}
</style>

此外，f7-message中的textarea要进行数据双向绑定，直接在组件中使用v-model即可，代码如下：

<f7-messagebar
  placeholder="Message"
  send-link="Send"
  @submit="onSubmit"
  v-model="messageText">
  <f7-link slot="before-textarea" class="icon-only">
    <f7-icon icon="icon icon-camera"></f7-icon>
  </f7-link>
</f7-messagebar>

3、 `f7-picker-modal`内嵌toolbar

2017.7.24 更新
修改，不能使用navbar，会出现位置错乱，改为toolbar。此外，popup需放在app.vue中，不能放在页面组件中，否则navbar也会出现位置错乱

跟写一个页面的结构一样，在f7-picker-modal内部直接加入即可，在f7-picker-modal中的toolbar属于相对定位，所以不需要在f7-picker-modal中加上toolbar-through

4、`$router`跳转到首页的方法

$router默认是使用ajax加载页面的，.vue页面中的html结构并不完整，framework7-vue是通过解析.vue中的内容，然后将内容插入到对应的位置，并实现过渡动画。因此，如果在router.js中加上app.vue的路由，那就是将app.vue的结构再嵌进f7-pages中，是无法正常显示的。目前我没有找到官方的方法来直接跳转到首页，因此是将app.vue中f7-pages里面的部分提取出来作为一个组件（结构跟其他.vue页面的结构一样，所以可以加上路由进行跳转），比如叫做mainPage.vue在app.vue中引入该组件，放到f7-pages里面，之后要跳转到首页就跟跳转到其他页面一样，将链接指向mainPage.vue的路由即可

2017.7.25 更新
通过给主页面的f7-page加上name="main"，在路由中使用this.$router.load({pageName: 'main'})即可跳转到首页，无需将首页内容单独抽出作为一个组件

5、tabbar的实现

在framework7官网中，根据f7+vue的官方文档的Navigation / Router页面，实现tabbar功能，如下：

<f7-toolbar tabbar>
  <f7-link
    route-tab-link="#tab1"
    icon-f7="help"
    href="/navbarsAndToolbars/tabbar/"
  ></f7-link>
  <f7-link
    route-tab-link="#tab2"
    icon-f7="drawers"
    icon-badge="9"
    badge-color="red"
    href="/navbarsAndToolbars/tabbar/tab2/"
  ></f7-link>
  <f7-link
    route-tab-link="#tab3"
    icon-f7="cloud"
    href="/navbarsAndToolbars/tabbar/tab3/"
  ></f7-link>
  <f7-link
    route-tab-link="#tab4"
    icon-f7="camera"
    href="/navbarsAndToolbars/tabbar/tab4/"
  ></f7-link>
</f7-toolbar>
<f7-tabs>
  <f7-tab route-tab-id="tab1"></f7-tab>
  <f7-tab route-tab-id="tab2"></f7-tab>
  <f7-tab route-tab-id="tab3"></f7-tab>
  <f7-tab route-tab-id="tab4"></f7-tab>
</f7-tabs>

//route.js
{
  path: '/navbarsAndToolbars/tabbar/',
  component: require('./pages/navbarsAndToolbars/tabbar.vue'),
  tabs: [
    {
      path: '/',
      tabId: 'tab1',
      component: require('./pages/navbarsAndToolbars/tab1.vue')
    }, {
      path: '/tab2/',
      tabId: 'tab2',
      component: require('./pages/navbarsAndToolbars/tab2.vue')
    }, {
      path: '/tab3/',
      tabId: 'tab3',
      component: require('./pages/navbarsAndToolbars/tab3.vue')
    }, {
      path: '/tab4/',
      tabId: 'tab4',
      component: require('./pages/navbarsAndToolbars/tab4.vue')
    }
  ]
}

以上代码并不起作用，这段代码渲染后，在.page-content中渲染出来的f7-tab如下所示：

f7-tab的渲染

</div>

再查看framework7-vue中的tab.vue的源代码，发现tab标签是在渲染的时候通过比对$router中的tabId跟tab的id是否相同，若相同，则在f7-tab中渲染tabId对应的component

//这里只取tab.vue中渲染的那段代码
render: function (c) {
  var self = this;

  const activeTab = self.routeInfo.activeTab;

  return c('div', {
    staticClass: 'tab',
    attrs: {
      id: self.id
    },
    class: {
      'active': (activeTab) ? activeTab.tabId === self.id : self.active
    },
    on: {
      'tab:show': self.onTabShow,
      'tab:hide': self.onTabHide
    }
  },
    //通过比对f7-tab标签的id和$router.tabId是否相同，相同则渲染对应的component
    [activeTab && activeTab.tabId === self.id ? c(activeTab.component, {tag: 'component', props: self.$route.params}) : self.$slots.default]
  );
}

从上面的代码可以看出，f7-tab的内容时在页面跳转的时候进行渲染的，而通过tab-link进行tab页的切换只是修改f7-tab的类来显示对应的tab页，是无法显示其他tab页的内容的，需将tab-link改为route-tab-link，这样在tabbar中的a标签才会设置成active，而跳转则是通过href进行跳转，完整写法如下：

//tabbar.vue
<template>
  <f7-page toolbar-fixed no-toolbar data-page="toolbar">
    <f7-navbar title="Tab Bar" back-link="Back" sliding>
      <f7-nav-right>
        <f7-link icon="icon icon-bars" open-panel="left"></f7-link>
      </f7-nav-right>
    </f7-navbar>
    <f7-toolbar tabbar>
      <f7-link
        route-tab-link="#tab1"
        href="/navbarsAndToolbars/tabbar/"
        active>
        <f7-icon f7="help" class="inactive"></f7-icon>
        <f7-icon f7="help_fill" class="active"></f7-icon>
      </f7-link>
      <f7-link
        route-tab-link="#tab2"
        href="/navbarsAndToolbars/tabbar/tab2/">
        <f7-icon f7="drawers" class="inactive">
          <f7-badge color="red">9</f7-badge>
        </f7-icon>
        <f7-icon f7="drawers_fill" class="active">
          <f7-badge color="red">9</f7-badge>
        </f7-icon>
      </f7-link>
      <f7-link
        route-tab-link="#tab3"
        href="/navbarsAndToolbars/tabbar/tab3/">
        <f7-icon f7="cloud" class="inactive"></f7-icon>  
        <f7-icon f7="cloud_fill" class="active"></f7-icon>
      </f7-link>
      <f7-link
        route-tab-link="#tab4"
        href="/navbarsAndToolbars/tabbar/tab4/">
        <f7-icon f7="camera" class="inactive"></f7-icon>
        <f7-icon f7="camera_fill" class="active"></f7-icon>
      </f7-link>
    </f7-toolbar>
    <f7-tabs>
      <f7-tab id="tab1"></f7-tab>
      <f7-tab id="tab2"></f7-tab>
      <f7-tab id="tab3"></f7-tab>
      <f7-tab id="tab4"></f7-tab>
    </f7-tabs>
  </f7-page>
</template>

<style lang="less">
.page[data-page="toolbar"]{
  .page-content{
    padding-bottom: 44px;
  }
  .toolbar{
    transform: none;
    transition: 0ms;

    .active-state{
      opacity: 1;
      transition: 0ms;
    }
    a.active{
      i.inactive{
        display: none;
      }
      i.active{
        margin-left: 0;
        color: #007aff;
      }
    }
  }
  .tabbar{
    a:not(.active){
      i.active{
        display: none;
      }
    }
  }
}
</style>

//tab1.vue
<template>
  <p>tab1</p>
</template>

//tab2.vue
<template>
  <p>tab2</p>
</template>

//tab3.vue
<template>
  <p>tab3</p>
</template>

//tab4.vue
<template>
  <p>tab4</p>
</template>

//route.js
{
  path: '/navbarsAndToolbars/tabbar/',
  component: require('./pages/navbarsAndToolbars/tabbar.vue'),
  tabs: [
    {
      path: '/',
      tabId: 'tab1',
      component: require('./pages/navbarsAndToolbars/tab1.vue')
    }, {
      path: '/tab2/',
      tabId: 'tab2',
      component: require('./pages/navbarsAndToolbars/tab2.vue')
    }, {
      path: '/tab3/',
      tabId: 'tab3',
      component: require('./pages/navbarsAndToolbars/tab3.vue')
    }, {
      path: '/tab4/',
      tabId: 'tab4',
      component: require('./pages/navbarsAndToolbars/tab4.vue')
    }
  ]
}

其实不用tab的层级路由，直接在tabbar.vue中引入Vue组件并将其放到对应的f7-tab的方式要方便多了

以上这种通过tab层级路由实现tabbar的方式，由于是在一个页面中，并且只有一个.page-content，所以当tab页滚动后，再切换到其他tab页时，此时的tab页的位置处于上一个tab页滚动后的位置。
若要实现不同tab页滚动位置不同，可以将.page-content作为tab页，并使用多个.page-content，可查看相关文档：page中的 “Page Content as Tabs” 部分。记住，这时不能使用层级路由，就按照官方文档最初始的写法，代码实现如下：

<template>
  <f7-page no-toolbar toolbar-fixed tabs no-page-content data-page="toolbar">
    <f7-navbar title="Diff Scroll Tab Bar" back-link="Back" sliding>
      <f7-nav-right>
        <f7-link icon="icon icon-bars" open-panel="left"></f7-link>
      </f7-nav-right>
    </f7-navbar>
    <f7-toolbar tabbar labels>
      <f7-link
        tab-link="#tab1"
        no-link-class
        active>
        <f7-icon f7="help" class="inactive"></f7-icon>
        <f7-icon f7="help_fill" class="active"></f7-icon>
        <span class="tabbar-label">Information</span>
      </f7-link>
      <f7-link
        tab-link="#tab2"
        no-link-class>
        <f7-icon f7="drawers" class="inactive">
          <f7-badge color="red">9</f7-badge>
        </f7-icon>
        <f7-icon f7="drawers_fill" class="active">
          <f7-badge color="red">9</f7-badge>
        </f7-icon>
        <span class="tabbar-label">Inbox</span>
      </f7-link>
      <f7-link
        tab-link="#tab3"
        no-link-class>
        <f7-icon f7="cloud" class="inactive"></f7-icon>  
        <f7-icon f7="cloud_fill" class="active"></f7-icon>
        <span class="tabbar-label">Upload</span>
      </f7-link>
      <f7-link
        tab-link="#tab4"
        no-link-class>
        <f7-icon f7="camera" class="inactive"></f7-icon>
        <f7-icon f7="camera_fill" class="active"></f7-icon>
        <span class="tabbar-label">Photos</span>
      </f7-link>
    </f7-toolbar>
    <f7-page-content tab active id="tab1"><tab1></tab1></f7-page-content>
    <f7-page-content tab id="tab2"><tab2></tab2></f7-page-content>
    <f7-page-content tab id="tab3"><tab3></tab3></f7-page-content>
    <f7-page-content tab id="tab4"><tab4></tab4></f7-page-content>
  </f7-page>
</template>

<script>
import Tab1 from './tab1'
import Tab2 from './tab2'
import Tab3 from './tab3'
import Tab4 from './tab4'

export default {
  components: { Tab1, Tab2, Tab3, Tab4 }
}
</script>

<style lang="less">
.page[data-page="toolbar"]{
  .page-content{
    padding-bottom: 44px;
  }
  .toolbar{
    transform: none;
    transition: 0ms;

    .active-state{
      opacity: 1;
      transition: 0ms;
    }
    a.active{
      i.inactive{
        display: none;
      }
      i.active{
        margin-left: 0;
        color: #007aff;
      }
    }
  }
  .tabbar{
    a:not(.active){
      i.active{
        display: none;
      }
    }
  }
}
</style>

Framework7+Framework7-vue+vue踩坑记（一）
Framework7+Framework7-vue+vue踩坑记（三）

基于framework7-vue实现的官方实例 vue-framework7，欢迎star

最后编辑于：2018.07.28 14:27:59

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,013评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,205评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,370评论 0赞 342
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,168评论 1赞 278
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,153评论 5赞 371
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,954评论 1赞 283
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,271评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,916评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,382评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,877评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,989评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,624评论 4赞 322
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,209评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,199评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,418评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,401评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,700评论 2赞 345

Framework7+Framework7-vue+vue踩坑记（二）

1、f7-message组件图片显示问题

2、f7-messagebar

3、 f7-picker-modal内嵌toolbar

4、$router跳转到首页的方法

5、tabbar的实现

推荐阅读更多精彩内容

1、`f7-message`组件图片显示问题

2、`f7-messagebar`

3、 `f7-picker-modal`内嵌toolbar

4、`$router`跳转到首页的方法