【微信小程序】案例 - 本地生活

╰+哭是因爲堅強的太久メ 2023-10-01 22:51 34阅读 0赞

**效果：**

![b731b1758e654bf79d950c0b35ef28e8.gif][]

**目录**

首页效果以及实现步骤

① 新建项目并梳理项目结构

② 配置导航栏效果

③ 配置 tabBar 效果

④ 实现轮播图 九宫格效果

--------------------

### **首页效果以及实现步骤** ###

#### ① 新建项目并梳理项目结构 ####

![551c26a6e52e4a3e8a89ef432e7bc26a.png][]

![1940acbe868f411bbe2a5d3a0d3969bd.png][]

> "pages": \[  
> "pages/home/home",  
> "pages/message/message",  
> "pages/contact/contact"  
> \],

**效果：**

![5bfa1c1031d3438997f7a3ce457cc20c.png][]

#### ② 配置导航栏效果 ####

![98a42a7abc6d4c16b23e6dd722e031c0.png][]

> "window": \{  
> "backgroundTextStyle": "light",  
> "navigationBarBackgroundColor": "\#2b4b6b",  
> "navigationBarTitleText": "本地生活",  
> "navigationBarTextStyle": "white"  
> \},

#### ③ 配置 tabBar 效果  ####

**素材：**

![9c8e00681389470e94f2d608fb33af01.png][]![3556bf80af4e4af7a5aa0a3652916edb.png][]![c47aac0c056e42fab4de48f9c61539a6.png][]![ed0ce2cef2b84b64a4c6bb0e7389534c.png][]![dc1a3bfb67724c04a4be6d829fc0d2a2.png][]![86333474c119490fb1ddaf70d14e3097.png][]

**素材放入里面:**

![313f1908b20948d1a4e74336e3d83a4d.png][]

**效果：**![d7cb541070334f84bcdd01044a67337d.png][]

> "tabBar": \{  
> "list": \[  
> \{  
> "pagePath": "pages/home/home",  
>  "text": "首页",  
> "iconPath": "/images/tabs/home.png",  
> "selectedIconPath": "/images/tabs/home-active.png"  
> \},  
> \{  
> "pagePath": "pages/message/message",  
> "text": "消息",  
> "iconPath": "/images/tabs/message.png",  
> "selectedIconPath": "/images/tabs/message-active.png"  
> \},  
> \{  
> "pagePath": "pages/contact/contact",  
> "text": "联系我们",  
> "iconPath": "/images/tabs/contact.png",  
> "selectedIconPath": "/images/tabs/contact-active.png"  
> \}  
> \]  
> \},

#### ④ 实现轮播图 九宫格效果  ####

效果：

![a14b0b96ddfb4d3c9225de83ab10dfb2.png][]

**获取轮播图数据列表的接口** **【GET】https://www.escook.cn/slides**

**获取九宫格数据列表的接口**  **【GET】https://www.escook.cn/categories**

**接口配置教程：** [【微信小程序】页面配置，网络数据请求\_热爱编程的小白白的博客-CSDN博客][-CSDN]

WXML:

<swiper indicator-dots circular>
      <swiper-item wx:for="{
       {swiperList}}" wx:key="id">
        <image src="{
       {item.image}}"></image>
      </swiper-item>
    </swiper>
    
    
    <view class="grid-list">
      <view class="grid-item" wx:for="{
       {gridList}}" wx:key="id">
        <image src="{
       {item.icon}}"></image>
        <text>{
       {item.name}}</text>
      </view>
    </view>
    
    
    <view class="img-box">
      <image src="/images/link-01.png" mode="widthFix"></image>
      <image src="/images/link-02.png" mode="widthFix"></image>
    </view>

JS:

