Framework7+Framework7-vue+vue踩坑记（二）
2017-07-19
|
webapp

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

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

f7-message中无法在信息的text属性中使用<img src="##">标签，因为vue的模板语法是将html标签直接转换成字符串的，而在这篇博客编写时官方文档也没给出f7-messages中如何插入图片，如要实现以下效果



信息列表

实现代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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"
  >
    <img v-if="message.img" :src="message.img" />
  </f7-message>
</f7-messages>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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的样式进行修改，如下：

1
2
3
4
5
6
<style lang="less" scoped>
.toolbar.messagebar{
  transform: none;
  transition: 0ms;
}
</style>

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

1
2
3
4
5
6
7
8
9
<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功能，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//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的渲染

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//这里只取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进行跳转，完整写法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
//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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//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” 部分。记住，这时不能使用层级路由，就按照官方文档最初始的写法，代码实现如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<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>
1
2
3
4
5
6
7
8
9
10
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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，持续更新中，欢迎star

vue
framework7
转载请注明出处，谢谢！
觉得写得不错就赏倍奶茶喝吧
赏
微信打赏
微信打赏
支付宝打赏
支付宝打赏
上一篇：Framework7+Framework7-vue+vue踩坑记（一） 下一篇：Framework7+Framework7-vue+vue踩坑记（三）
分享到：