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

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

案例图片