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

商品分类内容布局

商品分类页面顶栏完成

构建商品分类页面数据

商品分类内容布局

• 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 返回字段

返回字段	字段类型	说明
code	string	返回结果状态 0:正常 1:错误
data	object	商品分类数据

1.7 接口示例

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

            	}
            ]
        }
	]
}

商品分类页面布局案例图

目录结构

前端目录结构

• 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