筛选样式

pages/firstBill/index.js

@@ -13,6 +13,39 @@ Page({
     toped: "1",
     jobNum: 0, // 48小时更新职位数
     currCode: '',
+    anchorList: [
+      {
+        id: 'age',
+        name: '年龄'
+      },
+      {
+        id: 'gender',
+        name: '性别'
+      },
+      {
+        id: 'class',
+        name: '分类'
+      },
+      {
+        id: 'xzfl',
+        name: '薪资福利'
+      },
+      {
+        id: 'ssbz',
+        name: '宿舍保障'
+      },
+      {
+        id: 'bzxx',
+        name: '班制休息'
+      },
+      {
+        id: 'msts',
+        name: '面试特色'
+      }, {
+        id: 'qtts',
+        name: '其他特色'
+      }
+    ],
     colorList: [{
       color: '#1890ff',
       background: '#ccc'
@@ -151,6 +184,7 @@ Page({
     halfHide: true, // 智能匹配显示一半控制
     topNum: 0,
     scrollTo: "", // 列表滚动的控制
+    filterTo: 'age',// 筛选锚点控制
     navList: [],
     bannerList: [],
     /**
@@ -4767,5 +4801,19 @@ Page({
     }).catch(() => {
 
     })
+  },
+  goAnchor (e) {
+    console.log(e.currentTarget.dataset.item.id);
+    let id
+    if (e.currentTarget.dataset.item) {
+      id = e.currentTarget.dataset.item.id
     }
+    this.setData({
+      filterTo: id
+    })
+  },
+  catchScrollInfo (e) {
+    console.log(e);
+  },
+  
 });

pages/firstBill/index.wxml

@@ -109,9 +109,13 @@
             <i class="iconfont icon-jiaobiao f4 c3 fst ml4" style="height:22px" wx:if="{{(selectJobList.length <= 0 && selectBrandList.length <= 0)}}" data-type="special"></i>
             <i wx:if="{{selectJobList.length > 0||selectBrandList.length > 0}}" class="specialnum ml4" catchtap style="display:inline-block" data-type="special">{{selectJobList.length + selectBrandList.length }}</i>
             <!-- catchtap="hideLeft" -->
-            <scroll-view class="gjFixed" catchtouchmove="modalMove" wx:if="{{whichOneShow == 'special'}}">
+            <view class="gjFixed" catchtouchmove="modalMove" wx:if="{{whichOneShow == 'special'}}">
-              <scroll-view scroll-y="{{true}}" catchtap class="filterBox filterContainer">
+              <view class="filterContainer filterBox" style hover-class="none" hover-stop-propagation="false">
-                <view class="sub" hover-class="none" hover-stop-propagation="false">
+                <scroll-view class style="padding:" scroll-y="{{true}}" hover-class="none" hover-stop-propagation="false">
+                  <view class="{{item.id == filterTo ? 'filterActive' : ''}} br4" style="width:80px;padding:12px 0" wx:for="{{anchorList}}" wx:for-item="item" catchtap="goAnchor" data-item="{{item}}" hover-class="none" hover-stop-propagation="false">{{item.name}}</view>
+                </scroll-view>
+                <scroll-view style="width:calc(100% - 100px);padding:8px" bindscroll="catchScrollInfo" data-filterTo='{{filterTo}}' catchtap scroll-y="{{true}}" scroll-into-view="{{filterTo}}" scroll-with-animation="{{true}}">
+                  <view class="sub" id="age" hover-class="none" hover-stop-propagation="false">
                     <view class="title">年龄（岁）</view>
                     <view class="content por" style="justify-content:space-between">
                       <!-- <view class="slider_value" style="position: absolute;top: -10px;left: 10px;color: var(--color-ysd);" hover-class="none" hover-stop-propagation="false">{{userAge == 60 ? userAge + '+' : userAge }}</view>
@@ -120,53 +124,54 @@
                         <view class hover-class="none" hover-stop-propagation="false">{{minAge + '-'}}</view>
                         <view class hover-class="none" hover-stop-propagation="false">{{maxAge == 60 ? maxAge + '+' : maxAge }}</view>
                       </view>
-                    <range-slider height="50" block-size="50" min="16" max="60" values="{{rangeValues}}" bindrangechange="onRangeChange" activeColor="var(--color-ysd)"></range-slider>
+                      <range-slider height="50" block-size="50" min="16" max="60" width="{{530}}" values="{{rangeValues}}" bindrangechange="onRangeChange" activeColor="var(--color-ysd)"></range-slider>
                     </view>
                   </view>
-                <view class="sub" hover-class="none" hover-stop-propagation="false">
+                  <view class="sub" id="gender" hover-class="none" hover-stop-propagation="false">
                     <view class="title">性别</view>
                     <!-- wx:if="{{index != filterData.sex.length - 1}}" -->
                     <view class="content" style="justify-content:space-between">
                       <span wx:for="{{filterData.sex}}" catchtap="setActive" wx:key="index" data-type="sex" data-id="{{item.id}}" style="margin-right:{{index == filterData.sex.length - 1? '0':''}}" class="{{item.active ? 'active':''}}" hover-class="none" hover-stop-propagation="false">{{item.name}}</span>
                     </view>
                   </view>
-                <view class="sub" hover-class="none" hover-stop-propagation="false">
+                  <view class="sub" id="class" hover-class="none" hover-stop-propagation="false">
                     <view class="title">分类</view>
                     <view class="content">
                       <span wx:for="{{filterData.classifyList}}" catchtap="setActive" wx:key="index" data-type="classifyList" data-id="{{item.id}}" class="{{item.active ? 'active':''}}" hover-class="none" hover-stop-propagation="false">{{item.name}}</span>
                     </view>
                   </view>
-                <view class="sub" hover-class="none" hover-stop-propagation="false">
+                  <view class="sub" id="xzfl" hover-class="none" hover-stop-propagation="false">
                     <view class="title">薪资福利</view>
                     <view class="content">
                       <span wx:for="{{filterData.jobFilter.tagArray1}}" catchtap="setActive" wx:key="index" data-type="jobFilter" data-arr="tagArray1" data-id="{{item.id}}" class="{{item.active ? 'active':''}}" hover-class="none" hover-stop-propagation="false">{{item.name}}</span>
                     </view>
                   </view>
-                <view class="sub" hover-class="none" hover-stop-propagation="false">
+                  <view class="sub" id="ssbz" hover-class="none" hover-stop-propagation="false">
                     <view class="title">宿舍保障</view>
                     <view class="content">
                       <span wx:for="{{filterData.jobFilter.tagArray3}}" catchtap="setActive" wx:key="index" data-type="jobFilter" data-arr="tagArray3" data-id="{{item.id}}" class="{{item.active ? 'active':''}}" hover-class="none" hover-stop-propagation="false">{{item.name}}</span>
                     </view>
                   </view>
-                <view class="sub" hover-class="none" hover-stop-propagation="false">
+                  <view class="sub" id="bzxx" hover-class="none" hover-stop-propagation="false">
                     <view class="title">班制休息</view>
                     <view class="content">
                       <span wx:for="{{filterData.jobFilter.tagArray0}}" catchtap="setActive" wx:key="index" data-type="jobFilter" data-arr="tagArray0" data-id="{{item.id}}" class="{{item.active ? 'active':''}}" hover-class="none" hover-stop-propagation="false">{{item.name}}</span>
                     </view>
                   </view>
-                <view class="sub" hover-class="none" hover-stop-propagation="false">
+                  <view class="sub" id="msts" hover-class="none" hover-stop-propagation="false">
                     <view class="title">面试特色</view>
                     <view class="content">
                       <span wx:for="{{filterData.jobFilter.tagArray4}}" catchtap="setActive" wx:key="index" data-type="jobFilter" data-arr="tagArray4" data-id="{{item.id}}" class="{{item.active ? 'active':''}}" hover-class="none" hover-stop-propagation="false">{{item.name}}</span>
                     </view>
                   </view>
-                <view class="sub" hover-class="none" hover-stop-propagation="false">
+                  <view class="sub" id="qtts" hover-class="none" hover-stop-propagation="false">
                     <view class="title">其他特色</view>
                     <view class="content">
                       <span wx:for="{{filterData.jobFilter.tagArray2}}" catchtap="setActive" wx:key="index" data-type="jobFilter" data-arr="tagArray2" data-id="{{item.id}}" class="{{item.active ? 'active':''}}" hover-class="none" hover-stop-propagation="false">{{item.name}}</span>
                     </view>
                   </view>
                 </scroll-view>
+              </view>
               <view class="btnBox bt1" catchtap>
                 <button class="clearFilter" hover-class="thover" style data-type="innerclear" bindtap="clearFilter1">清除</button>
                 <button class="normalBtn loginOut" hover-class="thover" style="max-width:178px" bindtap="toList">确定</button>
@@ -208,7 +213,7 @@
                   </view>
                 </view>
               </view>
-            </scroll-view>
+            </view>
           </view>
         </view>
       </view>
@@ -791,7 +796,6 @@
       <i class="iconfont icon-huadong f12 ml4 {{leftShow?'rotate':''}}"></i>
     </view>
   </scroll-view>
-</view>
   <!-- 简版抽屉 -->
   <bottom-drawer show="{{drawerShow}}" drawerType="drawerShow" bindhidedrawer="hidedrawershow" class="bottomDrawer" height="calc(100vh - {{statusBarHeight + ((navigationBarHeight - menuButtonHeight) / 2)  + 41}}px)" hideTabbar="{{true}}">
     <!-- <view slot="title" class hover-class="none" hover-stop-propagation="false"></view> -->
@@ -1079,3 +1083,4 @@
       </view>
     </view>
   </view>
+</view>

pages/firstBill/index.wxss

@@ -1353,14 +1353,21 @@ button.collect icon::before {
 }
 
 .filterContainer {
-  padding: 0 10px;
+  display: flex;
-  height: calc(40vh - 64px);
+  justify-content: space-between;
+  overflow: hidden;
+  height: 60vh;
+  /* padding: 0 10px; */
+  /* height: calc(40vh - 64px); */
+  /* height: 100%; */
   /* width: calc(100%); */
   box-sizing: border-box;
   background-color: #fff;
-  padding-bottom: 10px;
+  padding-bottom: 4px;
+}
+.filterActive{
+  background-color: #eee;
 }
-
 .left_drawer_container {
   padding: 0 16px;
   /* width: calc(100%); */