小程序案例-本地生活

目录

1.新建项目并梳理项目结构

2.配置导航栏

3.配置tabBar

4.实现轮播图和九宫格和图片布局

---

1.新建项目并梳理项目结构

（1）在对应目录下创建一个新的文件夹

（2）进入小程序后有黄色警告 如果不想显示此警告

         点击project.config.json在setting里面加入

"checkSiteMap": false

（3）在pages中创建页面  默认页面删除掉

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

2.配置导航栏

 app.json->window里面进行更改

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

3.配置tabBar

 在文件夹下面创建images并把需要用到的图片放入

 在app.json中新增tabBar

"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"
    }]
  }

4.实现轮播图和九宫格和图片布局

(1) 设置两个数组存放数据列表

  data: {
    //存放轮播图数据的列表
    swiperList: [],
    //存放九宫格数据的列表
    gridList: []
  },

(2)定义两个获取轮播图数据的方法

  //获取轮播图数据的方法
  getSwiperList() {
    wx.request({
      url: 'https://www.escook.cn/slides',
      method: 'GET',
      success: (res) => {
        console.log(res)
        this.setData({
          swiperList: res.data
        })
      }
    })
  },
  //获取九宫格数据的方法
  getGridList() {
    wx.request({
      url: 'https://www.escook.cn/categories',
      method: 'GET',
      success: (res) => {
        this.setData({
          gridList: res.data
        })
      }
    })
  },

注:这里使用的图片为后台写好的图片

(3)页面刚加载就要获取轮播图的数据，在页面加载中调用这两个方法

  onLoad: function (options) {
    this.getSwiperList(),
    this.getGridList()
  },

 (4)视图层

  
    
  




  
    
    {{item.name}}
  




  
  

(5)渲染层

swiper {
  height: 350rpx;
}

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


.grid-list {
  display: flex;
  
  flex-wrap: wrap;
  border-top: 1rpx solid #efefef;
  border-left: 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;
}

.bottoms {
  display: flex;
}

.bottoms image {
  float: 1px;
}