【uniapp】自定义一个排序组件

代码如下：有很多不需要的css与js 用的时候可以删一下

<template> <view class="con"> <view class="nav"> <button class="nav_btn" :class="btn_1_name === '医生'?'nav_btn_active':''" @click="chooseValue(1)">医生</button> <button class="nav_btn" :class="btn_1_name === '机构'?'nav_btn_active':''" @click="chooseValue(0)">机构</button> <button class="nav_btn" :class="btn_1_name === '项目'?'nav_btn_active':''" @click="chooseValue(2)">项目</button> <view class="nav_btn_active2" @click="btnshowList">{ {btn_2_name}} <view class="sanjiao">▼ </view> </view> </view> <view v-if="showList" class="moniList"> <view class="moniItem" v-for="(item,index) in lawList1" :key="index" @click="chooseValue1(index)">{ {item}} </view> </view> <view v-if="showList2" class="moniList"> <view class="moniItem" v-for="(item,index) in lawList2" :key="index" @click="chooseValue2(index)">{ {item}} </view> </view> <view v-if="showList3" class="moniList"> <view class="moniItem" v-for="(item,index) in lawList3" :key="index" @click="chooseValue3(index)">{ {item}} </view> </view> <view class="list">  <view class="list-none" v-if="!storelist.length">暂无{ {btn_1_name}}</view>  <view v-if="btn_1_name == '医生'" class="itemimg1"> 医生 </view> <view v-if="btn_1_name == '机构'" class="itemimg1"> 机构 </view> <view v-if="btn_1_name == '项目'" class="itemimg2"> 项目 </view> </view> </view> </template> <script> /******************* * 自定义排序组件 * * ******************/ export default { data() { return { storelist: ["1", "2", "3"], showList: false, showList2: false, showList3: false, btn_1_name: '医生', btn_2_name: '选择排序方式', lawList: ['机构', '医生', '项目'], lawList1: ['天数', '热度'], lawList2: ['天数', '热度'], lawList3: ['按销量排序', '高价优先', '低价优先'], btnsel: 1, } }, mounted() { console.log("页面挂载"); }, methods: { jump(btn_1_name, item, index) { console.log("263行", index); if (btn_1_name == '机构') { uni.navigateTo({ // url: `../../pages_my/lawFirm/lawFirm?lawFirmDet=${JSON.stringify(item)}` url: `../../home_layout/mouthdetail/mouthdetail?lawTo=${JSON.stringify(item)}` }) console.log("跳转机构详情"); } else if (btn_1_name == '医生') { uni.navigateTo({ url: `../../pages_my/lawSubscribetwo/lawSubscribetwo?lawyer=${JSON.stringify(item)}&lawOfficeId=''` }) console.log("跳转医生详情"); } else if (btn_1_name == '项目') { console.log("跳转项目详情"); uni.navigateTo({ url: `../../my_layout/details/details` }) } }, //跳转页面 jumpPage(path) { // let that = this // uni.navigateTo({ // url: `../../pages_my/${path}/${path}?btn_1_name=${that.btn_1_name}` // }) console.log("不执行跳转"); }, //直接把参数扔过去 goPay(index, index1) { }, btnshowList() { if (this.btnsel == 0) { // this.getLawOfficeList() this.setShowList() this.btn_1_name = this.lawList[0] } else if (this.btnsel == 1) { this.setShowList2() this.btn_1_name = this.lawList[1] } else if (this.btnsel == 2) { this.setShowList3() // this.getLawList() this.btn_1_name = this.lawList[2] } }, // 下拉框展示 setShowList() { this.showList = !this.showList this.showList2 = false this.showList3 = false // console.log("展示下拉框1"); }, // 下拉框展示 setShowList2() { this.showList2 = !this.showList2 this.showList = false this.showList3 = false // console.log("展示下拉框2"); }, // 下拉框展示3 setShowList3() { this.showList3 = !this.showList3 this.showList2 = false this.showList = false // console.log("展示下拉框3"); }, // 下拉框选择 chooseValue(index) { if (index == 0) { // this.getLawOfficeList() this.setShowList() this.btn_1_name = this.lawList[index] console.log("286点击获取机构-列表"); this.btnsel = 0 } else if (index == 1) { this.setShowList2() this.btn_1_name = this.lawList[index] console.log("291点击获取医生-列表"); this.btnsel = 1 } else if (index == 2) { this.setShowList3() // this.getLawList() this.btn_1_name = this.lawList[index] console.log("297点击获取项目列表"); this.btnsel = 2 } }, // 下拉框选择1 chooseValue1(index) { this.btn_2_name = this.lawList1[index] this.showList = false }, // 下拉框选择2 chooseValue2(index) { this.btn_2_name = this.lawList2[index] this.showList2 = false }, // 下拉框选择3 chooseValue3(index) { this.btn_2_name = this.lawList3[index] this.showList3 = false }, // 计算两点的距离 calculateDistance(lat, lng) { let strfrom = this.lat + "," + this.lng; let strto = lat + "," + lng; return new Promise((resolve, reject) => { qqmapsdk.calculateDistance({ mode: "straight", from: strfrom || "", to: strto, success: function(res) { resolve(res); }, fail: function(error) { console.error(error); reject(error); }, complete: function(res) { console.log(res); }, }); }); } } } </script> <style lang="scss" scoped> .con { width: 664rpx; padding: 6rpx 43rpx 81rpx 43rpx; background: #FFFFFF; } .nav { width: 664rpx; height: 79rpx; display: flex; align-items: center; .nav_btn { width: 110rpx; height: 44rpx; margin: 0; padding: 0; margin-right: 22rpx; background: #F6F6F6; border-radius: 70rpx; font-weight: 500; font-size: 24rpx; display: flex; justify-content: center; align-items: center; color: #000000; border: none; } .nav_btn_active { color: #FF7A00; border: 1px solid #FF650F; } .nav_btn_active2 { position: absolute; display: flex; margin-left: 500rpx; // background-color: red; color: #000; width: 190rpx; font-weight: 500; font-size: 24rpx; } .sanjiao { position: relative; margin-top: 3rpx; margin-left: 10rpx; font-size: 20rpx; color: #FF650F; } button::after { border: none; } } .moniList { position: absolute; width: 664rpx; left: 0; padding: 34rpx 43rpx; z-index: 50; background: #FFFFFF; border-top: 1rpx solid #EEEEEE; .moniItem { width: 143rpx; height: 44rpx; font-size: 24rpx; display: flex; align-items: center; color: #000000; } } .list { width: 675rpx; .list-none { width: 675rpx; height: 503rpx; display: flex; justify-content: center; align-items: center; } // padding: 37rpx; .list_item { width: 675rpx; height: 223rpx; // background-color: yellowgreen; margin-top: 31rpx; border-bottom: 1rpx solid #EEEEEE; .list_item_top { width: 675rpx; height: 138rpx; display: flex; justify-content: space-between; align-items: center; .itemimg1 { image { width: 138rpx; height: 138rpx; border-radius: 50%; } width: 138rpx; height: 138rpx; } .itemimg2 { width: 138rpx; height: 138rpx; image { width: 138rpx; height: 138rpx; } } .top_con { width: 518rpx; height: 138rpx; display: flex; flex-direction: column; justify-content: space-around; .top_title { width: 379rpx; height: 32rpx; font-weight: 500; font-size: 32rpx; display: flex; align-items: center; color: #000000; } .address_list { width: 509rpx; // height: 99rpx; font-weight: 350; font-size: 24rpx; display: flex; justify-content: space-between; align-items: flex-end; color: #000000; .distance { width: 91rpx; height: 27rpx; margin-left: 39rpx; font-size: 24rpx; display: flex; justify-content: flex-end; align-items: center; color: #818181; } } .obj { margin-top: 15rpx; color: #797979; font-family: 'Source Han Sans CN'; font-style: normal; font-weight: 350; font-size: 22rpx; line-height: 33rpx; .itename { font-style: normal; font-weight: 400; font-size: 28rpx; line-height: 42rpx; } .oneicon { position: absolute; margin-top: 15rpx; margin-left: -5rpx; } .itemshop { image { width: 263rpx; height: 28rpx; } } } } } } .list_item_bottom { width: 675rpx; height: 51rpx; // background-color: #FF650F; display: flex; justify-content: space-between; align-items: center; .bottom_con { background: #FFF1E7; border-radius: 6rpx; font-size: 22rpx; display: flex; align-items: center; color: #582A00; .bottom_title { position: absolute; margin-left: 100rpx; margin-top: -120rpx; height: 36rpx; width: 36rpx; padding: 5rpx 5rpx; text-align: center; flex-direction: column; align-items: center; background: linear-gradient(180deg, #FFE8D7 0%, #ffd525 100%); border-radius: 18rpx; } .bottom_text { margin-top: -300rpx; margin-left: -20rpx; height: 130rpx; width: 60rpx; // background-color: green; display: flex; justify-content: center; align-items: center; image { width: 56rpx; height: 100rpx; } .toptext { position: absolute; margin-top: -50rpx; font-size: 23rpx; color: #fff; } .toptext2 { position: absolute; margin-top: 30rpx; font-size: 26rpx; color: #fff; } } } } } </style> <template> <view clas