原文地址：https://yawuling.com/201707141526.html
網(wǎng)上關(guān)于framework7-vue的博客基本沒有豌汇，所以我決定用它來重構(gòu)官網(wǎng)的Demo，來踩波坑奠骄，以下是我在使用framework7-vue時遇到的一些需要注意的點
1、this指向
在定時器和framework7的api回調(diào)函數(shù)中晦攒，this會被修改指向其他作用域惠爽，在定時器或回調(diào)api調(diào)用之前定義一個變量保存指向vue作用域的this
2俏拱、Autocomplete功能實現(xiàn)
framework7-vue沒有Autocomplete組件，需要自己手動實現(xiàn)察净，Autocomplete主要通過js進(jìn)行配置和初始化驾茴，自定義選項較多。
Autocomplete需要使用到f7-list組件作為輸入的容器氢卡，代碼如下：
<f7-list form>
<f7-list-item>
<f7-label>Fruit</f7-label>
<f7-input type="text" placeholder="Fruit" id="autocomplete-dropdown"></f7-input>
</f7-list-item>
</f7-list>
此外還需要在vue的生命周期mounted中進(jìn)行初始化
tips：不能在created中進(jìn)行初始化锈至，這時候模板尚未編譯掛載，無法將插件綁定到dom上
data() {
return {
fruits: ('Apple Apricot Avocado Banana Melon Orange Peach Pear Pineapple').split(' ')
}
}
mounted() {
//注意译秦，這里在插件初始化中this并非指向Vue實例的
let fruits = this.fruits;
let autocompleteDropdownSimple = window.f7.autocomplete({
input: '#autocomplete-dropdown',
openIn: 'dropdown',
source: function (autocomplete, query, render) {
let results = []
if (query.length === 0) {
render(results)
return
}
for (let i = 0; i < fruits.length; i++) {
if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) {
results.push(fruits[i])
}
}
render(results)
}
})
}
其他類型的選項請參照官網(wǎng)原生文檔實現(xiàn)：http://docs.framework7.cn/Index/autocomplete.html
3峡捡、this.$$ & this.Dom7 中無jsonp請求
在this.$$中無jsonp請求，若要使用jsonp筑悴，可安裝vue-resource（不過該插件作者已宣布不再更新）们拙，用法一樣
4、Calendar / Datepicker
framework7-vue沒有Calendar / Datepicker的組件阁吝，需要手動實現(xiàn)砚婆，跟Autocomplete一樣，代碼如下
<template>
<f7-page>
<f7-list form>
<f7-list-item>
<f7-input type="text" placeholder="Select date" readonly id="calendar-disabled"></f7-input>
</f7-list-item>
</f7-list>
</f7-page>
</template>
<script>
export default{
mounted () {
let calendarDefault = this.$f7.calendar({
input: '#calendar-default'
})
}
}
</script>
5突勇、Contacts
framework7-vue中有contacts-list組件装盯，其.list.group-title在谷歌瀏覽器調(diào)試時，position: sticky中top是相對于viewport定位的甲馋，所以滾動后處于瀏覽器頂部埂奈，被navbar遮住，但在手機(jī)上是正常顯示的定躏，其top是相對于.page-content定位的
6账磺、層級路由
framework7-vue在本文章撰寫時除了在同頁面Tab中有層級路由外芹敌，沒有實現(xiàn)頁面間的層級路由，跟vue-router不一樣垮抗，要實現(xiàn)頁面間的層級跳轉(zhuǎn)氏捞，路由的寫法跟平時寫法一致，直接跳轉(zhuǎn)即可借宵，如下
[
{
path: '/floatingAction/',
component: require('./pages/floatingAction/floatingAction.vue'),
},
{
//我這里為了顯示出層級關(guān)系呻待，將其上一級頁面的路由也包含進(jìn)去了嚎，事實上是可以不用這么做的
path: '/floatingAction/staticFloating/',
component: require('./pages/floatingAction/staticFloating.vue')
},
{
path: '/floatingAction/speedDial/',
component: require('./pages/floatingAction/speedDial.vue')
}
]
7肩刃、f7-input: type="select"
f7-input中設(shè)置type="select"挺份，不會有默認(rèn)選中項，需要在f7-input中綁定v-model="selected"欲间，而給option設(shè)置selected屬性是不會顯示選中項的
8楚里、無限滾動Infinite Scroll
無限滾動的實現(xiàn)是在f7-page中加上infinite-scroll，滾動事件為@infinite="doSomething"猎贴，頁面每次變更都需要重新刷新一次瀏覽器班缎，否則infinite事件不會綁定，infinite-scroll是在page:init即頁面初始化時初始化的她渴，而熱加載不會重新執(zhí)行一遍page:init达址。以下是代碼實現(xiàn)：
<template>
<f7-page infinite-scroll @infinite="onInfiniteScroll">
<f7-navbar title="Infinite Scroll" back-link="返回" sliding>
<f7-nav-right>
<f7-link icon="icon icon-bars" open-panel="left"></f7-link>
</f7-nav-right>
</f7-navbar>
<f7-block-title>SCROLL BOTTOM</f7-block-title>
<f7-list>
<f7-list-item v-for="item in items" :title="'Item ' + item"></f7-list-item>
</f7-list>
</f7-page>
</template>
<script>
export default {
data () {
return {
items: 20,
loading: false,
maxLength: 60
}
},
methods: {
onInfiniteScroll: function () {
if (this.loading) {
return;
}
this.loading = true;
let _this = this;
setTimeout(function () {
_this.loading = false;
if (_this.items >= _this.maxLength) {
_this.$f7.detachInfiniteScroll(_this.$$('.infinite-scroll'))
_this.$$('.infinite-scroll-preloader').remove()
return
}
_this.items += 20;
}, 1000)
}
}
}
</script>
9、f7-list的靈活性
f7-list的比較靈活趁耗，嚴(yán)格來說應(yīng)該是f7-list-item比較靈活沉唠，自由度高，該組件在設(shè)計時添加了不少slot選項來分發(fā)內(nèi)容
靈活運用slots可以實現(xiàn)各種列表效果苛败，如以下效果：
代碼的實現(xiàn)如下：
<f7-list-item title="No icons here">
<ul slot="root">
<f7-list-item
link="#"
media="<i class='icon icon-f7'></i>"
title="Ivan Petrov"
after="CEO"
></f7-list-item>
<f7-list-item
link="#"
media="<i class='icon icon-f7'></i><i class='icon icon-f7'></i>"
title="Two icons here"
></f7-list-item>
<f7-list-item title="No icons here"></f7-list-item>
<f7-list-item
link="#"
media="<i class='icon icon-f7'></i>"
title="Ultra long text goes here, no, it is really really long"
></f7-list-item>
<f7-list-item
media="<i class='icon icon-f7'></i>"
title="With switch">
<f7-input type='switch' slot="after"></f7-input>
</f7-list-item>
</ul>
</f7-list-item>
10满葛、$router
要在javascript中使用路由$router，用法為this.$router罢屈，$router是保存在vue作用域中的
Framework7+Framework7-vue+vue踩坑記（二）
Framework7+Framework7-vue+vue踩坑記（三）
基于framework7-vue實現(xiàn)的官方實例 vue-framework7嘀韧，歡迎star
