28
4
Điều đầu tiên trước tiên: Đừng hoảng sợ khi sinh viên phát triển front-end gặp phải vấn đề này, bởi vì tôi sẽ giúp bạn vượt qua tất cả những cạm bẫy mà bạn phải bước vào tiếp theo, vì vậy tôi có blog này. Hy vọng điều này sẽ giúp.
Thành phần băng chuyền: Swiper@4.5.1 (phiên bản cuối cùng của 4x ổn định).
Thiết bị: Các phiên bản iOS 15x, 14 và 16 đều ổn. Vấn đề chỉ có ở phiên bản iOS 15.
Hiện tượng: Trượt sang trái phải bị kẹt, 2 tay không nối được, vừa buông tay ra sẽ bị kẹt. Không có vấn đề như vậy trong Safari hoặc WeChat trên cùng một điện thoại, chỉ trong ứng dụng.
Một số trường hợp: https://ask.csdn.net/questions/7544894 https://juejin.cn/post/7023231843004579877.
Tất nhiên không có giải pháp nào cho tất cả, chúng chỉ là gặp phải mà thôi.
Tôi đã thử hầu hết các phương pháp trên Internet và đã thay đổi phiên bản 3x, 5x nhưng không có kết quả...
Được rồi, tôi không thể tìm thấy giải pháp trực tuyến. Tôi tuân theo quy tắc cũ và xem xét các vấn đề trên github. Nó hữu ích nhưng không đặc biệt hữu ích.
Cách 1: Nâng cấp lên phiên bản 5x. Có thuộc tính mới cssMode. Sau khi bật thuộc tính này, nó sẽ sử dụng API CSS Scroll Snap hiện đại. Nó không hỗ trợ nhiều tính năng của Swiper nhưng có thể mang lại hiệu suất tốt hơn. Một số thao tác và chuyển tiếp js phức tạp sẽ được thay thế bằng css.
Nhưng: thiếu rất nhiều tính năng (không khuyến khích).
Trung tâm cá nhân
Điều phát hành
từ bỏ
var mySwiper = new Swiper('.swiper-container', { cssMode: true });
Cách 2: Kích hoạt tính năng tăng tốc phần cứng cho css (nhưng nó chỉ giải quyết được vấn đề màn hình trắng nhấp nháy và còn lag).
1
.swiper-trượt
{
2
-webkit-backface-visibility
:
ẩn giấu
;
3
-webkit-biến đổi
:
dịch3d(0,0,0)
;
4
}
5
6
.swiper-wrapper
{
7
-webkit-transform-style
:
bảo tồn-3d
;
8
}
Phương pháp 3 https://github.com/nolimits4web/swiper/issues/4493.
1
chức năng
easeOut(thời gian hiện tại, giá trị bắt đầu, giá trị thay đổi, thời lượng) {
2
currentTime /= thời lượng;
3
trở lại
-thay đổiGiá Trị * thời gian hiện tại * (thời gian hiện tại - 2) +
giá trị bắt đầu;
4
}
5
6
chức năng
getTransitionSimulator(ele, khoảng cách, thời lượng, gọi lại) {
7
để xử lý;
8
hãy giải quyết;
9
trở lại
() =>
{
10
hãy hứa =
mới
Lời hứa(res =>
{
11
giải quyết =
độ phân giải;
12
});
13
hãy bắt đầuTime =
hiệu suất.hiện tại();
14
cancelAnimationFrame(xử lý);
15
chức năng
_hoạt ảnh() {
16
hãy để hiện tại =
hiệu suất.hiện tại();
17
//
khoảng cách để di chuyển khung này
18
hãy để disVal = easeOut(current - startTime, 0
, khoảng cách, thời gian);
19
20
gọi lại(ele, disVal);
21
nếu như
((hiện tại - startTime) / thời lượng < 1
) {
22
xử lý =
yêu cầuAnimationFrame(_animation);
23
}
khác
{
24
cancelAnimationFrame(xử lý);
25
giải quyết();
26
}
27
}
28
xử lý =
yêu cầuAnimationFrame(_animation);
29
trở lại
hứa;
30
};
31
}
32
33
Swiper.on('setTranslate', (swiper, targetTransVal) =>
{
34
const wrapper = swiper.$wrapperEl[0];
//
phần tử bao bọc
35
//
khi sử dụng chuyển tiếp để làm hoạt hình
36
nếu như
(wrapper.style.transitionDuration !== '0ms'
) {
37
//
lấy giá trị dịch gốc
38
const curTransVal =
cái này
.swiper.getTranslate();
39
//
hủy bỏ hoạt ảnh của quá trình chuyển đổi
40
wrapper.style.transitionDuration = ''
;
41
wrapper.style.transform =
`dịch3d(${curTransVal}px, 0px, 0px)`;
42
43
//
sử dụng requestFrameAnimation để tự làm hoạt hình
44
const transSimulator = getTransitionSimulator(wrapper, targetTransVal - curTransVal, 300, (el, val) =>
{
45
el.style.transform = `translate3d(${curTransVal +
val}px, 0px, 0px)`;
46
});
47
chờ transSimulator();
48
//
Kết thúc quá trình chuyển đổi, gọi lại hàm (mô phỏng việc triển khai nội bộ của Swiper)
49
Swir.onSlideToWrapperTransitionEnd.call(wrapper, { target: Wrapper });
50
51
}
52
})
Hữu ích, nhưng nó chỉ áp dụng cho việc trượt toàn trang chứ không áp dụng cho nhiều cột.
Cách 4: Dùng máy tính Mac tải link xcode về Iphone để tạo App Demo và nhúng trang H5 của bạn. Xem nếu nó bình thường, nếu có. Vậy thì không còn thắc mắc gì nữa, vấn đề không nằm ở giao diện người dùng, hãy để bộ phận phát triển iOS khắc phục sự cố. Đã giải quyết thành công.
Cuối cùng: Tôi đang nhắm mục tiêu phát triển ios ở đây. Đây thực sự là một phần nhất định của Ứng dụng ảnh hưởng đến băng chuyền toàn cầu. Than ôi, nếu bạn cũng gặp phải, vui lòng cho tôi biết giải pháp của bạn. Thanh! ! .
。
Cuối cùng, bài viết này về độ trễ và màn hình trắng nhấp nháy khi băng chuyền H5swiper được nhúng trong iOSApp kết thúc tại đây. Nếu bạn muốn biết thêm về độ trễ và màn hình trắng nhấp nháy khi băng chuyền H5swiper được nhúng trong iOSApp, vui lòng tìm kiếm bài viết CFSDN. Hoặc tiếp tục duyệt các bài viết liên quan, tôi hy vọng bạn sẽ ủng hộ blog của tôi trong tương lai! .
28
4
0
Tôi đang cố gắng tạo băng chuyền trong Angular bằng cách sử dụng công cụ vuốt (https://swiperjs.com/angular). Tôi gặp lỗi này: Error:node_modules/swiper/ang
Tôi đang sử dụng cấu hình này cho trình quét: var Swiper = new Swiper('.swiper-container', { spaceBetween: 30, slidePerVi
Tôi đang nỗ lực thiết lập thanh gạt trong ứng dụng của mình trong vài ngày qua nhưng tôi vẫn không gặp may và không tìm thấy bất kỳ ví dụ hoạt động nào từ đây đến các vấn đề về Github hoặc bất kỳ nơi nào khác trên web. Tôi không thể đặt hoạt ảnh của thanh trượt ở chế độ dọc bằng bất kỳ giải pháp được đề xuất nào cho vấn đề này
Tôi đang sử dụng plugin iDangeous Swiper. Tôi cần thay đổi định kỳ tất cả các trang trình bày trong phương pháp ajax. Cách tốt nhất để làm điều tương tự là gì. Câu trả lời tốt nhất là gọi destroy() trên Swiper để xóa/sử dụng phép thuật mới
Vì vậy, tôi đã sử dụng Swiper.js để tạo thanh trượt cuộn tự động theo đề xuất của một người bạn. Nhưng tôi không thể tìm ra cách chuyển đổi giữa các trang trình bày một cách suôn sẻ. Hiện tại khi mình thay đổi ms autoplay thì nó chỉ thay đổi thời gian cần thiết để thay đổi slide
Tôi muốn di chuyển biểu tượng phần tử phân trang từ dưới lên trên cùng của khu vực xem. Hiện tại, biểu tượng phần tử phân trang xuất hiện bên dưới tất cả nội dung slide được đính kèm hoặc trình bao bọc hoặc JavaScript. Tôi muốn nó ở trên đó. Thêm thông tin: https://
Tôi đang cố gắng thêm một lớp phần tử mới vào mỗi dấu đầu dòng phân trang và tôi muốn giữ kiểu mặc định của thanh vuốt. Vì vậy, những gì tôi làm là pagination={ clickable: true,
Tôi có một trang đơn giản với nhiều thanh trượt. Mỗi thanh trượt bao gồm ba thanh trượt; trái, giữa và phải. Tôi muốn đặt lại tất cả các thanh trượt về giữa nếu một thanh trượt khác thay đổi. Hãy nghĩ về nó như một người dùng
Tôi đang sử dụng một thao tác vuốt cơ bản mà không có bất kỳ tùy chọn nào. Sau đó, tôi có một trình nghe "mousemove" trong nội dung trang web của mình. Tôi làm điều này để tạo hiệu ứng theo dõi chuột. Điều này hoạt động rất tốt, nhưng khi tôi bắt đầu kéo trang trình bày thì có vẻ như sự kiện sẽ không còn đến nữa và tùy chỉnh của tôi
Tôi đang sử dụng một thao tác vuốt cơ bản mà không có bất kỳ tùy chọn nào. Sau đó, tôi có một trình nghe "mousemove" trong nội dung trang web của mình. Tôi làm điều này để tạo hiệu ứng theo dõi chuột. Điều này hoạt động rất tốt, nhưng khi tôi bắt đầu kéo trang trình bày thì có vẻ như sự kiện sẽ không còn đến nữa và tùy chỉnh của tôi
Tôi đặt Swiper hiển thị 2 hàng trên mỗi cột, nhưng khi tôi thực hiện việc này, lớp Swiper-Slide-Active không được đặt chính xác, tức là lớp này không được áp dụng cho thanh trượt hiển thị slide (2) ở giữa. Có ai biết tôi đang làm gì sai ở đây không? Trượt xuống
Gần đây tôi đã thử thiết lập tính năng "idangero.us Swiper" trên trang web của mình. Thật không may, nó dường như không hoạt động. Tôi có rất ít kinh nghiệm với JS nên tôi không biết làm cách nào để giải quyết vấn đề này. Lỗi tôi nhận được là Uncaught Ref
Tôi đang sử dụng tính năng vuốt để hiển thị các danh mục sản phẩm khác nhau trong div với lớp trượt-slide để gọi động các sản phẩm của danh mục. Nhưng không phải tất cả các sản phẩm đều được hiển thị. Ngay cả khi tràn hoặc cao 100%, nó cũng không hiển thị tất cả sản phẩm
Tôi đang tìm cách thay đổi băng chuyền thanh trượt trong luồng trang bìa. Đây là những gì tôi nhận được bây giờ. var mySwiper = new Swiper('.swiper-container-aboutus', { // Opti
Tôi đang sử dụng thanh trượt trên một trang web và muốn tắt nó nếu chỉ có một trang trình bày. Hiện tại chỉ có một slide hiển thị phân trang mà bạn có thể nhấp hoặc vuốt. Lý tưởng nhất là nếu bạn chỉ có một slide thì sẽ không có bất kỳ sự tương tác nào. Js hiện tại của tôi là:
Làm cách nào để xóa điểm phân trang trượt con cuối cùng trong danh sách phản ứng gốc-swiper-phẳng? Tôi đã thử một vài thứ nhưng dường như không thể. Xin hãy giúp tôi.
Tôi đang sử dụng Rangelider.js của Andre Ruffert bên trên Swiper.js của iDangeous nhưng mỗi lần tôi vuốt thanh trượt mà tôi khởi tạo, nó cũng gây khó chịu cho Swiper
Tôi đang cố gắng thêm một lối tắt đơn giản vào trang web Nextjs của mình (V13 với Bộ định tuyến ứng dụng) nhưng nó gây ra đủ loại lỗi. . Đầu tiên, tôi đã thử nhập như bình thường, sao chép từ một trong các bản demo được liệt kê trên trang web của họ và nó hiển thị tốt, nhưng các nút điều hướng thì không.
Tôi đang cố gắng thêm một lối tắt đơn giản vào trang web Nextjs của mình (V13 với Bộ định tuyến ứng dụng) nhưng nó gây ra đủ loại lỗi. . Đầu tiên, tôi đã thử nhập như bình thường, sao chép từ một trong các bản demo được liệt kê trên trang web của họ và nó hiển thị tốt, nhưng các nút điều hướng thì không.
Tôi đang cố gắng thêm một lối tắt đơn giản vào trang web Nextjs của mình (V13 với Bộ định tuyến ứng dụng) nhưng nó gây ra đủ loại lỗi. . Đầu tiên, tôi đã thử nhập như bình thường, sao chép từ một trong các bản demo được liệt kê trên trang web của họ và nó hiển thị tốt, nhưng các nút điều hướng thì không.
Tôi là một lập trình viên xuất sắc, rất giỏi!