筛选排序调整

pages/home/home.wxml

@@ -369,13 +369,15 @@
 
     <view class="projects">
       <!--<view class="projects-title">—————————　<text style="color: #98a4b0">精选推荐</text>　—————————</view>--> 
-      <view class="newprojects-title"></view>
-      <view><image src="http://fohow.oss-cn-shenzhen.aliyuncs.com/neverse/goods.png" class="newprojects-titleimg" /></view>
-	  <view class="sortlist">
-		  <view class="sortlist-item" bindtap="sortchangenormal">默认</view>
-		  <view class="sortlist-item" bindtap="salesort">销量 <image src="../../images/footer/up.png" wx:if="{{sale_sort == 2}}"/><image src="../../images/footer/down.png" wx:if="{{sale_sort == 1}}"/></view>
-		  <view class="sortlist-item" bindtap="pricesort">价格 <image src="../../images/footer/up.png" wx:if="{{price_sort == 2}}"/><image src="../../images/footer/down.png" wx:if="{{price_sort == 1}}"/></view>
+      <view class="newprojects-title">
+		  <view class="sortlist">
+		  		  <view class="sortlist-item" bindtap="sortchangenormal">热门精选</view>
+		  		  <view class="sortlist-item" bindtap="salesort">销量排行 <image src="../../images/footer/up.png" wx:if="{{sale_sort == 2}}"/><image src="../../images/footer/down.png" wx:if="{{sale_sort == 1}}"/></view>
+		  		  <view class="sortlist-item" bindtap="pricesort">价格排序 <image src="../../images/footer/up.png" wx:if="{{price_sort == 2}}"/><image src="../../images/footer/down.png" wx:if="{{price_sort == 1}}"/></view>
+		  </view>
 	  </view>
+      <view><image src="http://fohow.oss-cn-shenzhen.aliyuncs.com/neverse/goods.png" class="newprojects-titleimg" /></view>
+	  
       <view class="projectbg">
         <view wx:key="{{index}}" wx:for="{{productsList}}">
 			

pages/home/home.wxss

@@ -817,7 +817,6 @@
   border-radius: 5rpx;
   box-sizing: border-box;
   padding: 0 20rpx;
-  margin-bottom:0;
 }
 .newprojects-titleimg {
   display:block;
@@ -1089,18 +1088,19 @@ font-size: 14px;
 }
 
 .sortlist{
-overflow: hidden;
-    margin: 25rpx;
+    overflow: hidden;
     padding: 10rpx;
     box-sizing: border-box;
     color: #333;
-    border-bottom: 1px solid #e5e5e5;
-    margin-top: 5rpx;
+    width: 65%;
+    float: right;
+    line-height: 45rpx;
 }
 .sortlist-item{
 	    width: 33.33%;
 	    float: left;
 	    text-align: center;
+		font-size:24rpx;
 }
 .sortlist-item image{
 	    width: 20rpx;

pages/projects/projects.js

@@ -19,7 +19,11 @@ Page({
 	windowWidth:375,
 	word:'',
 	price_sort:0,
-	sale_sort:0
+	sale_sort:0,
+	
+	selectShow: false,//控制下拉列表的显示隐藏，false隐藏、true显示
+	selectData: [],//下拉列表的数据
+	index: 0,//选择的下拉列表下标
   },
   onLoad: function (options) {
 	  const info = wx.getSystemInfoSync();
@@ -243,5 +247,32 @@ Page({
   		price_sort:type,
   	})
   	this.getProjects()
-  }
+  },
+  // 点击下拉显示框
+    selectTap() {
+      this.setData({
+        selectShow: !this.data.selectShow
+      });
+    },
+    // 点击下拉列表
+    optionTap(e) {
+		var cur = e.currentTarget.dataset.current;
+		if (this.data.currentTab == cur) {
+		  return false
+		} else {
+		  this.setData({
+		    currentTab: cur,
+		    projects_more: true,
+		    projects_page: 1,
+		    projects_change: true,
+			selectShow: !this.data.selectShow,
+		  })
+		  this.getProjects()
+		}
+    },
+	closeselect(){
+		this.setData({
+		  selectShow: false
+		});
+	}
 })

pages/projects/projects.wxml

@@ -1,4 +1,4 @@
-<view class="bg">
+<view class="bg" bindtap="closeselect">
 	<!-- 顶部导航 -->
 	
 	<view class="navbox" style="block;height: {{statusBarHeight + 45}}px;">
@@ -9,19 +9,31 @@
 			</view>
 		</view>
 	</view>
