一、九宮格實現(xiàn)

1.獲取數(shù)據(jù)

1.1準備接口

黑馬接口：https://applet-base-api-t.itheima.net/categories

說明：這是獲取九宮格的數(shù)據(jù)接口

1.2使用接口

?說明：聲明變量獲取數(shù)據(jù)。

  getGridList() {
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/categories',
      method: "GET",
      success: (res) => {
      this.setData({
        gridList:res.data
       // 服務器拿到數(shù)據(jù)并保存
      })
      }
    })
  },

?res.data數(shù)據(jù)

2.靜態(tài)頁面

<view class="grid-list">
//綁定gridList數(shù)據(jù)
<navigator class="grid-item" wx:for="{{gridList}}"
//導航動態(tài)傳參
url="/pages/shoplist/shoplist?id={{item.id}}&title={{item.name}}"
 wx:key="id">
//顯示圖片
<image src="{{item.icon}}" mode=""/>
//顯示圖片名稱
<text>{{item.name}}</text>
</navigator>
</view>

編寫簡單css

/* pages/home/home.wxss */
swiper {
  height: 350rpx;
}

swiper image {
  width: 100%;
  height: 100%;
}

.grid-list {
  display: flex;
  flex-wrap: wrap;
}

.grid-list .grid-item {
  width: 33%;
  height: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}

.grid-item image {
  width: 60rpx;
  height: 60rpx;
}

.grid-item text {
  font-size: 24rpx;
  margin: 10px 0;
}

實圖展示?

?

?

3.存儲參數(shù)

聲明query變量?

并設(shè)置導航標題

  onReady() {
    wx.setNavigationBarTitle({
      title: this.data.query.title,
    })
  },

標題展示?

?

?

二、商品列表展示

2.獲取數(shù)據(jù)

2.1準備接口

商品列表接口：https://applet-base-api-t.itheima.net/categories/:id/shops

?說明：:id表示動態(tài)的參數(shù)

2.2使用接口

  getShopList() {
    wx.request({
      url: `https://applet-base-api-t.itheima.net/categories/${this.data.query.id}/shops`,
      method:'GET',
      data:{
        _page:this.data.page,
        _limit:this.data.pageSize
      },
      success:(res)=>{
        console.log(res);
      this.setData({
        //其實我覺得解構(gòu)服務器的數(shù)據(jù)保存起來就可以了，不知道為什么還要把說明在data的數(shù)據(jù)解構(gòu)加
//起來！
        shopList:[...this.data.shopList,...res.data],
//+是將字符串轉(zhuǎn)成數(shù)值型
        total:+res.header["X-Total-Count"]
      })
      }
    })
  },

當頁面加載，就調(diào)用函數(shù)

  onLoad(options) {
    this.setData({
      // 保存?zhèn)鬟f的參數(shù)
      query: options
    }),
    // 當頁面加載完成后，調(diào)用方法
    this.getShopList()
  }

res數(shù)據(jù)展示

?3.靜態(tài)展示

<!-- wx:key為什么不用解構(gòu)語法是因為微信小程序自動解構(gòu)出來了，可以直接使用；item也是微信小程序默認解構(gòu)出來變量 -->
<view class="shop-item" wx:for="{{shopList}}" wx:key="id">
<view class="thumb">
<image src="{{item.images[1]}}" mode=""/>
</view>
<view class="info">
<text class="shop-title">{{item.name}}</text>
<text>{{item.phone}}</text>
<text>{{item.address}}</text>
<text>{{item.businessHours}}</text>
</view>
</view>

?加入簡單css

.shop-item{
  display: flex;
  padding: 15rpx;
  border: 1rpx solid #efefef;
  margin: 15rpx;
  border-radius: 8rpx;
  box-shadow: 1rpx 1rpx 15rpx #ddd;
}
.thumb image{
  width: 250rpx;
  height: 205rpx;
  display: block;
  margin-right: 15rpx;
}
.info{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 24rpx;
}
.shop-title{
  font-weight: bold;
}

?4.實圖展示

文章來源地址http://www.zghlxwxcb.cn/news/detail-514223.html

