UNIAPP实战项目笔记23 商品分类页面顶栏完成构建商品分类页面数据商品分类内容布局

小灰灰 2024-04-03 10:14 51阅读 0赞

### 商品分类内容布局 ###

### 商品分类页面顶栏完成 ###

### 构建商品分类页面数据 ###

### 商品分类内容布局 ###

*  page.json

> 页面,设置列表页头部和搜索页面相同  
> 引入横线组件  
> 点击输入框跳转到搜索页面

{
        
                "path" : "pages/list/list",
                "style" :                                                                                    
                {
        
                    "navigationBarBackgroundColor": "#FFFFFF",
                    "app-plus": {
        
                        "scrollIndicator": "none",
                        "titleNView": {
        
                            "searchInput": {
        
                                "placeholder": "请输入关键字",
                                "disabled": true,
                                "align": "left",
                                "autoFocus": false,
                                "borderRadius": "15px",
                                "backgroundColor": "#F7F7F7",
                                "placeholderColor": "#B3B3B3"
                            }
                        }
                    }
                }
                
            }

*  list.vue页面

> list页面样式和布局

<template>
        <view class="">
            <Lines />
            <view class="list">
                
                <scroll-view scroll-y="true" class="list-left">
                    <view v-for="i in 50" class="left-item">
                        <view class="left-name">{
        {
        i}}</view>
                    </view>
                </scroll-view>
                
                <scroll-view scroll-y="true" class="list-right">
                    <view class="right-list" v-for="(item,index) in 4">
                        <view class="list-title">家纺</view>
                        <view class="right-content">
                            <view class="right-item" v-for="(item,index) in 4">
                                <image class="right-img" src="../../static/logo.png" mode=""></image>
                                <view class="right-name">
                                    毛巾
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
    </template>
    
    <script>
        import Lines from "@/components/common/Lines.vue"
        export default {
        
            data() {
        
                return {
        
                    
                }
            },
            components:{
        
                Lines
            },
            methods: {
        
                
            },
            // input 输入框dia点击事件
            onNavigationBarSearchInputClicked() {
        
                uni.navigateTo({
        
                    url:'/pages/search/search'
                })
            }
        }
    </script>
    
    <style lang="scss">
    .list{
        
        display: flex;
    }
    .list-left{
        
        width: 200rpx;
    }
    .left-item{
        
        border-bottom:2rpx solid #ffffff;
        font-size: 28rpx;
        font-weight: bold;
        background-color: #F7F7F7;
    }
    .left-name{
        
        padding: 30rpx 6rpx;
        text-align: center;
    }
    .left-name-active{
        
        border-left:8rpx solid #49bdfb;
        background-color: #ffffff;
    }
    .list-right{
        
        flex: 1;
    }
    .list-title{
        
        font-weight: bold;
        padding: 30rpx 0;
    }
    .right-content{
        
        display: flex;
        flex-wrap: wrap;
    }
    .right-item{
        
        width: 150rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10rpx;
    }
    .right-name{
        
        padding:16rpx 0;
    }
    .right-img{
        
        width: 150rpx;
        height: 150rpx;
    }
    </style>

> 后台服务器接口文件 index.js增加以下内容

/* GET List Page */
    router.get('/api/goods/list', function(req, res, next) {
        
      res.send({
        
          code:0,
          name:"家居家纺",
          data:[
              {
        
                  id:1,
                  name:"家纺",
                  data:[
                    {
        
                      name:"家纺",
                      list:[
                          {
        
                              id:1,
                              name:"毛巾/浴巾",
                              imgUrl:"/static/img/logo.png"
                          },
                          {
        
                              id:2,
                              name:"枕头",
                              imgUrl:"/static/img/logo.png"
                          }
                      ]
                    },
                    {
        
                      name:"生活用品",
                      list:[
                          {
        
                              id:1,
                              name:"浴室用品",
                              imgUrl:"/static/img/logo.png"
                          },
                          {
        
                              id:2,
                              name:"洗晒",
                              imgUrl:"/static/img/logo.png"
                          }
                      ]
                  }
                ]
    
              },
              {
        
                  id:2,
                  name:"女装",
                  data:[
                    {
        
                      name:"裙装",
                      list:[
                          {
        
                              id:1,
                              name:"连衣裙",
                              imgUrl:"/static/img/logo.png"
                          },
                          {
        
                              id:2,
                              name:"半身裙",
                              imgUrl:"/static/img/logo.png"
                          }
                      ]
                    },
                    {
        
                      name:"上衣",
                      list:[
                          {
        
                              id:1,
                              name:"T恤",
                              imgUrl:"/static/img/logo.png"
                          },
                          {
        
                              id:2,
                              name:"衬衫",
                              imgUrl:"/static/img/logo.png"
                          }
                      ]
                  }
                ]
              
              }
              
          ]
      });
    });

#### 四 商品分类数据接口文档 ####

1.1 接口功能

> 获取商品分类数据

1.2 URL

> 地址 /api/goods/list

1.3 支持格式

> JSON

1.4 HTTP请求方式

> GET

1.5 请求参数

1.6 返回字段

<table> 
 <thead> 
  <tr> 
   <th>返回字段</th> 
   <th>字段类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>code</td> 
   <td>string</td> 
   <td>返回结果状态 0:正常 1:错误</td> 
  </tr> 
  <tr> 
   <td>data</td> 
   <td>object</td> 
   <td>商品分类数据</td> 
  </tr> 
 </tbody> 
</table>

1.7 接口示例

{
        
    	"code":'0',
    	"data":[
    		{
        
                id:1,
                name:"家具家纺",
                data:[
                	{
        
                		name:'上装',
                		List:[
                			id:1,
                			name:'夹克',
                			imgUrl:'xx.jpeg'
                		]
    
                	}
                ]
            }
    	]
    }

#### 商品分类页面布局案例图![商品分类页面布局][851db688fcd14506b8cf6c39cbedd948.png] ####

#### 目录结构 ####

##### 前端目录结构 #####

*  manifest.json 配置文件： appid、logo…
 *  pages.json 配置文件： 导航、 tabbar、 路由
 *  main.js vue初始化入口文件
 *  App.vue 全局配置：样式、全局监视
 *  static 静态资源：图片、字体图标
 *  page 页面
    
     *  index
        
         *  index.vue
     *  list
        
         *  list.vue
     *  my
        
         *  my.vue
     *  search
        
         *  search.vue
     *  search-list
        
         *  search-list.vue
     *  shopcart
        
         *  shopcart.vue
 *  components 组件
    
     *  index
        
         *  Banner.vue
         *  Hot.vue
         *  Icons.vue
         *  indexSwiper.vue
         *  Recommend.vue
         *  Shop.vue
     *  common
        
         *  Card.vue
         *  Commondity.vue
         *  CommondityList.vue
         *  Line.vue
         *  ShopList.vue
 *  common 公共文件：全局css文件 || 全局js文件
    
     *  api
        
         *  request.js
     *  common.css
     *  uni.css

[851db688fcd14506b8cf6c39cbedd948.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/9495b3a9e3a4450baff7f5041cbc9108.png