手机端图片左右滑动效果实现-蒲公英云

手机端图片左右滑动效果实现

Dear 丶 2022-08-20 02:16 323阅读 0赞

起初我想尝试用jQuery Mobile的swipeleft和swiperight,可以实现手势左右滑动的效果，但是jQuery Mobile对页面的其它部分影响很大，所以不得不放弃使用。接着我又尝试用zepto.js，但是由于页面很大部分已经依赖了jQuery，jQuery和zepto.js存在冲突，我本打算解决冲突，让两者共存，但是最后还是放弃了，因为觉得引入两者实在是太冗余。所以我最后采用了js原生的touch事件。通过比较前后手指在页面中的坐标之差来判断向左滑动还是向右滑动，然后移动包括图片的元素ul的left值。

这里用到了QWeb，xml文件内容如下：

<span style="white-space:pre">        </span><div class="visible-xs mb-box">
                        <div class="slider">
                            <ul class="clearfix slider-wrap">
                                <t t-foreach="product.product_template_image_urls" t-as="image_url">
                                    <li>
                                        <a href="javascript:;" class="pic">
                                            <img t-att-src="image_url.url_middle"/>
                                        </a>
                                    </li>
                                </t>
                            </ul>
                            <ul class="slide-nav">
                                <t t-foreach="product.product_template_image_urls" t-as="image">
                                    <t t-if="image_index == 0">
                                        <li class="selected"></li>
                                    </t>
                                    <t t-if="image_index > 0">
                                       <li></li>
                                    </t>
                                </t>
                            </ul>
                        </div>
                    </div>

对应的js内容如下：

function PicSliser() {
        return new PicSliser.prototype.init();
    }
    PicSliser.prototype = {
        init: function() {
            var self = this;
            self.$parent = $('.slider');
            self.$ul = self.$parent.find('.slider-wrap');
            self.picNum = self.$ul.find('li').length;
            self.width = self.$parent.width();
            self.$ul.find('li').css('width',self.width);
            self.$ul.css('width', self.width * self.picNum);
            self.index = 0;
            self.picTranslate();
        },
        move: function() {
            var self = this;
            self.$ul.animate({
                'left':-self.width * self.index
            },400, 'swing');
            $('.slide-nav').find('li').eq(self.index)
                    .addClass('selected').siblings().removeClass('selected');
        },
        moveNext: function() {
            var self = this;
            if(self.index >= self.picNum-1) {
                return;
            }
            self.index++;
            self.move();
        },
        moverPre: function() {
            var self = this;
            if(self.index <= 0) {
                return;
            }
            self.index--;
            self.move();
        },
        picTranslate: function() {
            var self = this,
                startPosition,
                endPOsition,
                deltaX,
                deltaY;
            self.$ul.find('.pic').bind('touchstart', function(e) {
                var touch = e.originalEvent.targetTouches[0];
                startPosition = {
                    x: touch.pageX,
                    y: touch.pageY
                }
            }).bind('touchmove', function(e) {
                var touch = e.originalEvent.targetTouches[0];
                endPosition = {
                    x: touch.pageX,
                    y: touch.pageY
                };
                deltaX = endPosition.x - startPosition.x;
                deltaY = endPosition.y - startPosition.y;
            }).bind('touchend', function(e) {
                if(deltaX < 0) {
                    self.moveNext();
                } else if(deltaX > 0) {
                    self.moverPre();
                }
            })
        }
    }
    PicSliser.prototype.init.prototype = PicSliser.prototype;
    var picSliser = new PicSliser();

总结：

基本触摸事件：

touchstart ：手指放在一个DOM元素上。
touchmove ：手指拖曳一个DOM元素。
touchend ：手指从一个DOM元素上移开。
每个触摸事件都包括了三个触摸列表：
touches ：当前位于屏幕上的所有手指的一个列表。
targetTouches ：位于当前DOM元素上的手指的一个列表。
changedTouches ：涉及当前事件的手指的一个列表。

在取得DOM元素上的targetTouches时，注意不能直接使用event.targetTouches,而是要使用event.originalEvent。这里event和originalEvent的区别在于：event在这里是被jQuery包装后的事件对象，jQuery事件对象暴漏了一个originalEvent属行用来访问原生的js事件对象。由于在不同的浏览器环境和事件类型中对应的originalEvent并不总是相同，所以需要直接使用原生的事件对象，originalEvent在移动设备的触摸事件中尤其重要。

效果图如下：

Center