Vuejs сотрудничает с mint-ui для разработки мобильного веба

внешний интерфейс JavaScript Vue.js CSS

первоначальное намерение

Это относительно срочное дело (два дня, написание одной страницы с воспроизведением видео, просмотр картинок, смешанный список графики и текста, обновление с подтягиванием, обновление с прокруткой и т. д.), в начале мои коллеги использовали традиционный H5 + JS +CSS Кстати, я переживал за прогресс, поэтому упорно использовал vuejs.Почему я сказал упорно?Причина в том,что второй раз использую vuejs в проекте.Опыт первого использования не очень , в основном потому что vuejs в лоу Адаптация версии на андроидной стороне действительно головная боль.

Выбор компонента пользовательского интерфейса

Вернемся к тому времени, когда я впервые использовал vuejs. Тогда я выбрал element-ui с богатыми элементами. Поскольку элементы больше соответствовали дизайну продукта, я не стал искать другие компоненты. У меня не было другого выбора, кроме как в конечном итоге, потому что element-ui в основном ориентирован на pcweb, в результате проблема адаптации пользовательского интерфейса на мобильном терминале видна, и есть много ям. На этот раз я был более рациональным и выбрал mint-ui, который является основным мобильным терминалом команды Ele.me.Пока что впечатления очень хорошие.

Процесс использования Mint-ui

Mint-ui хорошо поддерживается и прост в использовании.Мой основной процесс использования выглядит следующим образом:

  • Сначала испытайте демоверсию на своем телефоне, отсканируйте ссылку:

Mint UI Испытайте демонстрации предоставленных компонентов одну за другой, оцените, соответствуют ли они вашим потребностям, и получите хорошее представление о контенте, который они поддерживают.

  • При использовании обращайтесь к указанному демонстрационному коду. Потому что официальной документации немного не хватает, но в сочетании с демо-кодом вполне достаточно.mint-ui/example/pages at master · ElemeFE/mint-ui · GitHub

  • Если функций в демонстрации недостаточно для удовлетворения ваших потребностей, продолжайте обращаться к документации, поскольку в документации будут перечислены все значения атрибутов.mint-ui documentation

  • Реально не могу поддержать, кастом.

Зафиксируйте несколько ям в процессе разработки

Адаптация мобильного терминала rem (в случае mint-ui)

Это первая проблема, с которой я столкнулся при сборке фреймворка.По моему предыдущему опыту, я сначала пытался использовать px2rem-loader для равномерного преобразования px в rem, но проблема в том, что использование px2rem сделает все файлы css в проекте.px преобразуется в rem, а css в mint-ui не может быть преобразован, потому что он сделал некоторые адаптации, но он не основан на методе rem, поэтому, если вы форсируете преобразование его внутренних файлов css, вообще вызывает все его внутренние элементы должны быть меньше по размеру.

Таким образом, цель должна состоять в том, чтобы сделать rem-преобразование содержимого стиля, написанного вами, поэтому используется postcss, потому что postcss имеет плагин px2rem.

Вставьте vue-loader.conf.js:

'use strict'
const utils = require('./utils')
const config = require('../config')
const precss = require('precss')
const pxtorem = require('postcss-px2rem')
const autoprefixer = require('autoprefixer')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
  ? config.build.productionSourceMap
  : config.dev.cssSourceMap

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
  }),
  postcss:[
      precss(),
      autoprefixer({
          browsers: [
              'last 10 Chrome versions',
              'last 5 Firefox versions',
              'Safari >= 6',
              'ie > 8'
          ]
      }),
      pxtorem({
          remUnit: 75 //设计尺寸的1/10
      })
  ],
  cssSourceMap: sourceMapEnabled,
  cacheBusting: config.dev.cacheBusting,
  transformToRequire: {
    video: ['src', 'poster'],
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  }
}

Размер шрифта корневого узла динамически устанавливается в Main.js, а rem адаптирован для ответа:

// px2rem
window.onresize = setHtmlFontSize
function setHtmlFontSize () {
  const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
  const htmlDom = document.getElementsByTagName('html')[0]
  htmlDom.style.fontSize = htmlWidth / 10 + 'px'
}
setHtmlFontSize()

Требования к горизонтальной прокрутке для списков изображений

Горизонтальная прокрутка, требуемая в требованиях, аналогична:

Процесс реализации этого требования не очень важен, нужно понимать принцип прокрутки в WEB: * Принцип вертикальной прокрутки заключается в том, что когда видимая высота браузера (веб-просмотра) меньше высоты содержимого, которое он несет, его можно прокручивать, то есть появится полоса прокрутки, такая как обычный бесконечный вертикальный список . * Принцип горизонтальной прокрутки аналогичен: когда горизонтальная видимая ширина контейнера меньше ширины содержимого, его можно прокручивать горизонтально.

