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

接上一篇博客 Framework7+Framework7-vue+vue踩坑記（二），這里繼續(xù) framework7 + vue + framework7-vue 踩坑第三波。

1. Notification組件

framework7-vue沒有該組件，使用framework7的方式實現(xiàn)，代碼如下：

this.$f7.addNotification({
  title: 'Framework7',
  message: 'This is a simple notification message with title and message'
})

2. picker組件

framework7-vue沒有該組件，使用framework7的方式實現(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，以下是代碼實現(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: '![](./static/image/photo12.jpg)',
          title: 'Yellow Submarie',
          subtitle: 'Beatles'
        }, {
          media: '![](./static/image/photo13.jpg)',
          title: 'Don\'t Stop Me Now',
          subtitle: 'Queen'
        }, {
          media: '![](./static/image/photo14.jpg)',
          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"循環(huán)渲染列表，觸發(fā)@sortable:sort事件時，不能對items進行操作，framework7-vue中sortable并沒有操作items，而是對Dom樹的操作，而v-for是先完成virtual dom樹的修改再比對修改前的virtual dom樹，然后對Dom樹只修改變化的部分，而不是重排，這樣會導致Dom樹的列表又再一次按照我們之前的操作排列一次

6. f7-swiper

該組件使用nested布局時無法正常顯示導航條，使用原生實現(xiàn)，主要是該vue組件將f7-swiper中的內容全放到.swiper-wrapper中，因此就算自定義導航條的css選擇器也無法正常顯示

至此，官網的demo已重構完畢，目前發(fā)現(xiàn)的需要注意的點就這些。

Framework7+Framework7-vue+vue踩坑記（一）
Framework7+Framework7-vue+vue踩坑記（二）

使用 framework7-vue 重構后的項目地址：vue-framework7，歡迎star

項目初始化時，framework7 的參數(shù)中，cache 設置為 false 無效，原因未知。