项目实战-点餐小程序-15 首页(九宫格)

一、实现思路

  1. 编写九宫格的页面 home.wxml
  2. 美化九宫格区域（弹性盒flex的应用）home.wxss
  3. 新建跳转页面　app.json　
  4. 编写点击事件 home.js 

 

二、代码实现

1.home.wxml

 1 <!-- 九宫格 -->
 2 <view class="categoryRoot">
 3 <view class="categoryItem" bindtap="toSweepCode">
 4 <image src="/images/ca-sweepCode.png"></image>
 5 <text>扫码点餐</text>
 6 </view>
 7 <view class="categoryItem" bindtap="toClassifiedFood">
 8 <image src="/images/ca-foodList.png"></image>
 9 <text>菜单浏览</text>
10 </view>
11 <view class="categoryItem" bindtap="toWaitLine">
12 <image src="/images/ca-lineUp.png"></image>
13 <text>排队等号</text>
14 </view>
15 <view class="categoryItem" bindtap="toRestaurantInfo">
16 <image src="/images/ca-diningRoom.png"></image>
17 <text>餐厅地址</text>
18 </view>
19 </view>

2.home.wxss

 1 /*九宫格*/
 2 .categoryRoot{
 3   display: flex;
 4 }
 5 .categoryItem{
 6   display: flex;
 7   /*主轴方向为垂直方向，起点在上沿*/
 8   flex-direction: column;
 9   /*主轴上对齐方式*/
10   justify-content: space-around;
11   /*辅轴上居中对齐*/
12   align-items: center;
13   /*background-color: #bfa;*/
14   margin: 20rpx;
15   width: 200rpx;
16   height: 160rpx;
17 }
18 .categoryItem image{
19   width: 100rpx;
20   height: 100rpx;
21 }
22 .categoryItem text{
23   font-size: 28rpx;
24 }

3.home.js

 1 Pages({
 2 //九宫格点击事件
 3   //点击事件，跳转到扫码页面
 4   toSweepCode(){
 5     wx.navigateTo({
 6       url: '/pages/foodList/foodList',
 7     })
 8   },
 9   //点击事件，跳转到菜品列表页面
10   toClassifiedFood(){
11     wx.navigateTo({
12       url: '/pages/classifiedFood/classifiedFood',
13     })
14   },
15   //点击事件，跳转到排队等位页面
16   toWaitLine(){
17     wx.navigateTo({
18       url: '/pages/waitLine/waitLine',
19     })
20   },
21   //点击事件，跳转到餐厅信息页面
22   toRestaurantInfo(){
23     wx.navigateTo({
24       url: '/pages/restaurantInfo/restaurantInfo',
25     })
26   },
27 })

 

三、实现效果

 

posted @ 2021-08-03 12:24  AnnLing  阅读(635)  评论(0)    收藏  举报