;

1.原因 每次调用都会产生不同的ID,单次调用clearInterval并不能全部清除 2.解决方案 每次调用setInterval后,将ID存入一个数组,然后需要清除时候,遍历数组进行清除 3.相关代码 let id= setInterval(() => {}, 1000) this.idList.push(id) for (let i = 0; i < this.idList.length; i++) { clearInterval(this.timerId[i]) }

setInterval多次调用后,clearInterval无效 2019年2月28日
;

mounted: function () { window.addEventListener(‘scroll’, () => { let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop if (scrollTop > 60) { // 1 } else { // 2 } }) }

vue中监听scroll事件 2019年2月26日
;

问题原因: name: ‘myFooter’, components: { myFooter } name部分和components部分重名导致,修改不同即可

vue报错:‘RangeError: Maximum call stack size exceeded’ 2019年2月26日
;
三仙归洞 2019年2月24日
;

问题原因: img标签为行内元素(inline),默认对其方式为vertical-align: baseline(基线对齐) 四种解决方法: 1.将img设置为block,这样就不再受行内基线的影响。 2.设置img的竖直对齐方式v-align:bottom。 3.设置父div的font-size,需要一个较大的值,原理未知。 4.设置外层的div的line-height:0,这样基线下方的位置基本可以忽略。

div中包含img标签,下方出现空白 2019年2月21日
;

@-moz-document url-prefix(){ body{color:red;} } supports:https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

针对firefox的css设置 2019年2月18日
;

1.问题描述 直接修改数组某一项的值,数据变化后ui并不跟着变化 2.解决方案,要用到,数组更新检测 错误的代码 setOptionVal: function (index, val) { this.SubjectListData[index].optionIdStringResult = val } 正确的代码 setOptionVal: function (index, val) { let tempVal = this.SubjectListData[index] tempVal.optionIdStringResult = val this.$set(this.SubjectListData, index, tempVal) } 相关链接:https://cn.vuejs.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B

vue数据变化ui不刷新 2019年2月14日
;

1.相关文件 src/App.vue 2.相关代码 <template> <div id="app" class="loading"> <router-view/> </div> </template> mounted: function () { let ele = document.getElementById(‘app’) setTimeout(function () { ele.classList.remove(‘loading’) }, 1500) } #app{ height: 100%; } .loading:before{ content: ”; position: fixed; width: 100%; height: 100%; left:0; top:0; background:#fff url(/static/img/loading.gif) center center no-repeat; z-index: 99999999; }

vue首屏添加loading 2019年2月13日
;

1.实现原理 外层添加容器,设置overflow: hidden; 内部容器,设置overflow-y: scroll; 对内部容器进行偏移,使得滚动条刚好被上层容器遮挡 2.相关代码 <div class="outer"> <div class="inner"></div> </div> .outer{height: 75px;overflow:hidden;} .inner{height: 100%;padding-right: 25px;position: relative;left: 21px;overflow-y: scroll;}

内容区域可滚动,但不显示滚动条 2019年2月13日
;

1.问题描述 轮播处于子组件中,数据通过props从父组件异步获取,父组件中用了async函数 2.问题所在及解决方案 后来发现是因为,data部分list数组中写入了静态的数据,删除后空白轮播消失,但是loop无效 父组件中引用子组件的地方的加入判断v-if="swiperBannerData.length>0",问题消失

vue-awesome-swiper轮播出现空白 2019年2月13日
;

player.on( ‘durationchange’, function( e ) { window.console.log( ‘videoJS: durationchange’ ); }); player.on( ‘ended’, function( e ) { window.console.log( ‘videoJS: ended’ ); }); player.on( ‘error’, function( e ) { window.console.log( ‘videoJS: error’ ); }); player.on( ‘firstplay’, function( e ) { window.console.log( ‘videoJS: firstplay’ ); }); player.on( ‘loadedalldata’, function( e ) { window.console.log( ‘videoJS: loadedalldata’ ); }); player.on( ‘loadeddata’, function( e ) { window.console.log( ‘videoJS: loadeddata’ ); }); player.on( ‘loadedmetadata’, function( e ) { win…

videojs 播放的各个生命周期callback 2019年2月12日
;

1.安装 npm i js-cookie 相关链接:https://www.npmjs.com/package/js-cookie

vue中使用js-cookie 2019年1月26日
;

目录 声明:词条人人可编辑,创建、修改和认证均免费 详情 沉默的螺旋 新闻传播学概念 本词条是多义词,共2个义项 展开 沉默的螺旋(The Spiral Of Silence)是一个政治学和大众传播理论。理论基本描述了这样一个现象:人们在表达自己想法和观点的时候,如果看到自己赞同的观点受到广泛欢迎,就会积极参与进来,这类观点就会越发大胆地发表和扩散;而发觉某一观点无人或很少有人理会(有时会有群起而攻之的遭遇),即使自己赞同它,也会保持沉默。意见一方的沉默造成另一方意见的增势,如此循环往复,便形成一方的声音越来越强大,另一方越来越沉默下去的螺旋发展过程。理论是基于这样一个假设:大多数个人会力图避免由于单独持有某些态度和信念而产生的孤立。

沉默的螺旋 2019年1月26日
;

1.安装 npm install videojs-hotkeys 2.main.js中引入 import videojshotkeys from ‘videojs-hotkeys’ Vue.use(videojshotkeys) 3.videojs中使用 let player = videojs(‘#my-player’, { autoplay: true, preload: ‘auto’, // aspectRatio: ’16:9′, playbackRates: [1, 1.25, 1.5, 1.75, 2], controlBar: { volumePanel: { inline: false }, fullscreenToggle: true, customControlSpacer: false } }, function () { this.addClass(‘test666’) this.hotkeys({ volumeStep: 0.1, seekStep: 5, enableModifiersForNumbers: false }) })

vue中使用videojs-hotkeys 2019年1月23日
;

1.安装 npm install vuejs-paginate –save 2.main.js中引入 import Paginate from ‘vuejs-paginate’ Vue.component(‘paginate’, Paginate) 3.模板文件中使用 <paginate :page-count="20" :click-handler="clickCallback" :prev-text="’Prev’" :next-text="’Next’" :container-class="’className’"> </paginate> methods: { clickCallback (page) => { console.log(page) } } 相关链接:https://github.com/lokyoung/vuejs-paginate

vue分页组件 2019年1月16日
;

<answer v-if="$route.path==’/video’"></answer>

vue根据当前路由判断是否加载组件 2019年1月15日
;

1.变量保存在js文件中 hostUrl.js var user = ‘http://user.abc.com’ var api = ‘http://api.abc.com’ export default { user, api } 2.main.js中引入并挂载 import hostUrl from ‘./utils/hostUrl’ Vue.prototype.hostUrl = hostUrl 3.页面中使用 this.hostUrl.user

vue中定义全局变量 2019年1月11日
;

1,问题原因 单页应用中,只有一个播放器实例,再次进入页面并修改配置,并不能生效 2.解决思路 页面退出时候,对播放器实例进行销毁 3.相关代码 beforeDestroy () { this.player.dispose() } 相关文章: 原因说明:https://github.com/videojs/video.js/issues/4865 相关处理:https://github.com/videojs/video.js/issues/4167#issuecomment-344731747 https://github.com/videojs/video.js/blob/master/docs/guides/react.md

vue中后退再进入videojs播放器无法初始化 2019年1月9日
;

1.问题描述 let modalStr = ` <div class="nextSectionClose"> <img class="pointer" id="modalSectionClose" title="关闭" src="/static/img/icon_close.png"> </div> <div class="row1" id="sectionDone">当前小节已学完</div> <div class="row1 hide" id="courseDone">恭喜你已学完本课程</div> <div class="row2"> <span id="buttonPractice">做练习</span> <span id="buttonNextChapter">继续学习下一节</span> <span class="hide" i…

videojs关闭modal 2019年1月8日
;

1.问题描述 详情页之间跳转,路由不变,只变参数,地址栏可以看到url变了,但是页面数据无变化 2.处理思路 监听路由对象,数据请求的参数从url中实时获取 3.相关代码 watch: { ‘$route’ () { this.getData() } } getData: function () { ajax(‘/api’, { id: this.$route.query.id }, res = { console.log(res) }) } 注意此处id写法

vue中路由参数变化,数据不刷新的问题的处理 2019年1月7日
;

1,问题描述 视频通过js初始化,视频正常播放时候进度始终不动, 同时,控制台报错"No compatible source was found for this media" 2,解决方法 直接删除模板部分的<source></source>标签

videojs进度条始终为0 2019年1月7日
;

1.问题描述 video标签中写入固定视频地址可以正常播放,但是更换为ajax返回的值后,无法播放,审查元素发现,src中的视频是正确的 2.问题原因 仅仅更换src并不能正确切换video的视频地址,需要借助videojs api 3.处理思路 视频的初始化必须等到ajax数据返回以后,作为参数传入,此处用到async/await 3.具体代码 import ‘video.js/dist/video-js.min.css’ import videojs from ‘video.js’ init: function (src) { let player = videojs(‘#my-player’, { autoplay: false, preload: ‘auto’, aspectRatio: ’16:9′, playbackRates: [1, 1.25, 1.5, 1.75, 2, 10], controlBar: { volumePanel: { inline: false }, fullscreenToggle: true, customControlSpacer: false } }, function () { this.addClass(‘test666’) }) } let source = { src: src } pla…

vue中videojs异步加载src 2019年1月6日
;

1.问题描述 后台返回数据结构 [ { id:1, question:’吃饭没?’, options:[ { id:101, answer:’吃了’ }, { id:102, answer:’没吃’ } ] }, { id:2, question:’多大了?’, options:[ { id:201, answer:’100岁’ }, { id:202, answer:’200岁’ } ] } ] 提交时候的数据结构 [ {"questionId":1,"optionId":101}, {"questionId":2,"optionId":201} ] 2.遇到的问题 提交数据要和返回数据结构一致,但是出现了新的字段,options如何实时绑定上去 3.处理思路 后台数据返回后,注入新的的属性optionsCheck用来通过v-mode绑定所选值,提交时候再对整个数据进行遍历,筛选出所需值保存在临时对象中,再push进最终的提交数据中 4.处理过程 属性注入 let list = res.data.list for (let i = 0; i < list.length; i++) { list[i].optionsCheck = ” } 模板部分绑定ra…

vue中多个radio遍历提交 2019年1月5日
;

const div = document.createElement(‘div’) div.innerHTML = res.html document.body.appendChild(div) document.forms.alipaysubmit.submit()

支付宝返回数据处理 2019年1月2日