移动端有那种跟着手指滑动而移动的插件吗？

不需要那种滑动切换幻灯片的，可以看成一个宽度很大的元素，手指拨打可以左右水平切换的。

这些都不适用（或者我不会用）: swipe.js , touch.js , iscroll.js

我自己写的滑动组件：
关键是保存上一次 touchMove 的 位置 ，但是优化还是不够好。

代码如下：

        /**
 * Created by Administrator on 2016/8/12.
 */


function Slider(opts){
    //¹¹Ô캯ÊýÐèÒªµÄ²ÎÊý
    this.wrap = opts.dom;
    this.dire = opts.direction;
    this.addtion = opts.addtion;
    this.bindDOM();
}






Slider.prototype.bindDOM = function(){
    var self = this;
    var moveP;

    //ÊÖÖ¸°´ÏµĴ¦Àíʼþ
    var startHandler = function(evt){


     
        if(moveP.x) console.log(moveP)
        self.startX = moveP.x ? moveP.x : evt.touches[0].pageX;
        self.startY = moveP.y ? moveP.y : evt.touches[0].pageY;
        console.log("start X"
         + self.startX)


    };

    var moveHandler = function(evt){
        //¼æÈÝchrome android£¬×èÖ¹ä¯ÀÀÆ÷ĬÈÏÐÐΪ
        evt.preventDefault();


         moveP.x = evt.targetTouches[0].pageX;
         moveP.y = evt.targetTouches[0].pageY;
             
        }

      //  console.log(self.dire)
        if(self.dire === 'horizon'){
            if(Math.abs(moveP.x-self.startX) > Math.abs(moveP.y - self.startY)){
                // move horizontal
                self.offsetX = moveP.x - self.startX;
                if(self.offsetX > 550){self.offsetX = 300;}
                if(self.offsetX < 0){
                    //  change transform style with offsetX
                    console.log('enter right 2 left')

      //              console.log('curr offset X ' + self.offsetX)
                    self.wrap.style.webkitTransition = ('-webkit-transform 0s ease-out');
                    self.wrap.style.webkitTransform = ('translate3d(' + self.offsetX + 'px, 0, 0)');
                } else{
                    console.log( ' enter left 2 right '+ self.offsetX)

                    if (self.wrap.style.webkitTransform >= 0) {
                          self.wrap.style.webkitTransition = ('-webkit-transform 0s ease-out');
                    self.wrap.style.webkitTransform = ('translate3d(0px,0,0)');
                  //  self.addtion.style.webkitTransform = ('translate3d(0px,0,0)');
                    };
                    self.wrap.style.webkitTransition = ('-webkit-transform 0s ease-out');
                    self.wrap.style.webkitTransform = ('translate3d(' + (self.offsetX)+ 'px, 0, 0)');


                }
            }
        } else if(self.dire === 'vertical'){
            if(Math.abs(moveP.x-self.startX) < Math.abs(moveP.y - self.startY)){
                // move horizontal
                self.offsetY = moveP.y - self.startY;
                if(self.offsetY < 0){
                    //  change transform style with offsetX
                   

        //            console.log('curr offset Y ' + self.offsetY)
                    console.log('down to up')
                    self.wrap.style.webkitTransition = ('-webkit-transform 0s ease-out');
                    self.wrap.style.webkitTransform = ('translate3d(0px,'+ self.offsetY +'px,0)');
                    self.addtion.style.webkitTransform = ('translate3d(0px,'+ self.offsetY +'px,0)');

                }else{
                    console.log('up to down')

                    var fixed_body = document.getElementById('fixed-body');     
                    if(fixed_body.style.webkitTransform.indexOf('-') > 0){
                    self.wrap.style.webkitTransition = ('-webkit-transform 0s ease-out');
                    self.wrap.style.webkitTransform = ('translate3d(0px,0,0)');
                    self.addtion.style.webkitTransform = ('translate3d(0px,0,0)');
                    } 
                }
            } 
        }

        document.getElementById('swipe_table_title').style.position = 'fixed !important';
        document.getElementById('fixed_table_title').style.position = 'fixed !important';


        console.log(moveP.x)
    };




new Slider({
    dom : document.getElementById('swipe_table'),
    direction : 'horizon'
});

new Slider({
    dom : document.getElementById('fixed-body'),
    direction : 'vertical',
    addtion : document.getElementById('swiper-body')
});

new Slider({
    dom : document.getElementById('swiper-body'),
    direction : 'vertical',
    addtion : document.getElementById('fixed-body')
});

---

你可以用手机效果touchslide.js,网址http://www.superslide2.com/，有用法，不行的话你就zepto.js,这个是针对手机端的。

---

