предисловие

Финал НБА еще неделю не закончился, а чемпионат мира идет по расписанию. Все допоздна смотрели футбол, а я был заперт в маленькой темной комнате и молча печатал (бедное лицо). Испытайте апплетУдобно, быстро и экономит памятьПосле этого "Кавалерский бой" какое-то время назад решительно использовал апплет для просмотра. Поскольку у меня есть хороший опыт и я изучаю мини-программы, я сразу же хочу научиться создавать мини-программы «Tencent Sports» на практике. Пока просто хочу сказать "выбор хороший, процесс описать сложно". Хоть он и не завершен, но столкнулся со многими проблемами. Надеюсь, что этот обмен сможет вам помочь(исходный код).

визуализация

(Для сухого выступления лучше сначала подойти к графику колебаний)

Проблемы и решения

1, прокрутка в сборе

Давайте сначала посмотримдокументация по разработке

• scroll-x

В этом проекте главная страница - глава ЧМ представляет собой горизонтальную раздвижнуюscroll-viewкомпонент, после установкиscroll-xПосле установки атрибута ожидаемый эффект не достигается, и каждая часть в прокрутке по-прежнему находится на своей строке. После простого поиска установитеwhite-space: nowrap;стиль, чтобы сделать его на одной линии.

• scroll-y

На странице сведений о событиях NBA есть 5 просмотров прокрутки.Хотя содержимое немного мало, все же можно увидеть, что есть эффект прокрутки.

Точно так же при создании эффектов вертикальной прокрутки вам нужно установитьsroll-yАтрибуты также указаны в официальной документации

При использовании вертикальной прокрутки вам нужно датьscroll-viewФиксированная высота, высота устанавливается через WXSS.

Итак, вопрос в том,scroll-viewКак определить его высоту, когда он не на весь экран?

Прежде всего, подумайте о включении вкладок иscroll-viewс фиксированной шириной большого окна, следуя потоку документа,scroll-viewБыло бы неплохо установить высоту на 100%? Однако после такой установкиscroll-viewстановится высотой большого ящика? ? ? (чёрный знак вопроса) и самое главноеscroll-viewСодержимое не может быть полностью отображено, что является головной болью.

Тогда я сразу подумал, что можно использовать гибкий макет, чтобы зафиксировать высоту его вкладок, а нижнийscroll-viewнастраиватьflex: 1, это еще не решено? Да, ошибки всегда следуют. Как видно из рисунка ниже, высота вкладки значительно меньше, если в скролл-представлении больше контента, вкладка будет сжата до удушья.

В итоге мне ничего не оставалось, как постепенно подогнать высоту скролл-вида под высоту низа экрана.Это не должно быть слишком грубо.Недостаток в том, что эффект разный при просмотре на устройствах с разными размеры экрана. Если кто-то может предложить лучшее решение, пожалуйста, сообщите.

2. компонент считывателя

Документация по разработке — хороший друг, давайте сделаем это сновапосмотри.

swiperКомпоненты очень распространены в небольших программах.Они могут отображать больше контента на ограниченной площади и усиливать визуальный динамический эффект страницы.Короче говоря, это хорошо. (Однако и у хороших вещей есть свои подводные камни)

1)Как видно из приведенной выше анимации, страница сведений о событии НБА также используется.swiperкомпонент и привязан к навигации головы, скользящемуswiperВы можете изменить состояние панели навигации, щелкните параметр панели навигации, чтобы переключитьswiper-item. Эта реализация относительно проста, шаги следующие:

• существуетdataДобавьте переменную, представляющую индекс, кcurIndex;
• Привяжите эту переменную к параметрам панели навигации и используйте тернарный оператор дляwx:ifусловный перевод, еслиcurIndexравен нижнему индексу текущей опции, то внизу добавляется псевдоэлемент, указывающий на выбор;
• БудуcurIndexсвязываются сswiperизcurrentсвойства, через вкладкуbindtapсобытия иswiperизbindchangeпереключение событий в реальном времениswiper-item.

Без лишних слов вставьте код:

//nbaMatches.wxml
<view class="info_hd">
    <view class="headerMenu {{curIndex===index?'on':''}}" 
        wx:for="{{nbaMenu}}"
        data-index="{{index}}" 
        bindtap="switchSort">
        <view class="nbaSort">{{item.nbaSort}}</view>
    </view>
</view>
<view class="info_bd">
    <swiper current="{{curIndex}}" bindchange="bindswiper">
        ...
    </swiper>
</view>

---

//nbaMatches.js
bindswiper(e) {
    this.setData({
      curIndex: e.detail.current
    })
  },
switchSort(e) {
    console.log(e.currentTarget.dataset.index);
    this.setData({
      curIndex: e.currentTarget.dataset.index?e.currentTarget.dataset.index: 0
    })
}

2)Страница «Популярное» этого элемента также используетswiperкомпонентов по сравнению с обычнымиswiperиспользовать, это сложнее. здесьswiperВместо того, чтобы взаимодействовать с конечным числом вариантов, взаимодействуйте с бесконечным числом дат. Обязательно ли иметь 365 365 дней в году?swiper-item? Старик задрожал от страха.

