UNIAPP实战项目笔记19 搜索结果页面布局和封装

搜索结果页面布局和封装

搜索结果页面布局

搜索页面布局
文件名是 shop-list.vue

<template>
    <view class="search-list">
        <ShopList></ShopList>
    </view>
</template>

<script>
    import ShopList from '@/components/common/ShopList.vue'
    export default {
        data() {
            return {
                
            };
        },
        components:{
            ShopList
        }
    }
</script>

<style lang="scss">
.search-list{
    width: 100%;
}
</style>

page.json页面内容

{
            "path" : "pages/search-list/search-list",
            "style" :                                                                                    
            {
                "navigationBarBackgroundColor": "#FFFFFF",
                "app-plus": {
                    "scrollIndicator": "none",
                    "titleNView": {
                        "searchInput": {
                            "placeholder": "nike",
                            "disabled": true,
                            "align": "left",
                            "autoFocus": false,
                            "borderRadius": "15px",
                            "backgroundColor": "#F7F7F7",
                            "placeholderColor": "#B3B3B3"
                        },
                        "buttons": [
                            {
                                "float": "right",
                                "color": "#636263",
                                "text": "筛选",
                                "fontSize": "16px",
                                "width":"60px"
                            }
                        ]
                    }
                }
            }
            
        }

结果页面封装ShopList组件

搜索结果页面通过封装的组件 实现
Shop List.vue代码如下

<template>
    <view class="shop-list">
        <view class="shop-title f-color">
            <view class="shop-item">
                <view class="">价格</view>
                <view class="shop-icon">
                    <view class="iconfont icon-shangjiantou up"></view>
                    <view class="iconfont icon-xiajiantou down"></view>
                </view>
            </view>
            <view class="shop-item">
                <view class="">折扣</view>
                <view class="shop-icon">
                    <view class="iconfont icon-shangjiantou up"></view>
                    <view class="iconfont icon-xiajiantou down"></view>
                </view>
            </view>
            <view class="shop-item">
                <view class="">品牌</view>
                <view class="shop-icon">
                    <view class="iconfont icon-shangjiantou up"></view>
                    <view class="iconfont icon-xiajiantou down"></view>
                </view>
            </view>
        </view>
        <Lines></Lines>
        <CommodityList :dataList="dataList"></CommodityList>
    </view>
</template>

<script>
    import Lines from '@/components/common/Lines.vue'
    import CommodityList from './CommodityList.vue'
    export default {
        data() {
            return {
               dataList:[
                   {
                       id:1,
                       imgUrl:"../../static/logo.png",
                       name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                       pprice:"299",
                       oprice:"659",
                       discount:"5.2"
                   },
                   {
                       id:2,
                       imgUrl:"../../static/logo.png",
                       name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                       pprice:"299",
                       oprice:"659",
                       discount:"5.2"
                   },{
                       id:3,
                       imgUrl:"../../static/logo.png",
                       name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                       pprice:"299",
                       oprice:"659",
                       discount:"5.2"
                   },
                   {
                       id:4,
                       imgUrl:"../../static/logo.png",
                       name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                       pprice:"299",
                       oprice:"659",
                       discount:"5.2"
                   },
               ] 
            };
        },
        components:{
            Lines,
            CommodityList
        }
    }
</script>

<style lang="scss">
.shop-title{
    display:flex;
}
.shop-item{
    flex:1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80rpx;
}
.shop-icon{
    position: relative;
    margin-left: 10rpx;
}
.iconfont{
    width: 16rpx;
    height: 8rpx;
    position: absolute;
    left: 0;
}
.up{
    top: -25rpx;
}
.down{
    top: -5rpx;
}
</style>

前端目录结构

• 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

实例图片展示