使用mui的tab-top-webview-main完成分类滑动栏

兼容问题

  1. 和 App.vue 中的 router-link 身上的类名 mui-tab-item 存在兼容性问题,导致tab栏失效,可以把mui-tab-item改名为mui-tab-item1,并复制相关的类样式,来解决这个问题;

    .mui-bar-tab .mui-tab-item1.mui-active {
    color: #007aff;
  }

  .mui-bar-tab .mui-tab-item1 {
    display: table-cell;
    overflow: hidden;
    width: 1%;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #929292;
  }

  .mui-bar-tab .mui-tab-item1 .mui-icon {
    top: 3px;
    width: 24px;
    height: 24px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .mui-bar-tab .mui-tab-item1 .mui-icon~.mui-tab-label {
    font-size: 11px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  1. tab-top-webview-main组件第一次显示到页面中的时候,无法被滑动的解决方案:

  • 先导入 mui 的JS文件:

 import mui from '../../../lib/mui/js/mui.min.js'
  • 在 组件的 mounted 事件钩子中,注册 mui 的滚动事件:

    mounted() {
  // 需要在组件的 mounted 事件钩子中,注册 mui 的 scroll 滚动事件
      mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
      });
}
  1. 滑动的时候报警告:Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

解决方法,可以加上* { touch-action: none; } 这句样式去掉。

原因:(是chrome为了提高页面的滑动流畅度而新折腾出来的一个东西) http://www.cnblogs.com/pearl07/p/6589114.html https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action

移除严格模式

babel-plugin-transform-remove-strict-mode

vue-preview

一个Vue集成PhotoSwipe图片预览插件

Vue.js - day7的更多相关文章

  1. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  2. Vue.js 2.0 和 React、Augular等其他框架的全方位对比

    引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...

  3. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  4. vue.js学习笔记

    有了孩子之后,元旦就哪也去不了了(孩子太小),刚好利用一些时间,来公司充充电补补课,学习学习新技术,在这里做一个整理和总结.(选择的东西,既然热爱就把他做好吧!). 下来进入咱们的学习环节: 一.从H ...

  5. 从Vue.js窥探前端行业

    近年来前端开发趋势 1.旧浏览器逐渐淘汰,移动端需求增加: 旧浏览器主要指的是IE6-IE8,它是不支持ES5特性的:IE9+.chrome.sarafi.firefox对ES5是完全支持的,移动端大 ...

  6. vue.js初探

    前言 入手2016最火前端框架之一vue.js.大概从网上找了些资料看了下vue.js,从网上的资料来看只能惊叹其发展速度太快,让我意外的是其作者是华人的前提下作品这么受欢迎. 网上的博客和教程各种组 ...

  7. vue.js几行实现的简单的todo list

    序:目前前端框架如:vue.react.angular,构建工具fis3.gulp.webpack等等...... 可谓是五花八门,层出不穷,眼花缭乱...其实吧只要你想玩还是可以玩玩的..下面是看了 ...

  8. Vue.js——60分钟组件快速入门(上篇)

    组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML ...

  9. Vue.js——60分钟快速入门

    Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...

随机推荐

  1. CodeForces768B:Code For 1 (分治)

    Jon fought bravely to rescue the wildlings who were attacked by the white-walkers at Hardhome. On hi ...

  2. 洛谷 P1509 找啊找啊找GF(复习二维费用背包)

    传送门 题目背景 "找啊找啊找GF,找到一个好GF,吃顿饭啊拉拉手,你是我的好GF.再见." "诶,别再见啊..." 七夕...七夕...七夕这个日子,对于sq ...

  3. 使用PowerDesigner设计数据库

    1.快捷键CTRL+N 创建 New Model 选择如下图,并设置 Model name 单击OK 2.使用工具添加实体 双击Entity_1,填上如下图信息   切换选项卡,添加属性信息 其中 M ...

  4. IntelliJ IDEA 2018 设置代码提示对大小写不敏感

    setting->Editor->General->Code Completion取消勾选Match case

  5. C++之new和delete

    new 和 delete 是 C++ 用于管理 堆内存 的两个运算符,对应于 C 语言中的 malloc 和 free,但是 malloc 和 free 是函数,new 和 delete 是运算符.除 ...

  6. Gibonacci number-斐波那契数列

    Description In mathematical terms, the normal sequence F(n) of Fibonacci numbers is defined by the r ...

  7. 微信小程序把玩(三十)wx.request(object) API

    这里通过干活集中营的API接口真实请求下数据.如果提示URL 域名不合法,请在 mp 后台配置后重试修改asdebug.js两行代码即可可看下面图 百牛信息技术bainiu.ltd整理发布于博客园 定 ...

  8. mysql分区表之四:分区表性能

    一,      分区概念  分区允许根据指定的规则,跨文件系统分配单个表的多个部分.表的不同部分在不同的位置被存储为单独的表.MySQL从5.1.3开始支持Partition. 分区和手动分表对比 手 ...

  9. 修改SQL Server 2005的默认端口

    修改SQL Server 2005的默认端口 1.打开SQL Server的配置管理程序 Microsoft SQL Server 2005->配置工具->SQL Server Confi ...

  10. codevs-1205

    1205 单词翻转 题目描述 Description 给出一个英语句子,希望你把句子里的单词顺序都翻转过来 输入描述 Input Description 输入包括一个英语句子. 输出描述 Output ...