- .wxml
<view class="parent_screen"> <view class="over_screen" catchtouchmove="handleTap2" > <!--筛选列表--> <view class="screenTitle"> <view wx:for="{{screenList}}" wx:key="index" catchtap="screenFn" data-item="{{item}}" data-index="{{index}}" class="{{screenIndex==index?'screenTitle_itmeselect screenTitle_itme':(name!=''&&item==='区域')||(selectNarrPrice!=''&&item==='价格')||(selectNarrRomm!=''&&item==='户型')||(selectNarrType!=''&&item==='类别')||(SortName!=''&&item==='排序')?'screenTitle_itme_tws screenTitle_itme':'screenTitle_itme'}}"> <view wx:if="{{item==='区域'}}">{{name!=''?name:item}}</view> <view wx:if="{{item=='价格'}}">{{selectNarrPrice!=''?selectNarrPrice:item}}</view> <view wx:if="{{item=='户型'}}">{{selectNarrRomm!=''?selectNarrRomm:item}}</view> <view wx:if="{{item=='排序'}}">{{SortName!=''?SortName:item}}</view> <view wx:if="{{item=='类别'}}">{{selectNarrType!=''?selectNarrType:item}}</view> <view></view> </view> </view> <!-- 区域 --> <block wx:if="{{screenIndex==0&&!screenOff}}"> <view class="screen_quyu"> <!-- 市 --> <scroll-view scroll-y class="screen_quyuL"> <view class="{{arAdressIndex==index?'arAdress_select':''}}" wx:for="{{arrAdress}}" catchtap="selectAdress" data-index="{{index}}" wx:key="id">{{item.name}}</view> </scroll-view> <!-- 区 --> <scroll-view scroll-y class="screen_quyuR"> <view wx:for="{{arrAdress[arAdressIndex].child}}" class="{{item.name==name?'selectSort':''}}" catchtap="selectAdress" data-item="{{item}}" wx:key="id">{{item.name}}</view> </scroll-view> </view> </block> <!-- 区域 --> <!-- 价格 --> <block wx:if="{{screenIndex==1&&!screenOff}}"> <view class="screen_jiage"> <scroll-view scroll-y> <view class="screen_jiage_child"> <view class="{{item.select?'select_Price':''}}" wx:for="{{arrPrice}}" wx:key="index" catchtap="selectPrice" data-type="arrPrice" data-index="{{index}}">{{item.name}}</view> </view> </scroll-view> <view class="screen_btn"> <view catchtap="resatFn" data-type="arrPrice">重置</view> <view catchtap="sureOkpost" data-type="arrPrice">确认</view> </view> </view> </block> <!-- 价格 --> <!-- 户型 --> <block wx:if="{{screenIndex==2&&!screenOff}}"> <view class="screen_jiage"> <scroll-view scroll-y> <view class="screen_jiage_child"> <view class="{{item.select?'select_Price':''}}" catchtap="selectPrice" data-index="{{index}}" data-type="arrRomm" wx:for="{{arrRomm}}" wx:key="index">{{item.name}}</view> </view> </scroll-view> <view class="screen_btn"> <view catchtap="resatFn" data-type="arrRomm">重置</view> <view catchtap="sureOkpost" data-type="arrRomm">确认</view> </view> </view> </block> <!-- 户型 --> <!-- 类别 --> <block wx:if="{{screenIndex==3&&!screenOff}}"> <view class="screen_jiage"> <scroll-view scroll-y> <view class="screen_jiage_child"> <view class="{{item.select?'select_Price':''}}" catchtap="selectPrice" data-index="{{index}}" data-type="arrType" wx:for="{{arrType}}" wx:key="index">{{item.name}}</view> </view> </scroll-view> <view class="screen_btn"> <view catchtap="resatFn" data-type="arrType">重置</view> <view catchtap="sureOkpost" data-type="arrType">确认</view> </view> </view> </block> <!-- 类别 --> <!-- 排序 --> <block wx:if="{{screenIndex==4&&!screenOff}}"> <scroll-view scroll-y class="screen_paixu"> <view class="{{item==SortName?'selectSort':''}}" wx:for="{{arrSort}}" catchtap="selectSortFn" data-index="{{index}}" wx:key="index">{{item}}</view> </scroll-view> </block> <!-- 排序 --> </view></view><!-- 遮罩层 --><view hidden="{{screenOff}}" catchtouchmove="screenHidden" catchtap="screenHidden" class="hot_zhezhao"></view>2、wxss
/* components/Common/screen/screen.wxss */page{ width: 100%; height: 100%;}.screenTitle { height: 102rpx; width: 750rpx; display: flex; justify-content: space-between; padding-left: 39rpx; padding-right: 39rpx; box-sizing: border-box; z-index: 1000; background:rgba(255,255,255,1);}.screenTitle_itme { display: flex; align-items: center; width: 110rpx; justify-content: space-around;}.screenTitle_itme view:nth-child(2) { margin-top: 5rpx; border-top: 10rpx solid #999999; border-right: 10rpx solid #fff; border-left: 10rpx solid #fff;}.screenTitle_itme view:nth-child(1) { font-size: 26rpx; font-family: Source Han Sans CN; font-weight: 400; margin-right: 10rpx; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 110rpx; text-align: center;}/* 选中状态样式 */.screenTitle_itmeselect view:nth-child(1) { color: rgba(255, 198, 25, 1) !important;}.screenTitle_itme_tws view:nth-child(1){ color: rgba(255, 198, 25, 1) !important;}.screenTitle_itmeselect view:nth-child(2) { border-bottom: 10rpx solid rgba(255, 198, 25, 1); border-top: none;}.screenTitle_itme_tws view:nth-child(2){ border-top: 10rpx solid rgba(255, 198, 25, 1); border-bottom: none;}/* 父组及选择器（包裹） */.parent_screen{ position: absolute; width: 100%; height: 100%;}.over_screen{ position: absolute; background:rgba(255,255,255,1); z-index: 1900;}/* 父组及选择器（包裹） *//* 选中状态样式 *//* 区域 */.screen_quyu { display: flex; height: 560rpx; box-sizing: border-box; position: sticky !important; top:200rpx;}.screen_quyu view { height: 80rpx; line-height: 80rpx;}.screen_quyu .screen_quyuL { flex: 1; background: rgba(242, 242, 242, 1); display: flex; flex-direction: column; width: 100%; height: 560rpx; box-sizing: border-box; font-size: 26rpx; font-family: Source Han Sans CN; font-weight: 400; color: rgba(51, 51, 51, 1); text-align: center;}.screen_quyu .screen_quyuR { flex: 2; background: rgba(255, 255, 255, 1); display: flex; width: 100%; height: 560rpx; box-sizing: border-box; flex-direction: column; padding-left: 62rpx; font-size: 26rpx; font-family: Source Han Sans CN; font-weight: 400; color: rgba(51, 51, 51, 1);}.arAdress_select { background: rgba(255, 255, 255, 1);}/* 区域 *//* 价格 */.screen_jiage { width: 100%; position: sticky; top:200rpx; box-sizing: border-box;}.screen_jiage .screen_jiage_child { height: 260rpx; display: flex; width: 100%; flex-wrap: wrap; justify-content:flex-start; flex-direction: row; padding:0 30rpx; box-sizing: border-box;}.screen_jiage_child view { width: 220rpx; height: 80rpx; line-height: 80rpx; background: rgba(242, 242, 242, 1); border-radius: 10rpx; text-align: center; margin-right: 8rpx; font-size:26rpx;font-family:Source Han Sans CN;font-weight:400;color:rgba(51,51,51,1);margin-top: 15rpx;box-sizing: border-box;}.select_Price{ background:rgba(255,198,25,1) !important;}.screen_btn { display: flex; height: 98rpx; line-height: 98rpx; justify-content: space-around; border-top: 2rpx solid #dddddd; position: relative;}/* 按钮 */.screen_btn::before { position: absolute; width: 2rpx; content: ' '; height: 60rpx; background: #dddddd; left: 50%; top: 50%; transform: translate(-50%, -50%);}.screen_btn view:nth-child(1) { font-size: 34rpx; font-family: Source Han Sans CN; font-weight: 400; color: rgba(153, 153, 153, 1);}.screen_btn view:nth-child(2) { font-size: 34rpx; font-family: Source Han Sans CN; font-weight: 400; color: rgba(51, 51, 51, 1);}/* 按钮 *//* 价格 *//* 排序 */.screen_paixu{ height: 403rpx; width: 100%;}.screen_paixu view{ font-size:26rpx;font-family:Source Han Sans CN;font-weight:400;color:rgba(51,51,51,1);padding:54rpx 30rpx;box-sizing: border-box;}.screen_paixu view:first-child{ padding-top: 25rpx;}/* 排序 *//* 遮罩层 */.hot_zhezhao{ position: fixed; width: 100%; height: 100%; background:rgba(0,0,0,1); opacity:0.3;}/* 排序与区域选择状态 */.selectSort{ color: rgba(255, 198, 25, 1) !important;}3、js
// components/Common/screen/screen.js /** * 组件的绑定事件 * selectAdress 单选事件 传参数id = {idareaId: item.id} * sureOkpost 多选事件 * */Component({ /** * 组件的属性列表 */ properties: { areaList: { type: Array }, screenList: { type: Array, value: ['区域', '价格', '户型', '类别', '排序'] } }, /** * 组件的初始数据 */ data: { screenIndex: 9, //分类选择下标状态 arrAdress: [ //区域 { name: "不限", item: ['不限'] }, { name: "广州市", item: ['海珠区', '海珠区', '海珠区', '海珠区', '海珠区', '海珠区', '海珠区', '海珠区', '海珠区', '海珠区', '海珠区', '海珠区'] }, { name: "广州市", item: ['海珠区1'] }, { name: "广州市", item: ['海珠区2'] }, { name: "广州市", item: ['海珠区3'] } ], name: '', //区域选择后值名称 priceNmae:[],//价格选择值 priceNmaevale:'',//显示价格 arAdressIndex: 0, //区域选择下标 selectNarrPrice:'', //价格选择下表 selectNarrRomm:'', //房型选择下表 selectNarrType:'', //类别选择下表 SortName:'',//排序选择值 screenOff: true, //遮罩层显示 arrPrice: ['50万以下', '50-100万', '100-200万', '200-300万', '300-500万', '500万以上'], //价格 arrRomm: ['1室', '2室', '3室', '4室', '5室'], //户型 arrType: ['住宅', '商铺', '别墅', '公寓'], //类别 arrSort: ['智能排序', '距离最近', '人气最高', '价格由低到高', '价格由高到低'], //类别 }, /** * 组件的方法列表 */ methods: { // 选择分类 screenFn(e) { var thiz = this; let name = e.currentTarget.dataset.item; (['区域', '价格', '户型', '类别', '排序']).forEach((item,index) => { if(item == name){ thiz.setData({ screenIndex: index != thiz.data.screenIndex ? index : '9', screenOff: index != thiz.data.screenIndex ? false : !thiz.data.screenOff }) } }) // 之前的逻辑 // let index = e.currentTarget.dataset.index // this.setData({ // screenIndex: index != this.data.screenIndex ? index : '9', // screenOff: index != this.data.screenIndex ? false : !this.data.screenOff // }) }, //选择区域 selectAdress(e) { let index = e.currentTarget.dataset.index let item = e.currentTarget.dataset.item if (item != undefined) { //城市中区域选择 let name = item.name this.setData({ name: name, screenOff: true, screenIndex: 9 }) let id = {//区域id areaId: item.id } this.triggerEvent('selectAdress', id) return false; } this.setData({ arAdressIndex: index, }) let id = {//城市id cityId: this.data.arrAdress[index].id } this.triggerEvent('selectAdress', id) }, //隐藏筛选和遮罩层 screenHidden() { this.setData({ screenOff: true, screenIndex: 9 }) }, //选择价格==户型===类别 selectPrice(e){ let index = e.currentTarget.dataset.index let type=e.currentTarget.dataset.type this.data[type][index].select=!this.data[type][index].select this.setData({ [type]:this.data[type], }) }, // 选择价格 //排序选择 selectSortFn(e){ let index; if(e.currentTarget!=undefined){ index=e.currentTarget.dataset.index }else{ index=e } this.setData({ SortName:this.data.arrSort[index] }) let id = {//排序id sort: index+1 } this.screenHidden() this.triggerEvent('selectAdress', id) }, //数据初始话 dataReacyFn(data,type){ let arrPrice=data.map((item,index)=>{ let obj={} obj.name=item obj.select=false, obj.id=index+1 return obj }) this.setData({ [type]:arrPrice }) }, //重置 resatFn(e){ let type=e.currentTarget.dataset.type this.data[type].forEach(item=>{ item.select=false }) this.setData({ [type]:this.data[type] }) }, //确认 sureOkpost(e){ let keysobj={ //匹配键值对 arrPrice:'price', arrRomm:'room', arrType:'type', } let type=e.currentTarget.dataset.type let arr=[] let strings='' this.data[type].forEach(item=>{ //查找出选择中条件 if(item.select){ arr.push(item.id) strings+=item.name } }) let obj={ arr, key:keysobj[type] } this.setData({ ['selectN'+[type]]:strings }) this.screenHidden() this.triggerEvent('sureOkpost',obj) }, handleTap2(e){ return; } }, ready() { var that=this this.dataReacyFn(that.data.arrPrice,'arrPrice') this.dataReacyFn(that.data.arrRomm,'arrRomm') this.dataReacyFn(that.data.arrType,'arrType') // this.dataReacyFn(this.data.arrSort) this.selectSortFn(0) that.setData({ arrAdress: getApp().areaList }) },})4、效果图
