360SDN.COM

首页/Vue.js/列表

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

来源:  2018-04-03 14:14:19    评论:0点击:

原文地址:http://localhost:8080/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的方式实现,代码如下:

<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(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"循环渲染列表,触发@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 无效,原因未知。

 

为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权