仙道ˇ彰 2022-06-20 12:01 采纳率: 100%
浏览 39
已结题

关于#前端排序#的问题,如何解决?

        <view class="jiudian">
            <uni-row v-for="(item,index) in filterlist" :key="index"  class="jiudiana">
                <uni-col :span="8">
                    <view class="jiudianaa">
                        <img :src="item.picture">
                    </view>
                </uni-col>
                <uni-col :span="16">
                    <view class="jiudianab">
                        <view class="h-name">
                            <text>
                                {{ item.name }}
                            </text>
                        </view>
                        <view class="h-volumn">
                            <text>
                                销量:{{ item.volumn }}
                            </text>
                        </view>
                        <view class="h-praise">
                            <text>
                                好评:{{ item.praise }}
                            </text>
                        </view>
                        <view class="h-distance">
                            <text>
                                距离:{{ item.distance }}
                            </text>
                        </view>
                        <view class="h-price">
                            <text>
                                价格:{{ item.price }}
                            </text>
                        </view>
                    </view>
                </uni-col>
            </uni-row>
        </view>


<script>
  export default {
          data() {
              return {
                keyword:'',
                orderTypeVolumn:0,
                orderTypePrice:0,
                orderTypeDistance:0,
                list:[
                    {
                        name:"上海画一养生度假村",
                        volumn:500,
                        price:800,
                        praise:100,
                        distance:280,
                        picture:"/static/huayi11.jpg" 
                    },
                    {
                        name:"上海联怡枇杷生态园",
                        volumn:400,
                        price:500,
                        praise:80,
                        distance:560,
                        picture:"/static/lianyi11.jpg"
                    },
                    {
                        name:"上海虹桥唯景酒店",
                        volumn:300,
                        price:600,
                        praise:300,
                        distance:300,
                        picture:"/static/weijing12.jpg"
                    },
                    {
                        name:"白玉兰酒店(上海北青公路店)",
                        volumn:1000,
                        price:400,
                        praise:150,
                        distance:250,
                        picture:"/static/baiyulan/baiyulan11.jpg"
                    }
                ]                
              }
          },
        computed:{
            filterlist(){
                // 取出相关的数据
                var {keyword,orderTypeVolumn,orderTypePrice,orderTypeDistance,list} = this
                // 过滤后显示的数据
                var _filterlist
                
                // 对list_sel进行过滤h
                _filterlist =list.filter(p => p.name.indexOf(keyword)!==-1)  // 搜索筛选
                
                
                // 排序    0为默认    1按销量降序    2按销量降序    
                if(orderTypeVolumn!==0){
                    _filterlist.sort(function(a1,a2){
                        if(orderTypeVolumn == 1){
                            // 根据销量升序
                            return a1.volumn - a2.volumn
                        }else if(orderTypeVolumn == 2){
                            // 根据销量降序
                            return a2.volumn - a1.volumn
                        }
                    })
                }
                
                if(orderTypePrice!==0){
                    _filterlist.sort(function(b1,b2){
                        if(orderTypePrice == 1){
                            // 根据价格升序
                            return b1.price - b2.price
                        }else if(orderTypePrice == 2){
                            // 根据价格降序
                            return b2.price - b1.price
                        }
                    })
                }
                
                if(orderTypeDistance!==0){
                    _filterlist.sort(function(c1,c2){
                        if(orderTypeDistance == 1){
                            // 根据距离升序
                            return c1.distance - c2.distance
                        }else if(orderTypeDistance == 2){
                            // 根据距离降序
                            return c2.distance - c1.distance
                        }
                        
                    })
                }
                
            return _filterlist        //返回自定义的_filterlist
            }
        },
                
          onLoad() {
  
          },
          methods: {
            SetOrderTypeVolumn(){
                if (this.orderTypeVolumn == 0){
                    this.orderTypeVolumn= 1
                }else if (this.orderTypeVolumn ==1){
                    this.orderTypeVolumn= 2
                }else if (this.orderTypeVolumn ==2){
                    this.orderTypeVolumn= 1
                }
            },
            SetOrderTypePrice(){
                if (this.orderTypePrice == 0){
                    this.orderTypePrice= 1
                }else if (this.orderTypePrice ==1){
                    this.orderTypePrice= 2
                }else if (this.orderTypePrice ==2){
                    this.orderTypePrice= 1
                }
            },
            SetOrderTypeDistance(){
                if (this.orderTypeDistance == 0){
                    this.orderTypeDistance= 1
                }else if (this.orderTypeDistance ==1){
                    this.orderTypeDistance= 2
                }else if (this.orderTypeDistance ==2){
                    this.orderTypeDistance= 1
                }
            }
          }
      }
</script>

麻烦帮忙看看,排序的效果是做出来了,但是有个问题,都设置的@click,如果依次点击,从前到后,都会执行排序显示,如果先点击最后那个排序,前面的排序点击都是无效的。点了SetOrderTypeVolumn升序降序有效之后,再点SetOrderTypePrice升序降序依然有效,再点SetOrderTypeDistance升序降序也是依然有效。但是如果先点击的是SetOrderTypeDistance(升序降序有效)再点击前面的SetOrderTypeVolumn和SetOrderTypePrice就无效了,页面无变化

  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2022-06-20 12:18
    关注

    _filterlist只需要sort一次,将3个排序全部考虑进去,而不是单独各来一次sort,这样只有最后的一次出现的sort有效

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 6月28日
  • 已采纳回答 6月20日
  • 创建了问题 6月20日

悬赏问题

  • ¥15 爬取豆瓣电影相关处理
  • ¥15 手机淘宝抓清除消息接口
  • ¥15 C#无selenium
  • ¥15 LD衰减计算的结果过大
  • ¥15 用机器学习方法帮助保险公司预测哪些是欺诈行为
  • ¥15 计算300m以内的LD衰减
  • ¥15 数据爬取,python
  • ¥15 怎么看 cst中一个面的功率分布图,请说明详细步骤。类似下图
  • ¥15 为什么我的pycharm无法用pyqt6的QtWebEngine
  • ¥15 FOR循环语句显示查询超过300S错误怎么办