原文地址：https://yawuling.com/201707240917.html
接上一篇博客 Framework7+Framework7-vue+vue踩坑記（二），這里繼續(xù) framework7 + vue + framework7-vue 踩坑第三波缅阳。
1. Notification組件
framework7-vue沒(méi)有該組件白对，使用framework7的方式實(shí)現(xiàn)撩满，代碼如下：
this.$f7.addNotification({
title: 'Framework7',
message: 'This is a simple notification message with title and message'
})
2. picker組件
framework7-vue沒(méi)有該組件并鸵，使用framework7的方式實(shí)現(xiàn)级零，代碼如下：
<f7-list form>
<f7-list-item>
<f7-input type="text" placeholder="Your iOS device" id="picker-device">
</f7-input>
</f7-list-item>
</f7-list>
<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邮弹，以下是代碼實(shí)現(xiàn)：
<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>
<script>
export default {
data () {
return {
items: [
{
media: '',
title: 'Yellow Submarie',
subtitle: 'Beatles'
}, {
media: '',
title: 'Don\'t Stop Me Now',
subtitle: 'Queen'
}, {
media: '',
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 中的鏈接加載的頁(yè)面放進(jìn) main view中，在 a 標(biāo)簽上加上 data-view="###" （###為css選擇器）即可
5. sortable list
在f7-list的sortable屬性為true時(shí)廷雅，通過(guò)v-for="item in items"循環(huán)渲染列表耗美，觸發(fā)@sortable:sort事件時(shí)，不能對(duì)items進(jìn)行操作航缀，framework7-vue中sortable并沒(méi)有操作items商架，而是對(duì)Dom樹(shù)的操作，而v-for是先完成virtual dom樹(shù)的修改再比對(duì)修改前的virtual dom樹(shù)芥玉，然后對(duì)Dom樹(shù)只修改變化的部分甸私，而不是重排，這樣會(huì)導(dǎo)致Dom樹(shù)的列表又再一次按照我們之前的操作排列一次
6. f7-swiper
該組件使用nested布局時(shí)無(wú)法正常顯示導(dǎo)航條飞傀，使用原生實(shí)現(xiàn)皇型，主要是該vue組件將f7-swiper中的內(nèi)容全放到.swiper-wrapper中，因此就算自定義導(dǎo)航條的css選擇器也無(wú)法正常顯示
至此砸烦，官網(wǎng)的demo已重構(gòu)完畢弃鸦，目前發(fā)現(xiàn)的需要注意的點(diǎn)就這些。
Framework7+Framework7-vue+vue踩坑記（一）
Framework7+Framework7-vue+vue踩坑記（二）
使用 framework7-vue 重構(gòu)后的項(xiàng)目地址：vue-framework7幢痘，歡迎star
項(xiàng)目初始化時(shí)唬格，
framework7的參數(shù)中，cache設(shè)置為false無(wú)效颜说，原因未知购岗。