После бури "свиных мозгов" я все еще не придумал идеального решения, поэтому мне нужно установить ограниченное количествоswiper-itemдля достижения желаемого эффекта.

Просто опубликуйте код!

//swiper的bindchange事件
changeMatch(e) {
    const current = e.detail.current;   //获取当前位置
    const befInd = this.data.swiperCurIndex;  //获取滑动前的位置
    const index = current - befInd;
    if (index <= -1) {   //判断左滑右滑
      this.preDay();   //日期切换至前一天
    } else if (index >= 1) {
      this.nextDay();   //日期切换至后一天
    } else {
      return
    }
  }

---

// nextDay() 方法类似
preDay() {
    let day = this.data.day;
    let month = this.data.month;
    let week= this.data.week;
    let i = this.data.i;
    if (i<=0) {  //周一至周日的循环切换
      i = 6;
    }else {
      i--;
    }
    if(day<=1) {  //日期本月第一天时，将日期切换至上月最后一天
      month--;
      day = this.data.daysCountArr[month-1];
    }else {
      day--;  //否则切换至前一天
    }
    this.setData({
      swiperCurIndex: this.data.swiperCurIndex-1,
      month,
      day,
      i,
      week: this.data.weekArr[i],
      curDate: month+'月'+day+'日'+' '+this.data.weekArr[i]
    })
  }

Если у больших парней есть решение, добро пожаловать на обмен и обсуждение. Подробное представление кода можно нажатьздесь.

3. Вкладки

Боже мой! Вы даже должны сказать вкладки? (смеется и плачет) Послушайте мое объяснение.

Обычно мы используем от 2 до 4 опций на вкладках. Если это не слишком хлопотно, нам просто нужно поместить вкладки и их соответствующее содержимое одну за другой в.wxmlПросто напишите это. Однако раз вариантов больше, если выписывать их по порядку, то.wxmlКод будет что-то вроде «Ботинки ленивой женщины». В это время используйтеwx:forОчень нужно прокрутить варианты вывода. Кроме того, было бы лучше, если бы содержимое в каждой опции было одинаковым, вы можете получить текущую опцию через событие клика вкладки.id,согласно сidиспользоватьwx:ifУсловный рендеринг для определения данных, отображаемых на текущей вкладке. Вот еще одна подсказка для нашегоСтраница сведений о турнире НБА, список игроков на этой странице этоswiper-itemОн содержит вкладку с 5 вариантами.

Подробное представление кода можно нажатьздесь.

4. Настройте календарь

Для большего удобства спортивные события всегда добавляются в календарь, чтобы пользователи могли просматривать расписание событий. При использованииpickerКомпоненты, взаимодействие с пользователем может быть неудовлетворительным, так как же настроить календарь? После обращения к методам различных великих богов делается следующий анализ:

• Вы можете переключать месяц влево и вправо и отображать календарь на текущий месяц. Календарь официального апплета Tencent Sports можно листать влево и вправо, как и на странице «Популярное». Здесь не используется, так как решения пока нетswiperкомпоненты. Ежемесячная дата в теле календаря представляет собой двумерный массив, а количество недель в каждом месяце представляет собой длину массива, поэтому для вывода даты в wxml необходимо использовать doublewx:for. Часть кода выглядит следующим образом:

<view class="calendar_box" wx:for="{{dateList}}"  wx:for-item="week" wx:key="{{index}}" style="{{index==0?'justify-content: flex-end;':''}}">
    <view wx:for="{{week}}" data-date="{{item}}" 
        class="weekday_label {{item.value==selectedDate?'active_label':''}}" bindtap="selectDate">
        <view class="date">
            <text>{{item.date}}</text>  
        </view>
        <view class="gameNumBox">
            <text class="gameNum">{{item.gameNum}}</text>
            <text>场比赛</text>
        </view> 
    </view>
</view>

• По умолчанию выделена дата текущего дня, щелкните конкретную дату, чтобы выделить ее. Это относительно просто реализовать, просто получите текущую дату клика через событие клика, в.wxmlТернарный оператор используется для определения того, совпадает ли полученная дата с датой в данных, чтобы добиться эффекта выделения.
• Назад к сегодняшнему дню. Нажмите «Назад к сегодняшнему дню», чтобы вернуться на главную страницу и отобразить события дня. Используйте собственный API апплета -wx.navigateBack(OBJECT)Вы можете вернуться на предыдущую страницу.Ниже приведен скриншот документа:

  

  Стоит отметить, что:

wx.navigateTo и wx.redirectTo не могут переходить на страницу панели вкладок, вы можете использовать только wx.switchTab для перехода на страницу панели вкладок.

Эпилог

Поскольку в первый раз писать проект, соответствующие запасы знаний недостаточно. С начала начала проекта к настоящему вопросам возникшие проблемы не только это, но процесс решения проблем трудно и весело. В настоящее время есть еще много частей этого проекта, которые не были реализованы, но будут продолжены обновляться. Если вы заинтересованы, вы можете обменять и обсудить. После этого я полностью изучаю каркас MPVUUE и WEPY Applet. Если я использую основу для написания этого проекта, я считаю, что будет проще. У меня есть возможность написать версию MPVUUE.

мой проект вздесьОй.