Точно рассчитать высоту прокрутки апплета WeChat, подходит для всех моделей

внешний интерфейс Апплет WeChat

Как известно, скольжениеscrollКомпоненты очень важны для мобильных устройств и используются почти на каждой странице.

И небольшая программаscroll-viewКомпоненты более без косточек, и вам нужно указать высоту, чтобы использовать их нормально. Когда макет сложный, кто даст вам высоту. . .

Яма к яме никак, все же придется использовать... Поскольку по официальному требованию должна пройти высота, то найдите способ ее рассчитать.

1. Анализ компоновки, формула вывода

Сначала приведите пример:

Это немного более сложная страница с двумя вверхуtabВкладки, страница каждой вкладки является дочерним компонентом. Макет второго подкомпонента — это шапка вверху, а внизу —scroll-view.

Еще один анатомический рисунок...

Страница разделена на три части, вкладка, заголовок, прокрутка. Не забывайте, что между каждым разделом естьmargin, который устанавливается здесь для каждогоmarginобе10px.

Итак, чтобы рассчитатьscroll-viewВысота может быть получена следующим образомформула:

scroll-view 的高度 = 页面可用高度 - tab高度 - title高度 - 10 - 10

почему минус два10Шерстяная ткань? сказано выше10даmarginРасстояние,tabа такжеtitleимеют10pxизmargin,titleа такжеscroll-viewТакже есть10pxизmargin.

Следует отметить, что единицы измерения, используемые для расчета,px, а не апплетrpx. Поскольку следующий вызов интерфейса для получения доступной высоты экранаpx.

2. Вычислить высоту переменной

2.1 Расчет высоты одного узла

Переменные в приведенной выше формуле: доступная высота страницы,titleвысота,tabвысота.

Здесь необходимо рассчитать доступную высоту страницы иtitleвысота, потому что для простотыtabВысота написана на смерть50px,конечно не беда если не прописано насмерть,вычисляется в родительском компонентеtabПросто передайте высоту дочернему компоненту.

Далее официально начинается расчет

//计算 scroll-view 的高度
computeScrollViewHeight() {
  let that = this
  let query = wx.createSelectorQuery().in(this)
  query.select('.title').boundingClientRect(function(res) {
    //得到标题的高度
    let titleHeight = res.height
    //scroll-view的高度 = 屏幕高度- tab高(50) - 10 - 10 - titleHeight
    //获取屏幕可用高度
    let screenHeight = wx.getSystemInfoSync().windowHeight
    //计算 scroll-view 的高度
    let scrollHeight = screenHeight - titleHeight - 70
    that.setData({
      scrollHeight: scrollHeight
    })
  }).exec()
},

В основном это рассчитывается через API, инкапсулированный апплетом.

wx.getSystemInfoSync()Вы можете получить различную информацию об устройстве.Есть два параметра о высоте, один-это высота экранаscreenHeight, один - доступная высота окнаwindowHeight. Будьте внимательны при расчетеwindowHeight, расчетная высота верна.screenHeightЭто высота экрана мобильного телефона, включая строку состояния мобильного телефона и строку заголовка апплета.

При доступной высоте экрана требуется и высота элемента. Апплет Calculate Element Height также предоставляет API, см.API информации об узле WXML.

Для конкретного использования просто посмотрите документацию.Упрощенные шаги использования:

let query = wx.createSelectorQuery().in(this)
query.select('.title').boundingClientRect(function(res) {
    //在这里做计算，res里有需要的数据
}).exec()

Обратите внимание на компонентcomponentЕсли используется вwx.createSelectorQuery().in(this), измените область выбора селектора на компонент пользовательского компонента. (Изначально селектор выбирает только узлы на уровне страницы, а не узлы в каких-либо пользовательских компонентах.)

Что делать, если вы хотите измерить высоту нескольких узлов одновременно?

2.2 Расчет высоты нескольких узлов

Можно вычислить один, конечно, можно вычислить несколько одновременно. следующим образом:

computeScrollViewHeight() {
  let that = this
  let query = wx.createSelectorQuery().in(this)
  query.select('.search').boundingClientRect()
  query.select('.title-wrapper').boundingClientRect()
  query.exec(res => {
    let searchHeight = res[0].height
    let titleHeight = res[1].height
    let windowHeight = wx.getSystemInfoSync().windowHeight
    let scrollHeight = windowHeight - searchHeight - titleHeight - 30 - 5 - 50 
    this.setData({ scrollHeight: scrollHeight})
  })
},

Напишите столько узлов, сколько у вас естьquery.select('.search').boundingClientRect(), а затем позвонитеquery.exec()Выполните операцию, чтобы получить массив информации об узле.

Уведомление:звоните в упакованном видеcomputeScrollViewHeight()Время находится в функции жизненного циклаready()в, не вcreated(), иначе данные не могут быть получены.

видетьКонструктор компонентов

3. Используйте рассчитанные результаты в wxml

Как им пользоваться после завершения расчета?

<scroll-view scroll-y style='height: {{scrollHeight + "px"}}'></<scroll-view>

Используйте вышеуказанный метод.
Примечание. Не забудьте добавить единицу измерения после переменнойpx, если его не добавить, произойдет ошибка.

Выше приведен метод точного расчета высоты прокрутки апплета WeChat, и вы больше никогда не будете об этом беспокоиться.scroll-viewСильно запутался!

Категории