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

迈不过友情╰ 2024-04-03 09:36 82阅读 0赞

#### 搜索结果页面布局和封装 ####

##### 搜索结果页面布局 #####

> 搜索页面布局  
> 文件名是 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

##### 实例图片展示 #####

![搜索结果页面][119b228bf2ba45f2951448e07914f5e6.png]

[119b228bf2ba45f2951448e07914f5e6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/9ba95f1d216f49c3a0dca67e6c5dde70.png