1206

src/pages.json

@@ -3,7 +3,7 @@
 			"path": "pages/index/index",
 			"style": {
 				"navigationBarTitleText": ""
-					// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO
+				// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO
 					,
 				"navigationStyle": "custom"
 				// #endif
@@ -110,6 +110,16 @@
             }
             
         }
+        ,{
+            "path" : "pages/index/selectedCases ",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "精选案例",
+                "enablePullDownRefresh": false,
+				"navigationBarBackgroundColor":"#ffffff"
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

src/pages/index/components/scroll-list.vue

@@ -0,0 +1,112 @@
+<template>
+	<view>
+		<scroll-view class="scroll_list" :style="{'background': background}" scroll-x="true">
+			<view class="main-left" style="padding-left: 40rpx;">
+				<view v-for="(item,index) in list" :key="index">
+					<view class="box">
+						<image class="image-bg" :src="item.image"></image>
+						<view class="text t-omit">{{item.title}}</view>
+					</view>
+					<view class="tag_list" v-if="item.tag">
+						<text class="tag">{{item.tag}}</text>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	let defaultList=[
+					{
+						image:'../../../static/image/index/2.png',
+						title:'定制产品',
+						tag:'定制'
+					},
+					{
+						image:'../../../static/image/index/2.png',
+						title:'热销方案',
+						tag:'热销'
+					},
+					{
+						image:'../../../static/image/index/2.png',
+						title:'主题专区',
+						tag:'主题'
+					},
+					{
+						image:'../../../static/image/index/2.png',
+						title:'定制产品',
+						tag:'定制'
+					}
+				];
+	export default{
+		name:"app-scroll-list",
+		props:{
+			list:{
+				type:Array,
+				default:()=>{
+					return defaultList
+				}
+			},
+			background:{
+				type:String,
+				default:''
+			}
+		},
+		data(){
+			return {
+				
+			}
+		},
+		methods:{
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.scroll_list {
+		padding: 15rpx 0 28rpx;
+		.box {
+			height: 250rpx;
+			width: 207rpx;
+			border-radius: 20rpx;
+			overflow: hidden;
+			position: relative;
+			z-index: 2;
+			margin-right: 20rpx;
+			.image-bg {
+				position: absolute;
+				z-index: -1;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				right: 0;
+				width: 100%;
+				height: 100%;
+			}
+			.text {
+				width: 115rpx;
+				font-size: 28rpx;
+				font-weight: 600;
+				color: #FEFFFE;
+				text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.17);
+				position: absolute;
+				top: 30rpx;
+				left: 50%;
+				transform: translateX(-50%);
+				z-index: 1;
+			}
+		}
+		.tag_list {
+			margin-top: 20rpx;
+			.tag {
+				background-color: rgba(238, 235, 222, 1);
+				color: rgb(167, 133, 79);
+				border-radius: 0 50% 50% 50%;
+				font-size: 24rpx;
+				padding: 10rpx 20rpx;
+			}
+		}
+	}
+</style>

src/pages/index/hot_sale_project.vue

@@ -1,8 +1,23 @@
 <template>
-	<view>
+	<view class="page">
 		<image class="tpbg" src="../../static/image/index/3.png" mode=""></image>
+		<app-nav-bar v-if="true"
+		             :fixed="true"
+		             :background-color="''"
+		             :leftIcon="'../../static/image/index/back.png'"
+		             :xStyle="1"
+		             :hasMallSetting="2"
+					 :hasHeight="true"
+					 @headHeight="headHeight"
+		></app-nav-bar>
+		<view class="w" :style="{'height':navbarHeight}"></view>
 		<view class="center">
-			<view class="item" v-for="(item,index) in 2" :key="index">
+			<view class="main-left tagf">
+				<view class="tag" :class="{'active':activeIndex===index?true:false}" v-for="(item,index) in ['全部','硬包装','软包装','热门商品站位']" :key="index" @click="selectTag(index)">
+					{{item}}
+				</view>
+			</view>
+			<view class="item" v-for="(item,index) in 6" :key="index">
 				<view class="main-between img">
 					<view style="width: 419rpx;height: 281rpx;">
 						<image style="width: 419rpx;height: 281rpx;" src="../../static/image/index/2.png" mode=""></image>
@@ -28,26 +43,71 @@
 </template>
 
 <script>
+	import appNavBar from '@/components/page-component/index/app-nav-bar.vue';
 	export default {
+		components:{
+			appNavBar
+		},
 		data() {
 			return {
-				
+				activeIndex:0,
+				navbarHeight:'',
 			};
+		},
+		methods:{
+			selectTag(index){
+				this.activeIndex=index
+			},
+			headHeight(e){
+				this.navbarHeight=e+'px'
+			}
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
+	.page{
+		position: relative;
+		min-height: 100vh;
+	}
 	.tpbg{
 		width: 750rpx;
 		height: 368rpx;
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: -1;
+	}
+	.w{
+		width: 750rpx;
 	}
 	.center{
 		width: 750rpx;
 		height: auto;
 		background: #F8F8F8;
 		border-radius: 20rpx;
+		overflow: hidden;
 		padding: 36rpx;
+		.tagf{
+			padding-bottom: 26rpx;
+		}
+		.tag{
+			min-width: 131rpx;
+			height: 51rpx;
+			background: #EFEFEF;
+			border-radius: 10rpx;
+			font-size: 24rpx;
+			font-weight: 500;
+			color: #999999;
+			text-align: center;
+			line-height: 51rpx;
+			padding: 0 15rpx;
+			margin-right: 20rpx;
+		}
+		.active{
+			background: #A18353;
+			color: #FFFFFF;
+		}
 		.item{
 			width: 678rpx;
 			height: 477rpx;

src/pages/index/hxj_index_component.vue

@@ -3,7 +3,7 @@
 		<view class="swiper_cent">
 			<swiper style="height: 900rpx;" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000"
 				@change="swiperChange" >
-				<swiper-item v-for="(item,index) in 3" :key="index">
+				<swiper-item v-for="(item,index) in 3" :key="index" @click="gopage">
 					<image src="../../static/image/index/1.png" style="width: 100%;height: 900rpx;" mode=""></image>
 				</swiper-item>
 			</swiper>
@@ -22,19 +22,7 @@
 			</view>
 
 		</view>
-		<scroll-view class="pd_list" scroll-x="true">
-			<view class="main-left">
-				<view v-for="(item,index) in ['定制产品','热销方案','主题专区','热销方案']" :key="index">
-					<view class="box">
-						<image class="image-bg" src="../../static/image/index/2.png"></image>
-						<view class="text">{{item}}</view>
-					</view>
-					<view class="tag_list">
-						<text class="tag">{{item.slice(0,2)}}</text>
-					</view>
-				</view>
-			</view>
-		</scroll-view>
+		<app-scroll-list></app-scroll-list>
 		<view class="link">
 			<view class="title1">本期家点灵感</view>
 			<image class="tyx" src="../../static/image/index/tyx.png" mode=""></image>
@@ -68,7 +56,7 @@
 
 		</view>
 		<view class="coupon main-left">
-			<view class="item main-left" v-for="(item,index) in 2">
+			<view class="item main-left" v-for="(item,index) in 2" :key="index">
 				<view class="Wb">
 					<view>
 						<view class="title_2">定制优享礼券</view>
@@ -175,7 +163,7 @@
 				</view>
 			</view>
 			<view class="dir-left-wrap bottom">
-				<view class="item" v-for="(item,index) in 4">
+				<view class="item" v-for="(item,index) in 4" :key="index">
 					<view>
 						<image class="cover" :src="`../../static/image/index/${index+10}.png`" mode=""></image>
 					</view>
@@ -200,7 +188,11 @@
 </template>
 
 <script>
+	import AppScrollList from './components/scroll-list.vue'
 	export default {
+		components:{
+			AppScrollList
+		},
 		data() {
 			return {
 				swiperKey: 0, //轮播位置
@@ -210,12 +202,17 @@
 			swiperChange(e){
 				console.log(e.detail.current)
 				this.swiperKey = e.detail.current
+			},
+			gopage(){
+				uni.navigateTo({
+					url:'/pages/index/hot_sale_project'
+				})
 			}
 		}
 	}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 	@import './index.scss';
 
 	.swiper_cent {

src/pages/index/index.scss

@@ -1,24 +1,23 @@
-.link{
+.link {
 	padding: 30rpx 40rpx;
 	position: relative;
 	font-family: PingFangSC-Semibold, PingFang SC;
-	.hxj{
+	.hxj {
 		font-size: 40rpx;
 		font-weight: 600;
-		color: #E7DAC1;
-		background: angular-gradient(180deg, #E1CFAF 0%, #FEFFFE 100%);
+		color: #e7dac1;
+		background: angular-gradient(180deg, #e1cfaf 0%, #fefffe 100%);
 		-webkit-background-clip: text;
 		// -webkit-text-fill-color: transparent;
-		
 	}
-	
-	.title{
+
+	.title {
 		font-weight: 500;
 		color: #121212;
 		font-size: 32rpx;
 		position: relative;
 		z-index: 2;
-		.hxjImg{
+		.hxjImg {
 			width: 249rpx;
 			height: 31rpx;
 			position: absolute;
@@ -27,14 +26,14 @@
 			z-index: -1;
 		}
 	}
-	.title1{
+	.title1 {
 		font-weight: 500;
 		font-size: 26rpx;
 		position: relative;
 		color: #121212;
 		z-index: 2;
 	}
-	.tyx{
+	.tyx {
 		width: 37rpx;
 		height: 37rpx;
 		position: absolute;
@@ -42,7 +41,7 @@
 		left: 24rpx;
 		z-index: 1;
 	}
-	.d6{
+	.d6 {
 		width: 32rpx;
 		height: 17rpx;
 		position: absolute;
@@ -50,19 +49,19 @@
 		left: 234rpx;
 		z-index: 1;
 	}
-	.subtitle{
+	.subtitle {
 		height: 34rpx;
 		font-size: 24rpx;
 		font-weight: 400;
-		color: #A7A7A7;
+		color: #a7a7a7;
 		line-height: 34rpx;
 	}
-	.coupon_1{
+	.coupon_1 {
 		width: 15rpx;
 		height: 15rpx;
 		margin-left: 25rpx;
 	}
-	.coupon_sub{
+	.coupon_sub {
 		font-size: 20rpx;
 		font-weight: 400;
 		color: #999999;
@@ -70,11 +69,10 @@
 		letter-spacing: 3rpx;
 		margin-left: 25rpx;
 	}
-	
 }
-.pd_list{
+.pd_list {
 	padding: 0 0 0 40rpx;
-	.box{
+	.box {
 		height: 250rpx;
 		width: 207rpx;
 		border-radius: 20rpx;
@@ -92,47 +90,45 @@
 			width: 100%;
 			height: 100%;
 		}
-		.text{
+		.text {
 			width: 87rpx;
 			height: 33rpx;
-			background: #B19D60;
+			background: #b19d60;
 			border-radius: 0px 70rpx 70rpx 17rpx;
 			opacity: 0.2;
 			font-size: 24rpx;
 			font-family: PingFangSC-Regular, PingFang SC;
 			font-weight: 400;
-			color: #A7824B;
+			color: #a7824b;
 			line-height: 33rpx;
-			
-text-shadow: 0px 0px 8rpx rgba(0, 0, 0, 0.17);
+
+			text-shadow: 0px 0px 8rpx rgba(0, 0, 0, 0.17);
 		}
 	}
-	.tag_list{
+	.tag_list {
 		margin-top: 20rpx;
-		.tag{
-			background-color: rgba(238,235,222, 1);
-			color: rgb(167,133,79);
+		.tag {
+			background-color: rgba(238, 235, 222, 1);
+			color: rgb(167, 133, 79);
 			border-radius: 0 50% 50% 50%;
 			font-size: 24rpx;
 			padding: 10rpx 20rpx;
 		}
 	}
-	
 }
-.lg_list{
-	.item{
+.lg_list {
+	.item {
 		padding: 0 40rpx;
 		padding-bottom: 40rpx;
 		position: relative;
-		.imgBox{
+		.imgBox {
 			width: 100%;
 			height: 500rpx;
 			border-radius: 40rpx 0 0 0;
 			z-index: 1;
 		}
-		
-		
-		.b_card{
+
+		.b_card {
 			width: 650rpx;
 			height: 130rpx;
 			position: absolute;
@@ -142,105 +138,102 @@ text-shadow: 0px 0px 8rpx rgba(0, 0, 0, 0.17);
 			background-color: #fff;
 			border-radius: 20rpx;
 			padding: 20rpx 30rpx;
-			box-shadow: 6px 40px 100px 4px #EAEEF0;
-			.left{
+			box-shadow: 6px 40px 100px 4px #eaeef0;
+			.left {
 				display: flex;
 				flex-flow: column;
-				justify-content:space-around;
-				.title{
+				justify-content: space-around;
+				.title {
 					font-size: 24rpx;
 					font-weight: 500;
-					color: #0E0E0E;
+					color: #0e0e0e;
 					line-height: 34rpx;
 				}
-				.desc{
+				.desc {
 					font-size: 24rpx;
 					font-weight: 400;
-					color: #A7A7A7;
+					color: #a7a7a7;
 					line-height: 34rpx;
 				}
 			}
-			.right{
+			.right {
 				display: flex;
 				align-items: center;
-				.price{
+				.price {
 					display: flex;
 					align-items: flex-end;
 					color: #000;
 					font-size: 40rpx;
 					font-family: Helvetica;
-					color: #0E0E0E;
-					.rmb{
+					color: #0e0e0e;
+					.rmb {
 						padding-bottom: 10rpx;
 						font-size: 18rpx;
 						font-family: Helvetica;
-						color: #0E0E0E;
+						color: #0e0e0e;
 					}
-					.dw{
+					.dw {
 						padding-bottom: 10rpx;
 						font-size: 18rpx;
 						font-weight: 500;
-						color: #A7A7A7;
+						color: #a7a7a7;
 					}
 				}
 			}
-			
 		}
 	}
-	
-	
 }
-.more{
+.more {
+	width: 167rpx;
+	height: auto;
+	padding: 30rpx 0;
+	font-size: 20rpx;
+	font-family: PingFangSC-Regular, PingFang SC;
+	font-weight: 400;
+	color: #999999;
+	line-height: 28rpx;
+	letter-spacing: 3rpx;
+	margin: 0 auto;
+	text-align: center;
+	image {
 		width: 167rpx;
-		height: auto;
-		padding: 30rpx 0;
-		font-size: 20rpx;
-		font-family: PingFangSC-Regular, PingFang SC;
-		font-weight: 400;
-		color: #999999;
-		line-height: 28rpx;
-		letter-spacing: 3rpx;
-		margin: 0 auto;
-		text-align: center;
-		image{
-			width: 167rpx;
-			height: 11rpx;
-		}
-		.viewmore1{
-			width: 51rpx;
-			height: 51rpx;
-		}
-		.viewmore1_color{
-			color: #A7824B;
-			line-height: 34rpx;
-			letter-spacing: 5rpx;
-		}
-		.viewmore2{
-			width: 28rpx;
-			height: 28rpx;
-		}
+		height: 11rpx;
+	}
+	.viewmore1 {
+		width: 51rpx;
+		height: 51rpx;
+	}
+	.viewmore1_color {
+		color: #a7824b;
+		line-height: 34rpx;
+		letter-spacing: 5rpx;
+	}
+	.viewmore2 {
+		width: 28rpx;
+		height: 28rpx;
+	}
 }
-.more1{
+.more1 {
 	width: 320rpx;
 	height: 85rpx;
 	border-radius: 43rpx;
-	border: 1rpx solid #B39978;
+	border: 1rpx solid #b39978;
 	margin: 65rpx auto 100rpx;
-		font-size: 24rpx;
-		font-family: PingFangSC-Regular, PingFang SC;
-		font-weight: 400;
-		color: #A7824B;
-		line-height: 85rpx;
-		image{
-			width: 28rpx;
-			height: 28rpx;
-			margin-left: 12rpx;
-		}
+	font-size: 24rpx;
+	font-family: PingFangSC-Regular, PingFang SC;
+	font-weight: 400;
+	color: #a7824b;
+	line-height: 85rpx;
+	image {
+		width: 28rpx;
+		height: 28rpx;
+		margin-left: 12rpx;
+	}
 }
 
-.coupon{
+.coupon {
 	padding: 0 45rpx 0 40rpx;
-	.item{
+	.item {
 		width: 320rpx;
 		height: 200rpx;
 		overflow: hidden;
@@ -249,35 +242,35 @@ text-shadow: 0px 0px 8rpx rgba(0, 0, 0, 0.17);
 		position: relative;
 		background-image: url(../../static/image/index/coupon_masking.png);
 		background-size: 320rpx 200rpx;
-		.Wb{ 
+		.Wb {
 			display: flex;
 			flex-flow: column;
-			justify-content:space-around;
+			justify-content: space-around;
 			padding: 17rpx 0 17rpx 37rpx;
-			.price{
+			.price {
 				font-size: 40rpx;
 				font-family: PingFangSC-Medium, PingFang SC;
 				font-weight: 500;
-				color: #B19D60;
-				text{
+				color: #b19d60;
+				text {
 					font-size: 24rpx;
 				}
 			}
-			.yxq{
+			.yxq {
 				font-size: 18rpx;
 				font-family: PingFangSC-Regular, PingFang SC;
 				font-weight: 400;
-				color: #C1C2C1;
+				color: #c1c2c1;
 			}
 		}
 	}
 }
 
-.hxdz{
-	.q{
+.hxdz {
+	.q {
 		height: 385rpx;
 		padding: 0 45rpx 0 40rpx;
-		.l{
+		.l {
 			margin-right: 25rpx;
 			width: 320rpx;
 			height: 385rpx;
@@ -286,7 +279,7 @@ text-shadow: 0px 0px 8rpx rgba(0, 0, 0, 0.17);
 			position: relative;
 			overflow: hidden;
 			z-index: 1;
-			image{
+			image {
 				width: 100%;
 				height: 100%;
 				position: absolute;
@@ -297,7 +290,7 @@ text-shadow: 0px 0px 8rpx rgba(0, 0, 0, 0.17);
 				z-index: -1;
 			}
 		}
-		.r1{
+		.r1 {
 			width: 320rpx;
 			height: 180rpx;
 			padding: 27rpx 31rpx;
@@ -305,7 +298,7 @@ text-shadow: 0px 0px 8rpx rgba(0, 0, 0, 0.17);
 			position: relative;
 			overflow: hidden;
 			z-index: 1;
-			image{
+			image {
 				width: 100%;
 				height: 100%;
 				position: absolute;
@@ -316,7 +309,7 @@ text-shadow: 0px 0px 8rpx rgba(0, 0, 0, 0.17);
 				z-index: -1;
 			}
 		}
-		.r2{
+		.r2 {
 			width: 320rpx;
 			height: 180rpx;
 			padding: 27rpx 31rpx;
@@ -324,7 +317,7 @@ text-shadow: 0px 0px 8rpx rgba(0, 0, 0, 0.17);
 			position: relative;
 			overflow: hidden;
 			z-index: 1;
-			image{
+			image {
 				width: 100%;
 				height: 100%;
 				position: absolute;
@@ -336,14 +329,14 @@ text-shadow: 0px 0px 8rpx rgba(0, 0, 0, 0.17);
 			}
 		}
 	}
-	
-	.w{
+
+	.w {
 		padding: 0 0 0 40rpx;
 		margin-top: 36rpx;
-		.item{
+		.item {
 			width: 320rpx;
 			margin-right: 25rpx;
-			image{
+			image {
 				width: 320rpx;
 				height: 250rpx;
 			}
@@ -351,15 +344,15 @@ text-shadow: 0px 0px 8rpx rgba(0, 0, 0, 0.17);
 	}
 }
 
-.group_list{
-	.item{
+.group_list {
+	.item {
 		padding: 0 15rpx;
 		margin-bottom: 40rpx;
-		.imgBox{
+		.imgBox {
 			width: 100%;
 			height: 404rpx;
 			position: relative;
-			.img{
+			.img {
 				position: absolute;
 				z-index: -1;
 				left: 0;
@@ -371,169 +364,165 @@ text-shadow: 0px 0px 8rpx rgba(0, 0, 0, 0.17);
 				border-radius: 20rpx;
 			}
 		}
-		
-		
-		.b_card{
+
+		.b_card {
 			width: 500rpx;
 			height: 130rpx;
 			margin: -65rpx auto 0;
 			background-color: #fff;
 			border-radius: 20rpx;
 			padding: 20rpx 30rpx;
-			box-shadow: 6px 40px 100px 4px #EAEEF0;
-			.left{
-				.i{
+			box-shadow: 6px 40px 100px 4px #eaeef0;
+			.left {
+				.i {
 					width: 49rpx;
 					height: 52rpx;
 					border-radius: 8rpx;
-					border: 1rpx solid #0E0E0E;
+					border: 1rpx solid #0e0e0e;
 					font-size: 24rpx;
 					font-family: PingFangSC-Medium, PingFang SC;
 					font-weight: 500;
-					color: #0E0E0E;
+					color: #0e0e0e;
 					line-height: 52rpx;
 					text-align: center;
 				}
-				.q{
+				.q {
 					font-size: 24rpx;
 					font-family: PingFangSC-Medium, PingFang SC;
 					font-weight: 500;
-					color: #0E0E0E;
+					color: #0e0e0e;
 					line-height: 52rpx;
 					margin: 0 7rpx;
 				}
 			}
-			.right{
+			.right {
 				display: flex;
 				align-items: center;
-				.price{
+				.price {
 					display: flex;
 					align-items: flex-end;
 					color: #000;
 					font-size: 40rpx;
 					font-family: Helvetica;
-					color: #0E0E0E;
-					.rmb{
+					color: #0e0e0e;
+					.rmb {
 						padding-bottom: 10rpx;
 						font-size: 18rpx;
 						font-family: Helvetica;
-						color: #0E0E0E;
+						color: #0e0e0e;
 					}
-					.dw{
+					.dw {
 						padding-bottom: 10rpx;
 						font-size: 18rpx;
 						font-weight: 500;
-						color: #A7A7A7;
+						color: #a7a7a7;
 					}
 				}
 			}
-			
 		}
 	}
-	
-	
 }
- 
- .hxzy{
-	 padding: 0 40rpx;
-	 .top{
-		 margin-top: 20rpx;
-		 height: 296rpx;
-		 position: relative;
-		 .dbo{
-			 width: 379rpx;
-			 height: 204rpx;
-			 background: #FEFFFE;
-			 padding: 31rpx 37rpx;
-			 position: absolute;
-			 bottom: 0;
-			 left: 0;
-			 .text{
-				 font-size: 26rpx;
-				 font-family: PingFangSC-Regular, PingFang SC;
-				 font-weight: 400;
-				 color: #252526;
-			 }
-			 .category{
-				 font-size: 24rpx;
-				 font-family: PingFangSC-Regular, PingFang SC;
-				 font-weight: 400;
-				 color: #B39978;
-			 }
-		 }
-	 }
-	.bottom{
+
+.hxzy {
+	padding: 0 40rpx;
+	.top {
+		margin-top: 20rpx;
+		height: 296rpx;
+		position: relative;
+		.dbo {
+			width: 379rpx;
+			height: 204rpx;
+			background: #fefffe;
+			padding: 31rpx 37rpx;
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			.text {
+				font-size: 26rpx;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: #252526;
+			}
+			.category {
+				font-size: 24rpx;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: #b39978;
+			}
+		}
+	}
+	.bottom {
 		margin-top: 40rpx;
-		.item{
+		.item {
 			width: 320rpx;
 			margin-bottom: 35rpx;
 			border-radius: 20rpx;
-			.cover{
+			.cover {
 				width: 320rpx;
 				height: 250rpx;
-			}	
+			}
 		}
-		&>.item:nth-child(2n-1){
+		& > .item:nth-child(2n-1) {
 			margin-right: 25rpx;
 		}
 	}
- }
- .bottom_logo{
-	 text-align: center;
-	 padding: 50rpx 0;
-		 image{
-			 width: 135rpx;
-			 height: 46rpx;
-		 }
-	 .text{
-		 font-variant:small-caps;
-		 font-size: 16rpx;
-		 font-family: PingFangSC-Regular, PingFang SC;
-		 font-weight: 400;
-		 color: #999999;
-		 line-height: 22px;
-		 letter-spacing: 10rpx;
-	 }
- }
-.title_2{
+}
+.bottom_logo {
+	text-align: center;
+	padding: 50rpx 0;
+	image {
+		width: 135rpx;
+		height: 46rpx;
+	}
+	.text {
+		font-variant: small-caps;
+		font-size: 16rpx;
+		font-family: PingFangSC-Regular, PingFang SC;
+		font-weight: 400;
+		color: #999999;
+		line-height: 22px;
+		letter-spacing: 10rpx;
+	}
+}
+.title_2 {
 	font-weight: 600;
 	font-family: PingFangSC-Regular, PingFang SC;
 	color: #000;
 	font-size: 24rpx;
 	font-weight: 500;
-	color: #0E0E0E;
+	color: #0e0e0e;
 }
-.desc_2{
+.desc_2 {
 	color: #5a5a5a;
 	font-size: 24rpx;
 	font-family: PingFangSC-Regular, PingFang SC;
 	font-weight: 400;
-	color: #A7A7A7;
+	color: #a7a7a7;
 }
-.borradu_20{
+.borradu_20 {
 	border-radius: 20rpx;
 }
-.mt_20{
+.mt_20 {
 	margin-top: 20rpx;
 }
 
-.price{
-					display: flex;
-					align-items: flex-end;
-					color: #000;
-					font-size: 40rpx;
-					font-family: Helvetica;
-					color: #0E0E0E;
-					.rmb{
-						padding-bottom: 10rpx;
-						font-size: 18rpx;
-						font-family: Helvetica;
-						color: #0E0E0E;
-					}
-					.dw{
-						padding-bottom: 10rpx;
-						font-size: 18rpx;
-						font-weight: 500;
-						color: #A7A7A7;
-					}
-				}
+.price {
+	display: flex;
+	align-items: flex-end;
+	color: #000;
+	font-size: 40rpx;
+	font-family: Helvetica;
+	color: #0e0e0e;
+	.rmb {
+		padding-bottom: 10rpx;
+		font-size: 18rpx;
+		font-family: Helvetica;
+		color: #0e0e0e;
+	}
+	.dw {
+		padding-bottom: 10rpx;
+		font-size: 18rpx;
+		font-weight: 500;
+		color: #a7a7a7;
+	}
+}

src/pages/index/selectedCases .vue

@@ -0,0 +1,186 @@
+<template>
+	<view>
+		<view id="tabs-ewr">
+			<scroll-view class="main-left tabs" style="white-space: nowrap;" scroll-with-animation scroll-x :scroll-left="scrollLeft">
+				<block v-for="(item, index) in ['热门风格', '精选户型']" :key="index">
+					<view :class="{ item: true, active: activeIndex === index }" :id="'tab_' + index" @click="tabClick(index)">{{ item }}</view>
+				</block>
+				<view class="underline" :style="[tabBarStyle]"></view>
+			</scroll-view>
+		</view>
+		<!-- <app-scroll-list :background="'#fff'"></app-scroll-list> -->
+	</view>
+</template>
+
+<script>
+import appScrollList from './components/scroll-list.vue';
+export default {
+	components: {
+		appScrollList
+	},
+	data() {
+		return {
+			list: ['热门风格', '精选户型'],
+			activeIndex: 0,
+			scrollLeft: 0, // 滚动scroll-view的左边滚动距离
+			scrollBarLeft: 0, // 移动bar需要通过translateX()移动的距离
+			barFirstTimeMove: true, // 滑块第一次移动时(页面刚生成时)，无需动画，否则给人怪异的感觉
+			barStyle: {}, //// 底部滑块的自定义样式
+			parentLeft: 0, // 父元素(tabs组件)到屏幕左边的距离
+			componentWidth: 0, // 屏幕宽度，单位为px
+			tabQueryInfo: [] // 存放对tab菜单查询后的节点信息
+		};
+	},
+	watch: {
+		activeIndex(nVal, oVal) {
+			// 视图更新后再执行移动操作
+			this.$nextTick(() => {
+				this.scrollByIndex();
+			});
+		}
+	},
+	computed: {
+		// 移动bar的样式
+		tabBarStyle() {
+			let style = {
+				width: 80 + 'rpx',
+				transform: `translate(${this.scrollBarLeft}px, -100%)`,
+				// 滑块在页面渲染后第一次滑动时，无需动画效果
+				'transition-duration': `${this.barFirstTimeMove ? 0 : 0.5}s`,
+				'background-color': '#303133',
+				height: 6 + 'rpx',
+				opacity: this.barFirstTimeMove ? 0 : 1,
+				// 设置一个很大的值，它会自动取能用的最大值，不用高度的一半，是因为高度可能是单数，会有小数出现
+				'border-radius': `${6 / 2}px`
+			};
+			Object.assign(style, this.barStyle);
+			return style;
+		},
+		// tab的样式
+		tabItemStyle() {
+			return index => {
+				let style = {
+					height: 6 + 'rpx',
+					'line-height': 6 + 'rpx',
+					'font-size': 30 + 'rpx',
+					'transition-duration': `${0.5}s`,
+					padding: this.isScroll ? `0 ${this.gutter}rpx` : '',
+					flex: true ? 'auto' : '1',
+					width: '63rpx'
+				};
+				// 字体加粗
+				style.fontWeight = 'bold';
+				return style;
+			};
+		}
+	},
+	methods: {
+		// 设置一个init方法，方便多处调用
+		async init() {
+			// 获取tabs组件的尺寸信息
+			let tabRect = await this.uGetRect('#tabs-ewr');
+			// tabs组件距离屏幕左边的宽度
+			this.parentLeft = tabRect.left;
+			// tabs组件的宽度
+			this.componentWidth = tabRect.width;
+			this.getTabRect();
+		},
+		uGetRect(selector, all) {
+			return new Promise(resolve => {
+				uni.createSelectorQuery()
+					.in(this)
+					[all ? 'selectAll' : 'select'](selector)
+					.boundingClientRect(rect => {
+						if (all && Array.isArray(rect) && rect.length) {
+							resolve(rect);
+						}
+						if (!all && rect) {
+							resolve(rect);
+						}
+					})
+					.exec();
+			});
+		},
+		tabClick(index) {
+			this.activeIndex = index;
+		},
+		// 查询tab的布局信息
+		getTabRect() {
+			// 创建节点查询
+			let query = uni.createSelectorQuery().in(this);
+			// 历遍所有tab，这里是执行了查询，最终使用exec()会一次性返回查询的数组结果
+			for (let i = 0; i < this.list.length; i++) {
+				// 只要size和rect两个参数
+				query.select(`#tab_${i}`).fields({
+					size: true,
+					rect: true
+				});
+			}
+			// 执行查询，一次性获取多个结果
+			query.exec(
+				function(res) {
+					this.tabQueryInfo = res;
+					console.log('节点信息', res);
+					// 初始化滚动条和移动bar的位置
+					this.scrollByIndex();
+				}.bind(this)
+			);
+		},
+		// 滚动scroll-view，让活动的tab处于屏幕的中间位置
+		scrollByIndex() {
+			// 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
+			let tabInfo = this.tabQueryInfo[this.activeIndex];
+			if (!tabInfo) return;
+			// 活动tab的宽度
+			let tabWidth = tabInfo.width;
+			// 活动item的左边到tabs组件左边的距离，用item的left减去tabs的left
+			let offsetLeft = tabInfo.left - this.parentLeft;
+			// 将活动的tabs-item移动到屏幕正中间，实际上是对scroll-view的移动
+			let scrollLeft = offsetLeft - (this.componentWidth - tabWidth) / 2;
+			this.scrollLeft = scrollLeft < 0 ? 0 : scrollLeft;
+			// 当前活动item的中点点到左边的距离减去滑块宽度的一半，即可得到滑块所需的移动距离
+			let left = tabInfo.left + tabInfo.width / 2 - this.parentLeft;
+			// 计算当前活跃item到组件左边的距离
+			console.log('left', left);
+			this.scrollBarLeft = left - uni.upx2px(80) / 2;
+			// 第一次移动滑块的时候，barFirstTimeMove为true，放到延时中将其设置false
+			// 延时是因为scrollBarLeft作用于computed计算时，需要一个过程需，否则导致出错
+			if (this.barFirstTimeMove == true) {
+				setTimeout(() => {
+					this.barFirstTimeMove = false;
+				}, 100);
+			}
+		}
+	},
+	onLoad() {
+		this.init();
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.tabs {
+	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
+	background-color: #fff;
+	padding: 30rpx 36rpx 20rpx;
+	position: relative;
+	z-index: 10;
+	.item {
+		display: inline-block;
+		text-align: center;
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #999999;
+		margin-right: 36rpx;
+	}
+	.active {
+		color: #222222;
+		position: relative;
+	}
+	.underline {
+		position: absolute;
+		bottom: 20rpx;
+		z-index: 100;
+	}
+}
+</style>