Реализация здесь заключается в использовании лучшего компонента прокрутки vue, better-scroll.

Уровень шаблона имеет требования: itemContainer -> imageWrapper -> imageItem, где itemContainer должен иметь фиксированную ширину и скрывать полосу прокрутки.

<div class="itemImage" ref="itemContainer">
      <!--需要支持横向滚动-->
      <ul ref="imageWrapper">
        <li class="image_item" :key="image.id" v-for="(image, index) in item.images" ref="imageItem">
          <img class="image" :src="image.big"/>
        </li>
      </ul>
    </div>

.itemImage {
  overflow: hidden;
  width: 750px;
}

Метод использует vuenextTick，nextTick может быть указанв следующий разМетод, который будет выполняться после обновления DOM.

mounted () {
      this.$nextTick(() => {
        this.initImageScroll()
      })
  },
methods: {
   initImageScroll: function () {
      let width = 0
      for (let i = 0; i < this.item.images.length; i++) {
        width += this.$refs.imageItem[0].getBoundingClientRect().width
      }
      this.$refs.imageWrapper.style.width = width + 'px'
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.itemContainer, {
            startX: 0,
            click: true,
            scrollX: true,
            scrollY: false,
            eventPassthrough: 'vertical'
          })
        } else {
          this.scroll.refresh()
        }
      })
    },
}

Проблема автоматического сброса прокрутки после возврата маршрута

Эта проблема объясняется в официальном выпуске vue-router:Поведение при прокрутке | Vue RouterВот как добавить реализацию при создании экземпляра vue-router:

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Main',
      component: Main,
      meta: {
        keepAlive: true
      }
    },
    {
      path: '/ImagePlayer',
      name: 'ImagePlayer',
      component: ImagePlayer,
      meta: {
      }
    }
  ],
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      if (from.meta.keepAlive) {
        from.meta.savedPosition = document.body.scrollTop
      }
      return { x: 0, y: to.meta.savedPosition || 0 }
    }
  }
})

Проблема предотвращения отслеживания родительского элемента при прокрутке плавающего слоя подэлемента

Это требование на самом деле очень распространено.После появления плавающего слоя содержимое отображается на плавающем слое.Когда есть операция прокрутки на плавающем слое, необходимо предотвратить одновременную прокрутку нижних элементов. Мое решение здесь состоит в том, чтобы использовать position=fixed, чтобы исправить это. * Когда появится плавающий слой, динамически установите корневой элемент нижнего элемента на фиксированный и запишите текущее значение scrollY * Когда плавающий слой исчезнет, ​​динамически установите корневой элемент нижнего элемента обратно в исходное значение и прокрутите назад до позиции scrollY (потому что позиция будет сброшена после сброса позиции)

Метод реализации следующий:

   /**
     * 防止浮层唤起时底部滑动跟随问题
     * @param isFixed
     */
    stopBodyScroll: function (isFixed) {
      let bodyEl = document.getElementById('main')
      if (isFixed) {
        this.saveMainTop = window.scrollY
        bodyEl.style.position = 'fixed'
        bodyEl.style.top = -this.saveMainTop + 'px'
      } else {
        bodyEl.style.position = ''
        bodyEl.style.top = ''
        window.scrollTo(0, this.saveMainTop)
      }
    }

Загрузка не пропадает при использовании mt-loadmore

Эта проблема вызвана отсутствием ясности в документации, а onTopLoaded его внутренних подкомпонентов не вызывается в нужное время. Причина в том, что здесь записан метод mt-loadmore, делающий pull-down Refresh: код сохраняет только фрагмент, а в методе loadtop две рефы loadmore, причина в том, что в моем приложении две вкладки, и у обоих есть функция обновления по выпадающему меню, причина, по которой она здесь выброшена, заключается в том, что всем нужно обращать внимание,В одном и том же компоненте, если вы используете несколько компонентов mt-loadmore, вам необходимо указать разные значения ref, например здесь loadmore1 и loadmore2, иначе при вызове метода onTopLoaded будут возникать различные исключения, в том числе невозможность остановить текущий загрузка

 <!--下拉刷新列表-->
<template>
<div>
 <mt-loadmore 
		:top-method="loadTop" 
		:top-loading-text="null" 
		:top-drop-text="null"
		:top-pull-text="null"
     ref="loadmore1" 
		@top-status-change="handleTopChange">
</div>
</template>
<script>
export default {
   methods: {
    /**
     *  下拉刷新
     */
    loadTop: function () {
      if (this.selected === '1') {
        this.getYourData01(() => {
          this.$refs.loadmore1.onTopLoaded()
        })
      } else {
        this.getYourData02(() => {
          this.$refs.loadmore2.onTopLoaded()
        })
      }
    },
  }
}
</script>

конец

Mint-ui отлично работает, очень рекомендую. Спи, би-би.

Категории