-	<view class="sortlist">
-			  <view class="sortlist-item" bindtap="sortchangenormal">默认</view>
-			  <view class="sortlist-item" bindtap="salesort">销量 <image src="../../images/footer/up.png" wx:if="{{sale_sort == 2}}"/><image src="../../images/footer/down.png" wx:if="{{sale_sort == 1}}"/></view>
-			  <view class="sortlist-item" bindtap="pricesort">价格 <image src="../../images/footer/up.png" wx:if="{{price_sort == 2}}"/><image src="../../images/footer/down.png" wx:if="{{price_sort == 1}}"/></view>
-	</view>
-  <view class="projects" style="padding-top:{{(statusBarHeight + 75) + 50}}px;">
+	
+  <view class="projects" style="padding-top:{{(statusBarHeight + 45) + 50}}px;">
     <view class="projectbg">
-      <view class="scrollview" wx:if="{{vershow}}" style="top:{{statusBarHeight + 75}}px;">
-         <scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
+      <view class="scrollview" wx:if="{{vershow}}" style="top:{{statusBarHeight + 45}}px;">
+         <!-- <scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
           <block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
               <view class="nav-item {{currentTab == idx ?'active':''}}"  data-current="{{idx}}" bindtap="switchNav">{{navItem.name}}</view>
           </block>
-         </scroll-view>
+         </scroll-view> -->
+		 
+		 <view class="sortlist">
+					<view class="sortlist-item">
+						<view class='select_box'>
+						    <view class='select' catchtap='selectTap'>
+						        <text class='select_text'>{{navData[currentTab]['name']}}</text>
+						    </view>
+						    <view class='option_box' style='height:{{selectShow?navData.length*58:0}}rpx;top:{{statusBarHeight + 85}}px;'>
+						        <text class="option  {{currentTab == idx ?'active':''}}" wx:for='{{navData}}'  wx:for-index="idx" wx:for-item="navItem" wx:key='this' data-index='{{idx}}' data-current="{{idx}}" catchtap='optionTap'>{{navItem.name}}</text>
+						    </view>
+						</view>
+					</view>
+		 		  <view class="sortlist-item" bindtap="sortchangenormal">热门精选</view>
+		 		  <view class="sortlist-item" bindtap="salesort">销量排行 <image src="../../images/footer/up.png" wx:if="{{sale_sort == 2}}"/><image src="../../images/footer/down.png" wx:if="{{sale_sort == 1}}"/></view>
+		 		  <view class="sortlist-item" bindtap="pricesort">价格排序 <image src="../../images/footer/up.png" wx:if="{{price_sort == 2}}"/><image src="../../images/footer/down.png" wx:if="{{price_sort == 1}}"/></view>
+		 </view>
       </view>
       <view class="project" wx:key="{{index}}" wx:for="{{projects}}"  data-val="{{item.id}}" bindtap="toProject">
         <view class="project-left">

pages/projects/projects.wxss

@@ -181,26 +181,77 @@
 }
 
 .sortlist{
-overflow: hidden;
-    padding: 10rpx;
+	overflow: hidden;
     box-sizing: border-box;
     color: #333;
-    border-bottom: 1px solid #e5e5e5;
-    margin-top: 5rpx;
-    position: fixed;
-    width: 100%;
-    left: 0;
-    top: 65px;
-    margin: 0;
-    z-index: 999;
     background: #fff;
+    height: 80rpx;
+    line-height: 80rpx;
+	box-sizing: border-box;
+	overflow: hidden;
+	background-color: #f8f9fb;
+	white-space: nowrap;
+	color: #888888;
 }
 .sortlist-item{
-	    width: 33.33%;
+	    width: 25%;
 	    float: left;
 	    text-align: center;
+		font-size:26rpx;
 }
 .sortlist-item image{
 	    width: 20rpx;
 	    height: 20rpx;
+}
+
+.select_box{
+  border-radius: 14rpx;
+  position: relative;
+}
+.select_box .select{
+box-sizing: border-box;
+    border-radius: 8rpx;
+    align-items: center;
+    padding: 0 10rpx;
+}
+.select_box .select .select_text{
+  font-size: 26rpx;
+  color: #777777;
+  line-height: 28rpx;
+  flex: 1;
+}
+.select_box .select .select_img{
+  width: 30rpx;
+  height: 30rpx;
+  display: block;
+  transition:transform 0.3s;
+}
+.select_box .select .select_img_rotate{
+  transform:rotate(180deg); 
+}
+.select_box .option_box{
+position: fixed;
+    top: calc(100% - 1px);
+    width: 25%;
+    box-sizing: border-box;
+    height: 0;
+    overflow-y: auto;
+    background: #fff;
+    transition: height 0.3s;
+    border-left: 1px solid #efefef;
+    top: 108px;
+    border-right: 1px solid #efefef;
+    left: 0;
+    background: #f8f9fb;
+    box-shadow: 5px 5px 7px #e0e0e0;
+}
+.select_box .option_box .option{
+  display: block;
+  line-height: 40rpx; 
+  font-size: 26rpx;
+  padding: 10rpx;
+}
+.select_box .option_box .option.active{
+    color: #fff;
+        background: #eab86a;
 }