微信小程序 封装自定义头部导航栏 封装wx.request

1.wx.request封装

import { baseUrl } from '../utils/util'
let ajaxTimes = 0

export const request = (params: any) => {
  ajaxTimes ++
  const baseApiUrl = baseUrl + '/api/'
  return new Promise((resolve, reject) => {
    wx.request({
      ...params,
      url: baseApiUrl + params.url,
      success: (result) => {
        resolve(result.data)
      },
      fail: (err) => {
        reject(err)
      },
      complete() {
        ajaxTimes--
        if (ajaxTimes === 0) {
          wx.hideLoading()
        }
      }
    })
  })
}

使用

const res:any = await request({
  url: "/",
  method: "POST", // get为默认不用加此参数
  data: {
    name,
    avator,
    id
  }
})
if (res.code !== 200 || !res.data.user) {
  ErrorToast()
  return
}

2.微信小程序自定义顶部导航栏 基本是全部代码
实现内容包括切换频道 进入频道后数据滚动刷新 频道切换时保留各个频道数据 频道切换后自动回到上次滚动位置
因为当时需求不明确且被催促，所以边写边改，很是粗糙，使用者可以优化一下。

<view class="home_container">
  顶部导航栏
  <view class="categories">
    <view wx:for="{{categories}}" wx:key="categoryId" 
      bindtap="chooseCategory" data-id="{{item.categoryId}}"
      data-index="{{index}}"
      class="{{currentCategoryID === item.categoryId ? 'expand' : ''}}">
      {{item.categoryName}}
      <view class="bottom_border" wx:if="{{currentCategoryID === item.categoryId}}"></view>
    </view>
  </view>
  <view class="blank" style="width: 100%;height: 110rpx;">
  </view>
  频道渲染
  <view class="main">
    <Article currentPage="{{currentPage}}" wx:if="{{currentIndex === 0}}" currentCategory="{{currentCategoryID}}" pageList="{{pageList}}"></Article>
    <Videos videoList="{{videoList}}" wx:if="{{currentIndex === 1}}"></Videos>
    <Article currentPage="{{currentPage}}" wx:if="{{currentIndex === 2}}" currentCategory="{{currentCategoryID}}" pageList="{{pageListFZQS}}"></Article>
  </view>
</view>

.categories {
  z-index: 999;
  position: fixed;
  top: 0;
  height: 90rpx;
  width: 100%;
  box-sizing: border-box;

  background: #3bbef5;
  color: #fff;
  font-size: 26rpx;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding-bottom: 20rpx;
  line-height: 60rpx;
}
.bottom_border {
  margin: 0 auto;
  margin-top: 2rpx;
  text-align: center;
  width: 80%;
  height: 4rpx;
  border-radius: 10rpx;
  background: #fff;
  box-sizing: border-box;
}
.expand {
  font-size: 30rpx;
}

import { Category, Tag, Video } from '../../models/index'

import { ErrorToast, colors, formatTime } from '../../utils/util'
import { request } from "../../request/index"

import { PageModel } from '../../models/index'
// pages/home/home.ts
Page({

  /**
   * 页面的初始数据
   */
  data: {
    categories: [] = Array<Category>(),
    currentIndex: 0,
    currentCategoryID: 1,
    currentPage: 1,
    currentPageFZQS: 1,
    currentVideo: 1,
    showCategory: true,
    goIndex: 0,
    pageList: [] = Array<PageModel>(),
    videoList: [] = Array<Video>(),
    pageListFZQS: [] = Array<PageModel>(),
    colors: colors,

    currentScroll: 0,
    currentScrollFZQS: 0,
    currentVideoScroll: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    this.getCategories()
    this.getPageList()
  },
  onShow() {

  },

  onHide() {

  },

  async getCategories() {
    const res:any = await request({
      url: '/'
    })
    if (res.code !== 200) return ErrorToast()
    let categories: Array<Category> = res.data.categories
    this.setData({
      categories
    })
  },
  chooseCategory(e:any) {
    if (!e.target.dataset.id) return
    const currentIndex = e.target.dataset.index
    let currentCategoryID:number = e.target.dataset.id
    this.setData({
      currentCategoryID,
      currentIndex
    })

    // 回到上次滚动位置
    switch(this.data.currentIndex) {
      case 0:
        wx.pageScrollTo({
          scrollTop: this.data.currentScroll,
          duration: 0
        })
        break
      case 1:
        wx.pageScrollTo({
          scrollTop: this.data.currentVideoScroll,
          duration: 0
        })
        break
      case 2:
        wx.pageScrollTo({
          scrollTop: this.data.currentScrollFZQS,
          duration: 0
        })
        break
    }
    if (this.data.currentIndex === 0 && this.data.pageList.length == 0) {
      this.getPageList()
    } 
    if (this.data.currentIndex === 2 && this.data.pageListFZQS.length == 0) {
      this.getPageList()
    }
    if (this.data.currentIndex === 1 && this.data.videoList.length == 0) {
      this.getVideoList()
    }
  },
  onReachBottom() {
    if (this.data.currentIndex === 0) {
      this.setData({
        currentPage: this.data.currentPage + 1
      })
      this.getPageList()
    }
    if (this.data.currentIndex === 1) {
      this.setData({
        currentVideo: this.data.currentVideo + 1
      })
      this.getVideoList()
    }
    if (this.data.currentIndex === 2) {
      this.setData({
        currentPageFZQS: this.data.currentPageFZQS + 1
      })
      this.getPageList()
    }
    
  },
  onPullDownRefresh() {
    wx.stopPullDownRefresh()
  },

  async getPageList() {
    const res:any = await request({
      url: '/',
      data: {
        'page': 
        (this.data.currentIndex === 0) ?
        (this.data.currentPage ? this.data.currentPage : 1)
        : (this.data.currentPageFZQS ? this.data.currentPageFZQS : 1),
        'cate': this.data.currentCategoryID
      }
    })
    if (res.code !== 200) return ErrorToast()
    if (!res.data.pageList || res.data.pageList.length == 0) {
      wx.stopPullDownRefresh()
      return
    }
    let pageList: Array<PageModel> = res.data.pageList
    if (this.data.currentIndex === 0) {
      this.setData({
        pageList: [...this.data.pageList, ...pageList]
      })
    }
    if (this.data.currentIndex === 2) {
      this.setData({
        pageListFZQS: [...this.data.pageListFZQS, ...pageList]
      })
    }
    
    wx.stopPullDownRefresh()
  },

  
  // 监听滚动事件记录上次滚动位置
  onPageScroll(res) {
    switch(this.data.currentIndex) {
      case 0:
        this.data.currentScroll = res.scrollTop
        break
      case 1:
        this.data.currentVideoScroll = res.scrollTop
        break
      case 2:
        this.data.currentScrollFZQS = res.scrollTop
        break
    }
  },

  async getVideoList() {
    const res:any = await request({
      url: '/',
      data: { 'page': this.data.currentVideo }
    })
    if (res.code !== 200) return ErrorToast()
    if (!res.data.videos || res.data.videos.length == 0) {
      wx.stopPullDownRefresh()
      return
    }
    let videoList: Array<Video> = res.data.videos
    this.setData({
      videoList: [...this.data.videoList, ...videoList]
    })
    wx.stopPullDownRefresh()
  }
})