Нечего сказать, давайте сначала сфотографируем мой отдел

Вышел информационный апплет НБА

Как фронтенд-капуста, только что соприкоснувшийся с Мини-программами, совпадает с недавним двойным тай-брейком в НБА, и пиковыми разборками между Кавальерс и Уорриорз снова и снова (правда: реально надоело смотреть - -), я решил написать информационный апплет NBA для игры. Поговорим о разработке небольших программ

Инструменты разработки: инструменты разработчика vscode WeChat
Технология разработки: (Wxml)Html (Wxss)css javascript
Процесс разработки: зарегистрируйте приложение и сразу приступайте к разработкеПростой учебник

Вот еще два сайтаEasy Mock,Iconfont
Первый — это постоянный сервис, который может быстро генерировать смоделированные данные, как показано здесь.мой интерфейс данныхПоследний представляет собой библиотеку небольших иконок, которых можно найти сколько угодно.

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

Как это возможно, что я не сталкиваюсь с некоторыми проблемами в процессе написания как новичок--

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

1. Переключение данных игры даты домашней страницы (то есть та часть, которая может щелкнуть и скользить)

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

changeleft:function() {
    const index = this.data.index - this.data.num;//获取改变后的那组数据下标
    this.setData({
      agenda: this.data.result[index],// 将球队名 球队分数传入
      light: this.data.result[index].leftgrade > 
      this.data.result[index].rightgrade ? '1' : '2', //比较分数大小 将分数高的color改变
      index: index,
      current:index,
      showLeft: true,//改变图标为浅色图标
    })
  }

Обратите внимание на деталь: когда данных для переключения влево и вправо больше нет, цвет значка изменится и станет светлее, указывая на то, что его нельзя щелкнуть. Поэтому необходимо выполнить if, чтобы определить, являются ли левая и правая части критическими значениями, то есть первым и последним элементами массива.

 turnleft: function (e) {
    const index = this.data.index -this.data.num;
      if (index <= -1) {
        return;
      } else if (index == 0) {
        this.changeleft();
      } else {
        this.changeleft();
        this.setData({
          showLeft: false,
          showRight: false,
        })
      }
  },

Здесь показан метод слева, и метод справа аналогичен. Итак, я начал писать часть прокрутки, и здесь я понес большой урон от неопытности. Когда я подумал о прокрутке, я сразу подумал о прокрутке-виде. Я написал их кучу, но когда я нажимал, я был глуп. дата меняется моментально без эффекта скольжения. , разве это не так? Поэтому я использовал прокрутку влево для расчета расстояния. После установки отступов для каждого элемента, это было завершено после долгого времени написания. Я пробовал, и до сих пор нет эффекта скольжения... (выплюнул полный рот старой крови)