?三.、部分源碼展示

3.home文件夾

3.1home.wxml

<!--pages/home/home.wxml-->
<!-- 輪播圖區(qū)域 -->
<swiper indicator-dots circular>
  <swiper-item wx:for="{{swiperList}}" wx:key="id">
    <image src="{{item.image}}" mode="" />
  </swiper-item>
</swiper>
<!-- 九宮格容器 -->
<view class="grid-list">
<navigator class="grid-item" wx:for="{{gridList}}"
url="/pages/shoplist/shoplist?id={{item.id}}&title={{item.name}}"
 wx:key="id">
<image src="{{item.icon}}" mode=""/>
<text>{{item.name}}</text>
</navigator>
</view>
<!--圖片區(qū)域  -->
<view class="img-box">
<image src="" mode=""/>
</view>

3.2home.js

// pages/home/home.js
Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    // 輪播圖的數(shù)據(jù)
    swiperList: [],
    // 獲取九宮格的數(shù)據(jù)
    gridList: []
  },
  getGridList() {
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/categories',
      method: "GET",
      success: (res) => {
      this.setData({
        gridList:res.data
    
      })
      }
    })
  },
  getSwiperList() {
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/slides',
      method: 'GET',
      success: (res) => {
        this.setData({
          swiperList: res.data
        })
      },


    })
  },
  // 發(fā)起get請求
  // getInfo() {
  //   wx.request({
  //     url: 'https://applet-base-api-t.itheima.net/api/get',
  //     method: "GET",
  //     data: {
  //       name1: "zs",
  //       age: 20
  //     },
  //     success: (res) => {
  //       console.log(res.data);
  //     }
  //   })
  // },
  // postInfo(){
  //   wx.request({
  //     url: 'https://applet-base-api-t.itheima.net/api/post',
  //     method:'POST',
  //     data:{
  //       name:"ls",
  //       age:33
  //     },
  //     success:(res)=>{
  // console.log(res.data);
  //     }
  //   })
  // },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad(options) {
    // this.getInfo()
    // this.postInfo()
    this.getSwiperList(),
      this.getGridList()
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow() {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide() {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload() {

  },

  /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh() {

  },

  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  onReachBottom() {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage() {

  }
})

?4.shoplist文件夾

4.1shplist.wxml

<!--pages/shoplist/shoplist.wxml-->
<!-- wx:key為什么不用解構(gòu)語法是因為微信小程序自動解構(gòu)出來了，可以直接使用；item也是微信小程序默認解構(gòu)出來變量 -->
<view class="shop-item" wx:for="{{shopList}}" wx:key="id">
<view class="thumb">
<image src="{{item.images[1]}}" mode=""/>
</view>
<view class="info">
<text class="shop-title">{{item.name}}</text>
<text>{{item.phone}}</text>
<text>{{item.address}}</text>
<text>{{item.businessHours}}</text>
</view>
</view>

4.2shoplist.js

// pages/shoplist/shoplist.js
Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    query: "",
    shopList: [],
    //頁數(shù)
    page: 1,
    //展示數(shù)據(jù)的條數(shù)
    pageSize: 10,
    total:0
    },
  getShopList() {
    wx.request({
      url: `https://applet-base-api-t.itheima.net/categories/${this.data.query.id}/shops`,
      method:'GET',
      data:{
        _page:this.data.page,
        _limit:this.data.pageSize
      },
      success:(res)=>{
        console.log(res);
      this.setData({
        shopList:[...this.data.shopList,...res.data],
        total:+res.header["X-Total-Count"]
      })
      }
    })
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad(options) {
    this.setData({
      // 保存?zhèn)鬟f的參數(shù)
      query: options
    }),
    // 當頁面加載完成后，調(diào)用方法
    this.getShopList()
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady() {
    wx.setNavigationBarTitle({
      title: this.data.query.title,
    })
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow() {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide() {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload() {

  },

  /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh() {

  },

  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  onReachBottom() {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage() {

  }
})

到了這里，關(guān)于黑馬微信小程序-實現(xiàn)本地服務九宮格并展示商品列表的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！