论jquery与vuejs结合时的部分问题

最近在写一个移动端的单页面，主要是放置到公司的平板系统上使用，需求如下：

顶部结合左侧栏切换导航的页面，页面的主体是呈现数量不定的图片，同时保证页面整体不可以缩放，但是页面内部的图片可以缩放，顶部的每一个导航项对应左侧的一个导航栏，左侧的一个导航项对应一个序列的图片。

基于以上的需求，我选择了以下的库进行实现：

1、jquery：主要用它的选择器功能，和事件注册

2、vuejs：主要是为了方便数据渲染的方便

3、pinchzoom：是一个支持多点手势触控进行元素缩放和拖拽的js库。（

a.其使用条件为，依赖jquery库或者zepto库;

b.浏览器对ECMA5支持

）

4、swiper：横向或者纵向的导航项可能超过一屏幕，所以还需要考虑列表拖动

整体规划好之后就开始实现了，实现的过程中碰到一些坑，如下：

1、vuejs中对图片设置src属性时，不是直接通过<img src="{{imgSrc}}"/>的形式，而是使用<img v-bind:src="imgSrc"/>的形式，如果通过前者会报js错误；

2、一个dom元素在通过pinchzoom初始化构建之后，会在本身的外层包裹一层div元素，为pinch-zoom-container，元素本身也会被加上一些样式属性，如被设置成绝对定位，被进行缩放控制，被进行平移控制，而pinchzoom本身所提供的接口有限，没有destroy之类的方法，所以我转而考虑使用jquery找到由pinchzoom生成或者被其处理过的元素，将其全部remove掉。然后通过jquery构建新的dom元素，并对新的dom元素放置其内部内容，然后pinchzoom对新的dom元素进行初始化；

3、通过jquery改变vuejs实例中的$data对象之后，数据反映到文档中需要一小段时间，这段时间由vuejs决定，vuejs实例含有一个$nextTick方法，要在数据改变后继续执行与改变后的文档相关的逻辑，这些逻辑需要被放置到$nexTick方法中才足够安全。例如，我通过vuejs改变左侧的导航栏目相关的数据，然后对左侧的导航栏目中dom注册swiper拖动控制，这个注册swiper拖动控制的代码就需要放置到vuejs实例的$nextTick方法的回调函数中。

这个项目还碰都了一些坑，因为是所写的这个页面是被放到平板系统的一个app中，所以还需要克服一些在app中出现的细节问题，如滑不到底部等。于是我又对包裹图片元素的底部加了padding，左侧栏滑动范围的高度也控制了。

转载于:https://www.cnblogs.com/sdwrz/p/7017716.html

论jquery与vuejs结合时的部分问题相关推荐

jQuery在绑定事件时如何传入参数
2019独角兽企业重金招聘Python工程师标准>>> jQuery在绑定事件时为函数传入参数: 不能将自定义数据直接放入处理函数的参数中,在事件触发时会被事件对象替换. 使用绑定方 ...
java怎么往右浮动_[Java教程]jQuery实现页面滚动时智能浮动定位
[Java教程]jQuery实现页面滚动时智能浮动定位 0 2016-08-04 18:00:08 jQuery实现页面滚动时层智能浮动定位_前端开发 * { margin: 0; padding: ...
时间记录html,jquery水平、垂直时间线记录jQuery Timelinr
jquery水平.垂直时间线记录jQuery Timelinr效果.可以记录整个历史记录,相当不错的效果. $(function(){ $().timelinr(); }); $(function() ...
JQuery ajax返回JSON时的处理方式
最近在使用JQuery的ajax方法时,要求返回的数据为json数据,在处理的过程中遇到下面的几个问题,那就是采用不同的方式来生成json数据的时候,在$.ajax方法中应该是如何来处理的,下面依次来 ...
[转]jquery的ajax交付时“加载中”提示的处理方法
本文转自:http://www.educity.cn/wenda/77121.html jquery的ajax提交时"加载中"提示的处理方法方法1:使用ajaxStart ...
ajax提交时页面转圈,jquery的ajax提交时loading提示的处理方法
方法1:使用ajaxStart方法定义一个全局的"加载中..."提示 $(function(){ $("#loading").ajaxStart(functio ...
jquery:当内容发生改变时触发事件
jquery:当内容发生改变时触发事件 (当元素的值改变时发生 change 事件(仅适用于表单字段). change() 方法触发 change 事件,或规定当发生 change 事件时运行的函数. ...
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
在我们对一个dom添加mouseover和mouseout时,也就是jquery的hover事件,如果该dom有子元素,鼠标移到子元素时会触发mouseout事件,但往往实际情况我们希望在子元素上不触 ...
使用 jQuery.Pin 垂直滚动时固定导航
ZKEACMS的导航默认是不能固定的,随着页面的滚动而滚动,为了有更好的用户体验,当页面往下滚动时,可以将导航固定在顶端,这样方便用户点击. jQuery Pin 借助jQuery的一个插件 jQue ...

论jquery与vuejs结合时的部分问题

论jquery与vuejs结合时的部分问题相关推荐

最新文章

热门文章