UNIAPP实战项目笔记20 搜索结果页面排序功能(单击切换上下箭头和颜色显示)

快来打我* 2024-04-03 09:38 64阅读 0赞

### UNIAPP实战项目笔记20 搜索结果页面排序功能(单击切换上下箭头和颜色显示) ###

#### 关键代码 ####

##### shopList.vue 代码 #####

> 组件代码  
> 顶栏换成动态数据遍历  
> 样式控制箭头位置  
> 通过点击事件获取点击的按钮,更改显示的样式

<template>
        <view class="shop-list">
            <view class="shop-title f-color">
                <view class="shop-item"
                    v-for="(item,index) in shopList.data"
                    :key="index"
                    @tap="changeTab(index)"
                >
                    <view :class="shopList.currentIndex==index?'f-active-color':''">{
        {
        item.name}}</view>
                    <view class="shop-icon">
                        <view class="iconfont icon-shangjiantou up"
                            :class="item.status===1?'f-active-color':''"
                        ></view>
                        <view class="iconfont icon-xiajiantou down"
                            :class="item.status===2?'f-active-color':''"
                        ></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 {
        
                    shopList:{
        
                        currentIndex:0,
                        data:[
                            {
        name:'价格',status:1},
                            {
        name:'折扣',status:0},
                            {
        name:'品牌',status:0}
                        ]
                    },
                   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
            },
            methods:{
        
                // 点击切换颜色
                changeTab(index){
        
                    
                    // 索引值
                    let idx = this.shopList.currentIndex;
                    // 具体哪一个对象
                    let item = this.shopList.data[idx];
                    if(idx == index){
        
                        return item.status = item.status === 1 ? 2 : 1
                    }
                    
                    // 新值
                    let newItem = this.shopList.data[index];
                    item.status = 0; //旧的回复默认
                    this.shopList.currentIndex = index;
                    newItem.status = 1; // 新的给颜色
                }
            }
        }
    </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>

##### 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"
                                }
                            ]
                        }
                    }
                }
                
            }

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

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

*  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

#### 案例图片 ####

![排序功能案例][f694e310ce0c44daba684926447d8596.png]

[f694e310ce0c44daba684926447d8596.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/949978a4373f4deaaede96190f06d33d.png