предисловие
С развитием бизнеса компании по оплате знаний эффект и опыт открытия продукта на горизонтальном экране лучше, чем на вертикальном экране. Я тоже так чувствую... Когда я впервые получил этот запрос, я некоторое время думал об этом.Это не так просто, как повернуть всю страницу на 90 градусов в горизонтальном экране.Не будет ли это конец? В итоге в процессе собственно разработки выяснилось, что не все так просто. Например, направление скольжения жеста по экрану не изменилось и т.д.! Поэтому я попытался перейти на Baidu и, наконец, не нашел удовлетворительного ответа. Позже я решил изучить это сам.Ниже приведен набор практик, которые я обобщил в процессе разработки.Студенты, которые справились лучше, также могут поделиться и исправить меня.
визуализация
Во-первых, позвольте мне показать вам визуализацию
Эффект изображения один:
Он по-прежнему выглядит довольно высоким~, но этот рендеринг изначально разработан для приложения.На самом деле, страница H5 будет иметь строку заголовка и нижнюю панель возврата при доступе в WeChat, как показано на следующем рисунке, фактический эффект отображения H5 (андроид):
Вы можете пройти первый опыт (с доступом к микроканалу) Сайт проектаНет. Этот MM365.com/math box/Ind…После загрузки страницы нажмите кнопку пробной версии, чтобы перейти на страницу горизонтального экрана.
Требования к проекту и анализ
Требования к проекту
1. Требование 1: планета в рендеринге 1 должна поддерживать скольжение влево и вправо, а также поддерживать эффект 3D (дальний и ближний масштаб) во время процесса скольжения.
2. Требование 2: Рендеринг 2 будет иметь несколько классов, которые должны поддерживать скольжение влево и вправо.
3. Требование 3: Содержимое рендеринга 3 должно занимать ровно один экран
анализировать
1. Требование к анализу 1: планетарная переключающая часть реализована с помощью swiper.
2. Анализ требований 2: Кажется, что нет никаких трудностей.Использование полосы прокрутки по умолчанию системы может поддерживать прокрутку.
3. Требование к анализу 3: Что ж, занять экран непросто! Просто напишите его в соответствии с размером рендеринга.
Краткое изложение практики
Компания использует стек технологий vue, поэтому следующие компоненты также написаны на основе vue. Поняв принцип, я считаю, что независимо от того, какой фреймворк используется для его реализации, большой проблемы не будет, поэтому ученикам, которые не понимают vue, не нужно паниковать.
Проблемы и решения
1. Первое, что нужно сделать сейчас, как сделать страницу горизонтально?
h5 не имеет атрибута горизонтального экрана, поэтому эффект горизонтального экрана может быть достигнут только путем вращения элементов страницы.transform: rotate(90deg);, поэтому мы должны сначала иметьландшафтный контейнеркомпоненты. Затем поместите содержимое соответствующей страницы в этот контейнер, страница будет боком?
Код компонента контейнера горизонтального экрана выглядит следующим образом:
<template>
<section v-horizontal-screen @touchmove.prevent>
<!-- 页面具体内容 -->
<slot></slot>
</section>
</template>
<script>
export default {
directives: {
'horizontal-screen': {
bind(el, binding, vnode){
let self = vnode.context;
function reset(init){
let width = document.documentElement.clientWidth,
height = document.documentElement.clientHeight;
//在竖屏状态我们通过添加transform:rotate(90deg)，来让这个页面横过来
if(window.orientation == null || window.orientation === 180 || window.orientation === 0){//竖屏状态
el.style.webkitTransform = el.style.transform = `rotate(90deg)`;
el.style.width = `${height}px`;
el.style.height = `${width}px`;
el.style.webkitTransformOrigin = el.style.transformOrigin = `${width / 2}px center`;
//如果已经处于横屏状态就不做其他处理了
}else if(window.orientation === 90 || window.orientation === -90){//横屏状态
el.style.webkitTransform = el.style.transform = `rotate(0)`;
el.style.width = `${width}px`;
el.style.height = `${height}px`;
}
}
reset(true);
let timer = null;
el.fn = function(e) {
clearTimeout(timer);
timer = setTimeout(reset, 300);
}
window.addEventListener('resize', el.fn, false);
if("onorientationchange" in window){
window.addEventListener('orientationchange', el.fn, false);
}
},
unbind(el, binding, vnode){
window.removeEventListener('resize', el.fn, false);
window.removeEventListener('orientationchange', el.fn, false);
}
},
}
}
</script>
Теперь, когда страница перевернута, давайте заставим планету переключаться влево и вправо. Можно ли напрямую добавить плагин swiper?
Попробуйте ввести подключаемый модуль swiper, и когда он запустится, вы обнаружите, что жест меняется на противоположный, а содержимое скользит влево и вправо, когда вы проводите пальцем вверх и вниз. Поскольку теперь мы просто переворачиваем страницу по горизонтали, ось X и ось Y не изменились. Когда мы скользим вверх и вниз, на самом деле меняется ось X, которая является левым и правым слайдом обычной страницы. С любопытством я проверил API-интерфейс swiper, чтобы узнать, есть ли какая-либо поддержка для такого рода параметра операции. Результат не был найден, поэтому мне пришлось попробовать модифицировать исходный код самостоятельно. Вот частичный скриншот измененного кода:
Добавляется параметр isReverse.Если значение равно true, ось X и ось Y меняются местами. Конечно, isReverse также должен оценивать особые случаи, например, исходное приложение уже горизонтально, на самом деле нет необходимости, чтобы ось X и ось Y были напротив друг друга. Таким образом, наш контент может нормально скользить по направлению движения пальца.
Способ прокрутки в соответствии с предварительным требованием 2 выше решается с помощью полосы прокрутки по умолчанию.После реализации результата обнаруживается, что направление скольжения пальца также меняется на противоположное. Исходный жест перевернут, как его настроить? Я искал в Интернете и не нашел ответа, и ключевой момент в том, что этот вопрос не очень хорошо описан! Поскольку isscroll уже использовался ранее, можно смоделировать эффект системной полосы прокрутки. Попробуйте добавить его в код и обнаружите, что так же, как и свайпер, палец скользит в противоположном направлении. В конце концов, я могу только сам добавить параметр в исходный код. Общее сравнение iscroll меняет гораздо меньше кода, чем swiper. Просто нужно изменить одно место, скриншот выглядит следующим образом:
Требование 1 и требование 2 решены, теперь давайте решим «самое простое» третье требование. По сути, по идее, никаких других операций делать не нужно, нужно только писать по размеру рендеров.
Страница пишется, и нет проблем запустить ее на компьютере. Решил развернуть в тестовой среде и запустить на мобильном телефоне. Получается, что содержимое справа выходит за рамки экрана. Это потому, что в WeChat есть строка заголовка и нижняя панель, из-за чего контент выходит за пределы экрана. Подумайте об этом, на самом деле, на мобильных телефонах с разными соотношениями сторон, даже если нет строки заголовка и нижней панели, будет похожая ситуация. Как это решить? Наконец, я решил добавить еще один компонент автомасштабирования внутри компонента-контейнера горизонтального экрана.Фреймовая диаграмма конечной страницы выглядит так. Конечно, компоненты автомасштабирования добавляются только там, где это необходимо.
<template>
<div class="scale-wrap" :style="scaleWrapStyle">
<slot></slot>
</div>
</template>
<script>
//这块宽高比例根据效果图来设置
const DesignWidth = 375;
const DesignHeight = 667;
const DesignRatio = DesignWidth / DesignHeight;
function getScale(){
let width = document.documentElement.clientWidth,
height = document.documentElement.clientHeight;
if(window.orientation == null || window.orientation === 180 || window.orientation === 0){//竖屏状态
}else {
[width, height] = [height, width];
}
let ratio = width / height;
let scale;
//通过计算实际手机宽高比和效果图的宽高比得出最终的所让比例
if(ratio > DesignRatio){
scale = height / (width / DesignRatio);
}else if(ratio < DesignRatio){
scale = width / (height * DesignRatio);
}else{
scale = 1;
}
return scale;
}
export default {
data(){
return {
}
},
computed: {
scaleWrapStyle(){
let scale = getScale();
let scaleStr = `scale(${scale})`;
return { 'transform': scaleStr, '-webkit-transform': scaleStr };
}
},
}
</script>
<style lang="less" scoped>
.scale-wrap{
width: 100%;
height:100%;
display: flex;
transform-origin: left center;
}
</style>
На данный момент мы внедрили ряд решений для удовлетворения требований к горизонтальному экрану~
[Конечно, если вы столкнулись с проблемами горизонтального экрана, которые не могут быть решены предыдущими решениями, вы также можете опубликовать их для обсуждения. Посмотрите, есть ли хороший способ решить эту проблему. 】
Наконец, если документ был вам полезен, поставьте лайк~
Связанный код
подпись
by:Tao