网上关于framework7-vue
的博客基本没有,所以我决定用它来重构官网的Demo,来踩波坑,以下是我在使用framework7-vue
时遇到的一些需要注意的点
1. this
指向
在定时器和framework7
的api回调函数中,this
会被修改指向其他作用域,在定时器或回调api调用之前定义一个变量保存指向vue
作用域的this
2. Autocomplete功能实现
framework7-vue
没有Autocomplete
组件,需要自己手动实现,Autocomplete
主要通过js进行配置和初始化,自定义选项较多。
Autocomplete
需要使用到f7-list
组件作为输入的容器,代码如下:
1 2 3 4 5 6
| <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上
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| data() { return { fruits: ('Apple Apricot Avocado Banana Melon Orange Peach Pear Pineapple').split(' ') } } mounted() { 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) } }) }
|
其他类型的选项请参照官网原生文档实现:http://docs.framework7.cn/Index/autocomplete.html
3. this.$$ & this.Dom7 中无jsonp
请求
在this.$$中无jsonp请求,若要使用jsonp,可安装vue-resource
(不过该插件作者已宣布不再更新),用法一样
4. Calendar / Datepicker
framework7-vue
没有Calendar / Datepicker
的组件,需要手动实现,跟Autocomplete一样,代码如下
1 2 3 4 5 6 7 8 9
| <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>
|
1 2 3 4 5 6 7 8 9
| <script> export default{ mounted () { let calendarDefault = this.$f7.calendar({ input: '#calendar-default' }) } } </script>
|
framework7-vue
中有contacts-list
组件,其.list.group-title
在谷歌浏览器调试时,position: sticky
中top是相对于viewport定位的,所以滚动后处于浏览器顶部,被navbar遮住,但在手机上是正常显示的,其top是相对于.page-content
定位的
6. 层级路由
framework7-vue
在本文章撰写时除了在同页面Tab中有层级路由外,没有实现页面间的层级路由,跟vue-router
不一样,要实现页面间的层级跳转,路由的写法跟平时写法一致,直接跳转即可,如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| [ { 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') } ]
|
f7-input
中设置type="select"
,不会有默认选中项,需要在f7-input
中绑定v-model="selected"
,而给option
设置selected
属性是不会显示选中项的
无限滚动的实现是在f7-page
中加上infinite-scroll
,滚动事件为@infinite="doSomething"
,页面每次变更都需要重新刷新一次浏览器,否则infinite
事件不会绑定,infinite-scroll
是在page:init
即页面初始化时初始化的,而热加载不会重新执行一遍page:init
。以下是代码实现:
1 2 3 4 5 6 7 8 9 10 11 12 13
| <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>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
| <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选项来分发内容
灵活运用slots可以实现各种列表效果,如以下效果:
代码的实现如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| <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-vue
的注意点目前就写到这,后面继续更新
基于framework7-vue
实现的官方实例 vue-framework7,持续更新中,欢迎star