论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