微信小程序：案例-本地生活（首页）_小程序中的本地生活服务背景图片

1.首页效果以及实现步骤

②配置导航栏效果

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

③配置tabBar效果

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

④实现轮播图效果

2.接口地址

①获取轮播图数据列表的接口

• [GET]http://www.escook.cn/slides 

 data: {
//存放轮播图数据的列表
  swipeiList:[]
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
  this.getSwiperList()
  },
  getSwiperList(){
  wx.request({
  url:'https://www.escook.cn/slides',
  method:'GET',
  success:(res)=>{
    this.setData({
      swipeiList:res.data
    })
  }
  })
},

④实现轮播图

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

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

⑤实现九宫格效果

 

  onLoad(options) {
  this.getSwiperList()
  this.getGridList()
  },
getGridList(){
  wx.request({
    url:'https://www.escook.cn/categories',
    method:'GET',
    success:(res)=>{
      this.setData({
        gridList:res.data
      })
    }
  })
}

.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;
}

⑥实现图片布局