Framework7+Framework7-vue+vue踩坑记（三）

原文地址：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>)
}

}
}
</script>

4. View间链接

将在 left view 中的链接加载的页面放进 main view中，在 a 标签上加上 data-view="###" （###为css选择器）即可

5. sortable list

在f7-list的sortable属性为true时，通过v-for="item in items"循环渲染列表，触发@sortable:sort事件时，不能对items进行操作，framework7-vue中sortable并没有操作items，而是对Dom树的操作，而v-for是先完成virtual dom树的修改再比对修改前的virtual dom树，然后对Dom树只修改变化的部分，而不是重排，这样会导致Dom树的列表又再一次按照我们之前的操作排列一次

6. f7-swiper

该组件使用nested布局时无法正常显示导航条，使用原生实现，主要是该vue组件将f7-swiper中的内容全放到.swiper-wrapper中，因此就算自定义导航条的css选择器也无法正常显示

---

至此，官网的demo已重构完毕，目前发现的需要注意的点就这些。

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

使用 framework7-vue 重构后的项目地址：vue-framework7，欢迎star

项目初始化时，framework7 的参数中，cache 设置为 false 无效，原因未知。

      </div>
    </div>