Наконец, я использовал swiper, чтобы получить этот эффект.

 swiperchange:function(e) {
    const current = e.detail.current;//取当前swiper index
    const ind = this.data.index;//之前数组的index 
    const dex = current - ind;//判断左滑右滑
      if(current-ind >0){
        this.setData({
          num:dex //滑动多少项
        })
      this.turnright() //左滑事件
      this.setData({
        num:1   //必须回1 因为点击事件每次改变的数组项为1
      })
    }else if(current - ind <0){
      this.setData({
        num:-dex 
      })
     this.turnleft()
     this.setData({
       num:1
     })
    }

2. Вернуться на страницу статьи

Здесь вы можете установить navigator или bindtap напрямую, но обратите внимание на метод open-type и jump для switchTab, если возвращается tabBar

back: function (e) {
    wx.switchTab({
      url: "../../pages/index/index"
    });
  }

3. Проблема со скольжением при прокрутке

Многие люди могут столкнуться с такими проблемами, как свайпер не скользит.Обратите внимание на следующие моменты.

Элементы, которые должны скользить в режиме прокрутки, не могут быть плавающими с помощью float;
Большое поле в представлении прокрутки, которое оборачивает элемент, который нужно сдвинуть с помощью display:flex;, бесполезно;
Элементы, которые необходимо перемещать в режиме прокрутки, должны использовать display:inline-block для горизонтального расположения элементов;
Большое поле, охватывающее вид прокрутки, имеет явную ширину и стили --> overflow:hidden, white-space:nowrap;

4. Проблема с подтягивающей загрузкой и выпадающим обновлением

Выпадающее обновление должно быть установлено в json или app.json текущей страницы."enablePullDownRefresh": true,
Выпадающее событие должно быть добавлено wx.hideLoading(), иначе всегда будет появляться точка обновления

onPullDownRefresh() {
   // console.log('下拉了');
   wx.showLoading({
     title: '玩命加载中',
   })
   wx.request({
     url: API_BASE,
     success: (res) => {
       this.setData({
         news: res.data.data.new,
         currentPage: 1,
         hide:false
       })
       wx.hideLoading();//!!!一定要加
       wx.stopPullDownRefresh()
     }
   })
 },

Подтягивающая загрузка может использовать onPullDownRefresh() или bindscrolltolower(), первая — это нижняя часть страницы, а вторая — полоса прокрутки внизу, в зависимости от ситуации.

 onReachBottom() {
   let { currentPage, totalPages } = this.data  //解构当前页和共几页 es6语法
   if (currentPage >= totalPages) {
     this.setData({
       hide:true,
     })
     return;
   }
   wx.showLoading({
     title: '玩命加载中',
   })
   currentPage += 1; //页数+1
   wx.request({
     url: API_BASE,
     success: (res) => {
       const news = [ //将请求的数据和原本的数据一起放入
         ...this.data.news,//扩展运算符（ spread ）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列 es6语法
         ...res.data.data.new,
       ];
       this.setData({
         news,
         currentPage
       })
       wx.hideLoading();
     }
   })
 },

5.wx:если проблема с рендерингом выбора

В моем проекте есть много необходимости добавлять стили или операции с событиями отдельно, вы можете использовать wx:if с блоком для выбора и рендеринга

<block wx:if="{{video.title == item.title}}">
                <view class="btn" style="display: none;"></view>
                <text class="content-title " style="white-space: normal;color: #42F32F;">{{item.title}}</text> 
            </block>
            <block wx:else>
                    <view class="btn" ></view>
                    <text class="content-title" style="white-space: normal;">{{item.title}}</text> 
                </block>

6. Проблема прыжка навигатора

   var that = this;
   var id = that.data.new.id;//获取文章id
   if (id === 'n8') {//判断是否为最后一篇
     wx.showModal({
       title: '提示',
       content: '没有更多内容了',
       showCancel: false,
       success: function (res) {
       } })
       return; //为最后一篇则无需请求数据
   }
   wx.request({
     url: API_BASE,
     success: (res) => {
       for (let i = 0; i < res.data.data.new.length; i++) {
         if (id === res.data.data.new[i].contentId) { //判断是否请求到对应数据
          // console.log("找到了");
           this.setData({
             news: res.data.data.new[i + 1],//将请求到数据的数据传入
           })
           var it = this;
           wx.navigateTo({
             url: 'news?id=' + this.data.news.contentId + '&title=' + this.data.news.title + '&from=' + this.data.news.from + '&image=' + this.data.news.image + '&content=' + this.data.news.content + ''
           })
         }
       }
     }
   })
 },

напиши в конце

Есть еще много проблем в написании проекта, такие как обтекание текста прокрутки видео черной рамкой и т. д., большинство из них каждый может решить на Baidu или просмотрев официальные документы.
Поскольку это апплет для начинающих, многие аспекты не были учтены должным образом: запрос и т. д. не были инкапсулированы, модули разбиты на компоненты, написано много повторяющегося кода. Но это не дело, кто сначала не проползет, а потом побежит!
Хотите узнать больше, можетеПосмотреть мои проектыВы можете вносить ценные предложения и мнения. Сообщество сосредоточено на обмене. Если у вас есть что-то хорошее, не скрывайте его.