// pages/home/home.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        // 存放轮播图数据的列表
        swiperList: [],
        // 存放九宫格数据的列表
        gridList: []
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        this.getSwiperList()
        this.getGridList()
      },
    
      // 获取轮播图数据的方法
      getSwiperList() {
        wx.request({
          url: 'https://www.escook.cn/slides',
          method: 'GET',
          success: (res) => {
            this.setData({
              swiperList: res.data
            })
          }
        })
      },
    
      // 获取九宫格数据的方法
      getGridList() {
        wx.request({
          url: 'https://www.escook.cn/categories',
          method: 'GET',
          success: (res) => {
            this.setData({
              gridList: res.data
            })
          }
        })
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })

WXSS:

/* pages/home/home.wxss */
    swiper {
      height: 350rpx;
    }
    
    swiper image {
      width: 100%;
      height: 100%;
    }
    
    .grid-list {
      display: flex;
      flex-wrap: wrap;
      border-left: 1rpx solid #efefef;
      border-top: 1rpx solid #efefef;
    }
    
    .grid-item {
      width: 33.33%;
      height: 200rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-right: 1rpx solid #efefef;
      border-bottom: 1rpx solid #efefef;
      box-sizing: border-box;
    }
    
    .grid-item image {
      width: 60rpx;
      height: 60rpx;
    }
    
    .grid-item text {
      font-size: 24rpx;
      margin-top: 10rpx;
    }
    
    .img-box {
      display: flex;
      padding: 20rpx 10rpx;
      justify-content: space-around;
    }
    
    .img-box image {
      width: 45%;
    }

案例来自：黑马程序员

[b731b1758e654bf79d950c0b35ef28e8.gif]: https://img-blog.csdnimg.cn/b731b1758e654bf79d950c0b35ef28e8.gif
[551c26a6e52e4a3e8a89ef432e7bc26a.png]: https://img-blog.csdnimg.cn/551c26a6e52e4a3e8a89ef432e7bc26a.png
[1940acbe868f411bbe2a5d3a0d3969bd.png]: https://img-blog.csdnimg.cn/1940acbe868f411bbe2a5d3a0d3969bd.png
[5bfa1c1031d3438997f7a3ce457cc20c.png]: https://img-blog.csdnimg.cn/5bfa1c1031d3438997f7a3ce457cc20c.png
[98a42a7abc6d4c16b23e6dd722e031c0.png]: https://img-blog.csdnimg.cn/98a42a7abc6d4c16b23e6dd722e031c0.png
[9c8e00681389470e94f2d608fb33af01.png]: https://img-blog.csdnimg.cn/9c8e00681389470e94f2d608fb33af01.png
[3556bf80af4e4af7a5aa0a3652916edb.png]: https://img-blog.csdnimg.cn/3556bf80af4e4af7a5aa0a3652916edb.png
[c47aac0c056e42fab4de48f9c61539a6.png]: https://img-blog.csdnimg.cn/c47aac0c056e42fab4de48f9c61539a6.png
[ed0ce2cef2b84b64a4c6bb0e7389534c.png]: https://img-blog.csdnimg.cn/ed0ce2cef2b84b64a4c6bb0e7389534c.png
[dc1a3bfb67724c04a4be6d829fc0d2a2.png]: https://img-blog.csdnimg.cn/dc1a3bfb67724c04a4be6d829fc0d2a2.png
[86333474c119490fb1ddaf70d14e3097.png]: https://img-blog.csdnimg.cn/86333474c119490fb1ddaf70d14e3097.png
[313f1908b20948d1a4e74336e3d83a4d.png]: https://img-blog.csdnimg.cn/313f1908b20948d1a4e74336e3d83a4d.png
[d7cb541070334f84bcdd01044a67337d.png]: https://img-blog.csdnimg.cn/d7cb541070334f84bcdd01044a67337d.png
[a14b0b96ddfb4d3c9225de83ab10dfb2.png]: https://img-blog.csdnimg.cn/a14b0b96ddfb4d3c9225de83ab10dfb2.png
[-CSDN]: https://blog.csdn.net/Javascript_tsj/article/details/125795302?spm=1001.2014.3001.5502