小程序開發的部分功能

項目前的准備

關閉自動熱重載警告：詳情->本地設置->關閉“啟用代碼自動熱重載”

新建項目並梳理項目結構

配置導航欄效果

全局app.json->window

配置tabBar

在全局app.json中和window平級創建一個tabBar節點

實現輪播圖效果

接口地址

①獲取輪播圖數據列錶的接口
②在子頁面中定義獲取輪播圖數據的方法

③在onload中調用這個方法-通過this實例頁面一加載就調用

④通過setDate（）將數據賦值data裏面的數組

 data: {
    
    //存放輪播圖數據的列錶
    swiperList:[]

  },
 //獲取輪播圖數據的方法
  getSwiperLsit()
  {
    
    wx.request({
    
      url:'https://www.escook.cn/slides',
      method:'GET',
      success:(res)=>{
    
        console.log(res);  
        this.setData({
    
        
          swiperList:res.data
        })
      }
    })

  },

⑤渲染輪播圖的效果

<swiper indicator-dots circular>
<swiper-item wx:for="{
    {swiperList}}" wx:key="id">
<image src="{
    {item.image}}">
</image>
</swiper-item>
</swiper>

上拉觸底功能

步驟一-定義隨機獲取顏色的方法

 data: {
    

    colorList:[]
  },
  
   getColors(){
    
wx.request({
    
  url: 'https://www.escook.cn/api/color',
  method:'get',
  success:({
     data:res})=>{
    
    console.log(res)
    // 數據拼接
    this.setData({
    
      colorList:[...this.data.colorList,...res.data]
    })
  }
})
  },

步驟二-在頁面加載時獲得初始數據

  /** * 生命周期函數--監聽頁面加載 */
  onLoad(options) {
    
this.getColors()
  },

步驟三-渲染UI結構並美化頁面效果

<!--pages/contact/contact.wxml-->
<view wx:for="{
     {colorList}}" wx:key="index" class="num-item" style="background-color: rgba({
        {
        item}});">{
   {item}}</view>

頁面要足够大可以下拉刷新

步驟四-上拉觸底時獲取隨機顏色

//頁面上拉觸底事件的處理函數
onReachBottom:function(){
    
//調用獲取隨機顏色的方法
this.getColors()
}

上拉刷新，數據一次性獲取10條，由10條變成20條

步驟五-添加loading提示效果

  getColors(){
    

    //展示loading效果
    wx.showLoading({
    
      title: '數據加載中。。。',
    })

wx.request({
    
  url: 'https://www.escook.cn/api/color',
  method:'get',
  success:({
     data:res})=>{
    
    console.log(res)
    // 數據拼接
    this.setData({
    
      colorList:[...this.data.colorList,...res.data]
    })
  },
  //手動關閉數據加載
  complete:()=>{
    
    wx.hideLoading()
  }
})
  },

步驟六-對上拉觸底進行節流處理

 data: {
    
    colorList:[],
    isloading:false
  },
  
  getColors(){
    
    this.setData({
    
     isloading:true
    })
    //展示loading效果
    wx.showLoading({
    
      title: '數據加載中。。。',
    })
wx.request({
    
  url: 'https://www.escook.cn/api/color',
  method:'get',
  success:({
     data:res})=>{
    
    console.log(res)
    // 數據拼接
    this.setData({
    
      colorList:[...this.data.colorList,...res.data]
    })
  },
  //手動關閉數據加載
  complete:()=>{
    
    wx.hideLoading()
    this.setData({
    
      isloading:false
    })
  }
})
  },
  
   onReachBottom() {
    
    if(this.data.isloading) return
this.getColors()
  },