接上一篇博客“Framework7+Framework7-vue+vue踩坑记（二）”，这里继续 framework7 + vue + framework7-vue 踩坑第三波。
1. Notification组件 framework7-vue没有该组件，使用framework7的方式实现，代码如下：
1
2
3
4
this .$f7.addNotification({
title : 'Framework7' ,
message : 'This is a simple notification message with title and message'
})
2. picker组件 framework7-vue没有该组件，使用framework7的方式实现，代码如下：
1
2
3
4
5
6
<f7-list form >
<f7-list-item >
<f7-input type ="text" placeholder ="Your iOS device" id ="picker-device" >
</f7-input >
</f7-list-item >
</f7-list >
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
<script>
export default {
mounted () {
let pickerDevice = this .$f7.picker({
input : '#picker-device' ,
cols : [
{
textAlign : 'center' ,
values : [
'iPhone 4' ,
'iPhone 4S' ,
'iPhone 5' ,
'iPhone 5S' ,
'iPhone 6' ,
'iPhone 6 Plus' ,
'iPad 2' ,
'iPad Retina' ,
'iPad Air' ,
'iPad mini' ,
'iPad mini2' ,
'iPad mini3' ]
}
]
})
}
}
</script>
3. 下拉刷新 下拉刷新是在f7-page中加上pull-to-refresh，以下是代码实现：
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
<template >
<f7-page pull-to-refresh @ptr:refresh ="onRefresh" >
<f7-navbar title ="Pull To Refresh" back-link ="Back" slding >
<f7-nav-right >
<f7-link icon ="icon icon-bars" open-panel ="left" > </f7-link >
</f7-nav-right >
</f7-navbar >
<f7-list media-list >
<f7-list-item v-for ="item in items"
:media ="item.media"
:title ="item.title"
:subtitle ="item.subtitle"
></f7-list-item >
<f7-list-label >
<p >
<div > Just pull page down to let the magic happen.</div >
<div >
Note that pull-to-refresh feature is optimised for
touch and native scrolling so it may not work on
desktop browser.
</div >
</p >
</f7-list-label >
</f7-list >
</f7-page >
</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
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
<script>
export default {
data () {
return {
items : [
{
media : '<img src="./static/image/photo12.jpg" width="44" />' ,
title : 'Yellow Submarie' ,
subtitle : 'Beatles'
}, {
media : '<img src="./static/image/photo13.jpg" width="44" />' ,
title : 'Don\'t Stop Me Now' ,
subtitle : 'Queen'
}, {
media : '<img src="./static/image/photo14.jpg" width="44" />' ,
title : 'Billie Jean' ,
subtitle : 'Michael Jackson'
}
]
}
},
methods : {
onRefresh : function (
let self = this
setTimeout(function (
let songs = [
'Yellow Submarine' ,
'Don\'t Stop Me Now' ,
'Billie Jean' ,
'Californication'
]
let authors = [
'Beatles' ,
'Queen' ,
'Michael Jackson' ,
'Red Hot Chili Peppers'
]
let item = {
media : '<img src="./static/image/photo' +
Math .floor(Math .random() * 14 ) +
'.jpg" width="44" />' ,
title : songs[Math .floor(Math .random() * songs.length)],
subtitle : authors[Math .floor(Math .random() * authors.length)]
}
self.items.unshift(item)
self.$f7.pullToRefreshDone()
}, 2000 )
}
}
}
</script>
4. View间链接 将在 left view 中的链接加载的页面放进 main view中，在 a 标签上加上 data-view="###" （###为css选择器）即可
5. sortable list 在f7-list的sortable属性为true时，通过v-for="item in items"循环渲染列表，触发@sortable:sort事件时，不能对items进行操作，framework7-vue中sortable并没有操作items，而是对Dom树的操作，而v-for是先完成virtual dom树的修改再比对修改前的virtual dom树，然后对Dom树只修改变化的部分，而不是重排，这样会导致Dom树的列表又再一次按照我们之前的操作排列一次
6. f7-swiper 该组件使用nested布局时无法正常显示导航条，使用原生实现，主要是该vue组件将f7-swiper中的内容全放到.swiper-wrapper中，因此就算自定义导航条的css选择器也无法正常显示
至此，官网的demo已重构完毕，目前发现的需要注意的点就这些。
使用 framework7-vue 重构后的项目地址：vue-framework7 ，欢迎star
项目初始化时，framework7 的参数中，cache 设置为 false 无效，原因未知。
