Framework7+Framework7-vue+vue踩坑记(三)

原文地址:https://yawuling.com/201707240917.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的方式实现,代码如下:


  
    
    
  


3. 下拉刷新

下拉刷新是在f7-page中加上pull-to-refresh,以下是代码实现:



4. View间链接

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

5. sortable list

f7-listsortable属性为true时,通过v-for="item in items"循环渲染列表,触发@sortable:sort事件时,不能对items进行操作,framework7-vuesortable并没有操作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 无效,原因未知。

你可能感兴趣的:(Framework7+Framework7-vue+vue踩坑记(三))