如果是ionic的话，可以用这个指令`
var slidingTabsDirective = angular.module("ionic").directive('ionSlideTabs', ['$timeout', '$compile', '$interval', '$ionicSlideBoxDelegate', '$ionicScrollDelegate', '$ionicGesture', function($timeout, $compile, $interval, $ionicSlideBoxDelegate, $ionicScrollDelegate, $ionicGesture) {

return {
    require: "^ionSlideBox",
    restrict: 'A',
    link: function(scope, element, attrs, parent) {

        var ionicSlideBoxDelegate;
        var ionicScrollDelegate;
        var ionicScrollDelegateID;

        var slideTabs;
        var indicator;

        var slider;
        var tabsBar;

        var options = {
            "slideTabsScrollable": true
        }

        var init = function () {

            if(angular.isDefined( attrs.slideTabsScrollable ) && attrs.slideTabsScrollable === "false" ) {
                options.slideTabsScrollable = false;
            }

            var tabItems = '<li ng-repeat="(key, value) in tabs" ng-click="onTabTabbed($event, {{key}})" class="slider-slide-tab" ng-bind-html="value"></li>';

            if(options.slideTabsScrollable) {

                ionicScrollDelegateID = "ion-slide-tabs-handle-" + Math.floor((Math.random() * 10000) + 1);
                tabsBar = angular.element('<ion-scroll delegate-handle="' + ionicScrollDelegateID + '" class="slidingTabs" direction="x" scrollbar-x="false"><ul>' + tabItems + '</ul> <div class="tab-indicator-wrapper"><div class="tab-indicator"></div></div> </ion-scroll>');

            }
            else {

                tabsBar = angular.element('<div class="slidingTabs"><ul>' + tabItems + '</ul> <div class="tab-indicator-wrapper"><div class="tab-indicator"></div></div> </div>');

            }

            slider = angular.element(element);

            var compiled = $compile(tabsBar);
            slider.parent().prepend(tabsBar);
            compiled(scope);

            //get Tabs DOM Elements
            indicator = angular.element(tabsBar[0].querySelector(".tab-indicator"));

            //get the slideBoxHandle
            var slideHandle = slider.attr('delegate-handle');
            var scrollHandle = tabsBar.attr('delegate-handle');

            ionicSlideBoxDelegate = $ionicSlideBoxDelegate;
            if (slideHandle) {
                ionicSlideBoxDelegate = ionicSlideBoxDelegate.$getByHandle(slideHandle);
            }

            if(options.slideTabsScrollable) {

                ionicScrollDelegate = $ionicScrollDelegate;
                if (scrollHandle) {
                    ionicScrollDelegate = ionicScrollDelegate.$getByHandle(scrollHandle);
                }

            }

            addEvents();
            setTabBarWidth();
            slideToCurrentPosition();
        };

        var addEvents = function() {

            ionic.onGesture("dragleft", scope.onSlideMove ,slider[0]);
            ionic.onGesture("dragright", scope.onSlideMove ,slider[0]);
            ionic.onGesture("release", scope.onSlideChange ,slider[0]);

        }

        var setTabBarWidth = function() {

            if( !angular.isDefined(slideTabs) || slideTabs.length == 0 ) {
                return false;
            }

            tabsList = tabsBar.find("ul");
            var tabsWidth = 0;

            angular.forEach(slideTabs, function (currentElement,index) {

                var currentLi = angular.element(currentElement);
                tabsWidth += currentLi[0].offsetWidth;
            });

            if(options.slideTabsScrollable) {

                angular.element(tabsBar[0].querySelector(".scroll")).css("width", tabsWidth + 1 + "px");

            }
            else {

                slideTabs.css("width",tabsList[0].offsetWidth / slideTabs.length + "px");
            }

            slideToCurrentPosition();

        };

        var addTabTouchAnimation = function(event,currentElement) {

            var ink = angular.element(currentElement[0].querySelector(".ink"));

            if( !angular.isDefined(ink) || ink.length == 0 ) {
                ink = angular.element("<span class='ink'></span>");
                currentElement.prepend(ink);
            }

            ink.removeClass("animate");

            if(!ink.offsetHeight && !ink.offsetWidth)
            {

                d = Math.max(currentElement[0].offsetWidth, currentElement[0].offsetHeight);
                ink.css("height", d + "px");
                ink.css("width", d + "px");
            }

            x = event.offsetX - ink[0].offsetWidth / 2;
            y = event.offsetY - ink[0].offsetHeight / 2;

            ink.css("top", y +'px');
            ink.css("left", x +'px');
            ink.addClass("animate");
        }

        var slideToCurrentPosition = function() {

            if( !angular.isDefined(slideTabs) || slideTabs.length == 0 ) {
                return false;
            }

            var targetSlideIndex = ionicSlideBoxDelegate.currentIndex();

            var targetTab = angular.element(slideTabs[targetSlideIndex]);
            var targetLeftOffset = targetTab.prop("offsetLeft");
            var targetWidth = targetTab[0].offsetWidth;

            indicator.css({
                "-webkit-transition-duration": "300ms",
                "-webkit-transform":"translate(" + targetLeftOffset + "px,0px)",
                "width": targetWidth + "px"
            });

            if (options.slideTabsScrollable && ionicScrollDelegate) {
                var scrollOffset = 40;
                ionicScrollDelegate.scrollTo(targetLeftOffset - scrollOffset,0,true);
            }

            slideTabs.removeClass("tab-active");
            targetTab.addClass("tab-active");

        }

        var setIndicatorPosition = function (currentSlideIndex, targetSlideIndex, position, slideDirection) {

            var targetTab = angular.element(slideTabs[targetSlideIndex]);

            var currentTab = angular.element(slideTabs[currentSlideIndex]);
            var targetLeftOffset = targetTab.prop("offsetLeft");

            var currentLeftOffset = currentTab.prop("offsetLeft");
            var offsetLeftDiff = Math.abs(targetLeftOffset - currentLeftOffset);

            if( currentSlideIndex == 0 && targetSlideIndex == ionicSlideBoxDelegate.slidesCount() - 1 && slideDirection == "right" ||
                targetSlideIndex == 0 && currentSlideIndex == ionicSlideBoxDelegate.slidesCount() - 1 && slideDirection == "left" ) {
                return;
            }

            var targetWidth = targetTab[0].offsetWidth;
            var currentWidth = currentTab[0].offsetWidth;
            var widthDiff = targetWidth - currentWidth;

            var indicatorPos = 0;
            var indicatorWidth = 0;

            if (currentSlideIndex > targetSlideIndex) {

                indicatorPos = targetLeftOffset - (offsetLeftDiff * (position - 1));
                indicatorWidth = targetWidth - ((widthDiff * (1 - position)));

            }
            else if (targetSlideIndex > currentSlideIndex) {

                indicatorPos = targetLeftOffset + (offsetLeftDiff * (position - 1));
                indicatorWidth = targetWidth + ((widthDiff * (position - 1)));

            }

            indicator.css({
                "-webkit-transition-duration":"0ms",
                "-webkit-transform":"translate(" + indicatorPos + "px,0px)",
                "width": indicatorWidth + "px"
            });

            if (options.slideTabsScrollable && ionicScrollDelegate) {
                var scrollOffset = 40;
                ionicScrollDelegate.scrollTo(indicatorPos - scrollOffset,0,false);
            }

        }

        scope.onTabTabbed = function(event, index) {
            addTabTouchAnimation(event, angular.element(event.currentTarget) );
            ionicSlideBoxDelegate.slide(index);
            slideToCurrentPosition();
        }

        scope.tabs = [];

        scope.addTabContent = function ($content) {

            scope.tabs.push($content);
            scope.$apply();

            $timeout(function() {
                slideTabs = angular.element(tabsBar[0].querySelector("ul").querySelectorAll(".slider-slide-tab"));
                slideToCurrentPosition();
                setTabBarWidth()
            })

        }

        scope.onSlideChange = function (slideIndex) {
            slideToCurrentPosition();
        };

        scope.onSlideMove = function () {
            var scrollDiv = slider[0].getElementsByClassName("slider-slide");

            var currentSlideIndex = ionicSlideBoxDelegate.currentIndex();
            var currentSlide = angular.element(scrollDiv[currentSlideIndex]);
            var currentSlideLeftOffset = currentSlide.css('-webkit-transform').replace(/[^0-9\-.,]/g, '').split(',')[0];

            var targetSlideIndex = (currentSlideIndex + 1) % scrollDiv.length;
            if (currentSlideLeftOffset > slider.prop("offsetLeft")) {
                targetSlideIndex = currentSlideIndex - 1;
                if (targetSlideIndex < 0) {
                    targetSlideIndex = scrollDiv.length - 1;
                }
            }
            var targetSlide = angular.element(scrollDiv[targetSlideIndex]);

            var position = currentSlideLeftOffset / slider[0].offsetWidth;
            var slideDirection = position > 0 ? "right":"left";
            position = Math.abs(position);

            setIndicatorPosition(currentSlideIndex, targetSlideIndex, position, slideDirection);
        };

        init();
    },
    controller: ['$scope',function($scope) {
        this.addTab = function($content) {
            $timeout(function() {
                if($scope.addTabContent) {
                    $scope.addTabContent($content);
                }
            });
        }
    }]
};

}]);

slidingTabsDirective.directive('ionSlideTabLabel', [ function() {

return {
    require: "^ionSlideTabs",
    link: function ($scope, $element, $attrs, $parent) {
        $parent.addTab($attrs.ionSlideTabLabel);
    }
}

}]);
`