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

接上一篇博客 Framework7+Framework7-vue+vue踩坑记（二），这里继续 framework7 + vue + framework7-vue 踩坑第三波。

---

1. Notification组件

framework7-vue没有该组件，使用framework7的方式实现，代码如下：

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

2. picker组件

framework7-vue没有该组件，使用framework7的方式实现，代码如下：

<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，以下是代码实现：

<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(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">let</span> songs = [
      <span class="hljs-string">'Yellow Submarine'</span>,
      <span class="hljs-string">'Don\'t Stop Me Now'</span>,
      <span class="hljs-string">'Billie Jean'</span>,
      <span class="hljs-string">'Californication'</span>
    ]
    <span class="hljs-keyword">let</span> authors = [
      <span class="hljs-string">'Beatles'</span>,
      <span class="hljs-string">'Queen'</span>,
      <span class="hljs-string">'Michael Jackson'</span>,
      <span class="hljs-string">'Red Hot Chili Peppers'</span>
    ]
    <span class="hljs-keyword">let</span> item = {
      <span class="hljs-attr">media</span>: <span class="hljs-string">'&lt;img src="./static/image/photo'</span> + 
              <span class="hljs-built_in">Math</span>.floor(<span class="hljs-built_in">Math</span>.random() * <span class="hljs-number">14</span>) +
             <span class="hljs-string">'.jpg" width="44" /&gt;'</span>,
      <span class="hljs-attr">title</span>: songs[<span class="hljs-built_in">Math</span>.floor(<span class="hljs-built_in">Math</span>.random() * songs.length)],
      <span class="hljs-attr">subtitle</span>: authors[<span class="hljs-built_in">Math</span>.floor(<span class="hljs-built_in">Math</span>.random() * authors.length)]
    }

    self.items.unshift(item)

    self.$f7.pullToRefreshDone()
  }, <span class="hljs-number">2000</span>)
}