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

網(wǎng)上關于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進行配置和初始化，自定義選項較多。
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中進行初始化
tips：不能在created中進行初始化，這時候模板尚未編譯掛載，無法將插件綁定到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遮住，但在手機上是正常顯示的，其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'),
  },
  {
    //我這里為了顯示出層級關系，將其上一級頁面的路由也包含進去，事實上是可以不用這么做的
    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中設置type="select"，不會有默認選中項，需要在f7-input中綁定v-model="selected"，而給option設置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的比較靈活，嚴格來說應該是f7-list-item比較靈活，自由度高，該組件在設計時添加了不少slot選項來分發(fā)內(nèi)容

f7-list-item的slots分發(fā)

靈活運用slots可以實現(xiàn)各種列表效果，如以下效果：

f7-list-item的slots分發(fā)效果

代碼的實現(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