Question

https://codepen.io/douglascat90/pen/KeEaxd

我想添加javascript / css /所需的内容，以便我可以通过触摸在手机上向左或向右滑动，并且它将相应地向左或向右滑动。最好的方法是什么？我将在这里{@ {3}}

跟随达米安·德瑞吉尔（Damian Drygiel）制作的电码笔

def predict(self, TrainX, X, update_interval=None):
    N = TrainX.shape[0]
    if not update_interval:
        update_interval = N
    batch_size = 256
    test_iter = mx.io.NDArrayIter({'data': TrainX}, batch_size=batch_size, shuffle=False,
                                  last_batch_handle='pad')
    args = {k: mx.nd.array(v.asnumpy(), ctx=self.xpu) for k, v in self.args.items()}
    z = list(model.extract_feature(self.feature, args, None, test_iter, N, self.xpu).values())[0]
    kmeans = KMeans(self.num_centers, n_init=20)
    kmeans.fit(z)

    args['dec_mu'][:] = kmeans.cluster_centers_
    print(args)

    sample_iter = mx.io.NDArrayIter({'data': X})
    z = list(model.extract_feature(self.feature, args, None, sample_iter, N, self.xpu).values())[0]
    p = np.zeros((z.shape[0], self.num_centers))
    self.dec_op.forward([z, args['dec_mu'].asnumpy()], [p])
    print(p)
    y_pred = p.argmax(axis=1)

    self.y_pred = y_pred
    return y_pred

Answer 1

您将需要使用JavaScript，并相应地添加 touch 事件监听器：

https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

添加一个touchmove事件侦听器，以检测用户手指/脚趾/鼻子在屏幕上的相对位置。取整后，请使用style endpoint，并更新margin-left以等于您的距离（以像素为单位）。
添加第二个事件侦听器touchend。借此，检测用户是否在滑块的某个空白处（例如，用户已将内容推入30％，更新适当的input进行检查（当前-/ + 1）。

基于您提供的笔的快速入门：

const slider = document.getElementById('slider1');
const slides = slider.querySelectorAll('input');

slider.addEventListener('touchmove', (e) => {
  // Add step 1 in here
});

slider.addEventListener('touchend', (e) => {
  // Add step 2 in here
});

Answer 2

我在某处找到了一个函数，您可以更改一些函数以获得正确的结果。但是我认为如果没有JavaScript，就无法做到这一点。

carousel.on('touchstart touchmove touchend', function (e) {
                            touchHandler(e);
});
function touchHandler (event) {
                    var touch
                        , xSwipe
                        , ySwipe;

                    if (typeof event !== 'undefined'){  
                        // for vanilla javascript use event.touches
                        if (typeof event.originalEvent.touches !== 'undefined') {
                            touch = event.originalEvent.touches[0];

                            switch (event.originalEvent.type) {
                                case 'touchstart':
                                case 'mousedown':
                                    _touches[event.originalEvent.type].x = touch.pageX;
                                    _touches[event.originalEvent.type].y = touch.pageY;
                                    break;
                                case 'touchmove':
                                case 'mousemove':
                                    _touches[event.originalEvent.type].x = touch.pageX;
                                    _touches[event.originalEvent.type].y = touch.pageY;
                                    break;
                                case 'touchend':
                                case 'mouseup':
                                    if (!carousel.data('busyAnimating')) {
                                        _touches[event.originalEvent.type] = true;

                                        if (_touches.touchstart.x > -1 && _touches.touchmove.x > -1) {
                                            xSwipe = Math.abs(_touches.touchstart.x - _touches.touchmove.x);
                                            ySwipe = Math.abs(_touches.touchstart.y - _touches.touchmove.y);

                                            if (xSwipe > ySwipe && xSwipe > (getViewport().width * .33)) {
                                                _touches.direction = _touches.touchstart.x < _touches.touchmove.x ? 'left' : 'right';

                                                if (_touches.direction === 'left') {
                                                    moveToSlide('prev');
                                                } else if (_touches.direction === 'right') {
                                                    moveToSlide('next')
                                                }
                                            }
                                        }
                                    }
                                    break;
                            }
                        }
                    }
                }

如何在移动设备上触摸左右这张幻灯片？

2 个答案: