From 9bb7fa08ef3ebf1a6d4df82841630cf07dfd196a Mon Sep 17 00:00:00 2001
From: 1549469775 <1549469775@qq.com>
Date: Mon, 18 Jul 2022 17:32:15 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E4=BA=86=E4=BA=9B=E4=B8=9C=E8=A5=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                         | 11 ++++-
 pages/Sub/Tabs/Tabs.vue                            | 54 +++++++++++++++++-----
 pages/index/index.vue                              | 24 +++-------
 responsive/right-window.vue                        | 29 ++++++++++++
 .../niu-ui/components/niu-navbar/niu-navbar.vue    |  2 +-
 .../niu-ui/components/niu-tabs/niu-tabs.vue        | 34 +++++++++-----
 uni_modules/niu-ui/index.js                        |  9 ++--
 7 files changed, 113 insertions(+), 50 deletions(-)
 create mode 100644 responsive/right-window.vue

diff --git a/pages.json b/pages.json
index 18c2f3e..4bf5776 100644
--- a/pages.json
+++ b/pages.json
@@ -43,5 +43,14 @@
 		"navigationBarTitleText": "uni-app",
 		"navigationBarBackgroundColor": "#F8F8F8",
 		"backgroundColor": "#F8F8F8"
-	}
+	},
+	"rightWindow": {
+	    "path": "responsive/right-window.vue",
+	    "style": {
+	      "width": "calc(100vw - 450px)"
+	    },
+	    "matchMedia": {
+	      "minWidth": 768
+	    }
+	  }
 }
diff --git a/pages/Sub/Tabs/Tabs.vue b/pages/Sub/Tabs/Tabs.vue
index 8254285..198175a 100644
--- a/pages/Sub/Tabs/Tabs.vue
+++ b/pages/Sub/Tabs/Tabs.vue
@@ -4,31 +4,47 @@
 			Tabs
 		</niu-navbar>
 		<niu-tabs :list="colorList" @change="change" v-model="active"></niu-tabs>
-		<niu-tabs :list="colorList"  @change="change" capsule v-model="active"></niu-tabs>
-		<niu-tabs :list="fiveList" full @change="change" v-model="active"></niu-tabs>
-		<niu-tabs :list="fiveList" :bar="false" full @change="change" v-model="active">
-			<template #default="{data, pData, index}">
-				2{{data.text}}
+		<niu-tabs :list="colorList" @change="change" capsule v-model="active"></niu-tabs>
+		<niu-tabs :list="colorList" :bar="false" @change="change" v-model="active">
+			<template #bar="{show, barLeft, barWidth, anim, props}">
+				<view v-if="show" :style="[
+					{
+						transition: anim?'left .3s ease':'',
+						position: 'absolute',
+						top: '50%',
+						transform: 'translateY(-50%)',
+						left: (barLeft+barWidth/4-9) + 'px',
+						height: '55%',
+						border: `1px solid ${props.activeColor}`,
+						borderRadius: '100rpx',
+						bottom: 0,
+						width: (barWidth/2 + 18) + 'px',
+					}
+				]"></view>
 			</template>
-			<template #bar="{show, barLeft, barWidth}">
+		</niu-tabs>
+		<niu-tabs :list="fiveList" full @change="change" v-model="active"></niu-tabs>
+		<niu-tabs :list="colorList" :bar="false" @change="change" v-model="active">
+			<template #bar="{show, barLeft, barWidth, anim, props, item}">
 				<view v-if="show" :style="[
 					{
-						transition: 'left .3s ease',
+						transition: anim?'left .3s ease':'',
 						position: 'absolute',
 						top: '50%',
 						transform: 'translateY(-50%)',
-						left: barLeft+barWidth/4 + 'px',
+						left: (barLeft+barWidth/4-9) + 'px',
 						height: '55%',
-						border: '1px solid red',
+						border: `1px solid ${item.color || props.activeColor}`,
 						borderRadius: '100rpx',
 						bottom: 0,
-						width: barWidth/2 + 'px',
+						width: (barWidth/2 + 18) + 'px',
 					}
 				]"></view>
 			</template>
 		</niu-tabs>
 		<niu-tabs :list="fiveList" @change="change" v-model="active"></niu-tabs>
-		<cell title="建筑面积(m²)" inputType="digit" oneline v-model="formData.buildingArea" placeholder="请输入"></cell>
+		<button type="default" @click="cilck">点击</button>
+		<!-- <cell title="建筑面积(m²)" inputType="digit" oneline v-model="formData.buildingArea" placeholder="请输入"></cell> -->
 	</niu-page>
 </template>
 
@@ -43,7 +59,7 @@
 				formData:{
 					buildingArea: ''
 				},
-				active: 0,
+				active: 2,
 				fiveList: [
 					{ text: "金吒" },
 					{ text: "木吒" },
@@ -70,7 +86,21 @@
 				]
 			};
 		},methods: {
+			cilck(){
+				this.fiveList = [
+					{ text: "金吒" },
+					{ text: "木吒" },
+					{ text: "土吒" },
+					{ text: "土吒" },
+					{ text: "土吒" },
+					{ text: "土吒22222" },
+					{ text: "土吒" },
+					{ text: "土吒" },
+					{ text: "土吒" },
+				]
+			},
 			change(index) {
+				console.log(index);
 			}
 		},
 	}
diff --git a/pages/index/index.vue b/pages/index/index.vue
index b74c884..b3bf1b9 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,5 +1,5 @@
 <template>
-	<niu-page>
+	<niu-page Tab className="wqeqw">
 		<niu-navbar fixed :back="false" color="white" bg="#39b54a">
 			爱能森组件库
 		</niu-navbar>
@@ -25,21 +25,18 @@
 		</view>
 		<view class="">
 			<text style="font-size:12rpx;">sadsa</text>
-			<niu-image circle border="2px solid red" mode="aspectFill" inline rect="100rpx" preview src="https://i.loli.net/2021/08/02/PEKnxSkbAHdtFfi.png"></niu-image>
+			<niu-image circle border="1px solid red" mode="aspectFill" inline rect="100rpx" preview src="https://i.loli.net/2021/08/02/PEKnxSkbAHdtFfi.png"></niu-image>
 		</view>
-		<textarea style="width: 100%;" @blur="adjust" :maxlength="maxlength" placeholder="请输入" v-model="text"></textarea>
-		<div style="text-align: right;">{{text.length}}/{{maxlength}}</div>
-		{{text}}
-		<niu-grid :num="4">
+		<!-- <niu-grid :num="4">
 			<niu-grid-item rect="100px" icon="https://i.loli.net/2021/08/02/PEKnxSkbAHdtFfi.png" text="1231"></niu-grid-item>
 			<niu-grid-item>11</niu-grid-item>
 			<niu-grid-item>11</niu-grid-item>
 			<niu-grid-item>11</niu-grid-item>
 			<niu-grid-item>11</niu-grid-item>
 			<niu-grid-item>11</niu-grid-item>
-		</niu-grid>
+		</niu-grid> -->
+		{{$n}}
 		<niu-tabbar></niu-tabbar>
-		<view class="mask" style="position: fixed;left: 0;right: 0;top: 0;bottom: 0;background-color: rgba(#949494, 180);z-index: 1;"></view>
 	</niu-page>
 </template>
 
@@ -48,22 +45,13 @@
 	export default {
 		data() {
 			return {
-				text: '',
-				maxlength: 200
+				text: ''
 			}
 		},
 		onReady() {
 			
 		},
 		methods: {
-			adjust(){
-				// let value = this.text
-				// value = value.replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g, "");
-				// if(value.length>this.maxlength) {
-				// 	value = value.slice(0, this.maxlength);
-				// }
-				// this.text = value
-			},
 			go(path) {
 				uni.navigateTo({
 					url: path
diff --git a/responsive/right-window.vue b/responsive/right-window.vue
new file mode 100644
index 0000000..5de56f2
--- /dev/null
+++ b/responsive/right-window.vue
@@ -0,0 +1,29 @@
+<template>
+	<view>
+		<newDetail ref="detailPage"></newDetail>
+	</view>
+</template>
+
+<script>
+	import newDetail from '@/pages/Sub/Tabs/cell.vue'
+	export default {
+		components:{
+			newDetail
+		},
+		data() {
+			return {
+				title: 'Hello'
+			}
+		},
+		created(e) {
+			//监听自定义事件，该事件由详情页列表的点击触发
+			// uni.$on('updateDetail', (e) => {
+			// 	// 执行 /pages/news/detail.nvue页面的load方法
+			// 	this.$refs.detailPage.load(e.detail);
+			// })
+		}
+	}
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/uni_modules/niu-ui/components/niu-navbar/niu-navbar.vue b/uni_modules/niu-ui/components/niu-navbar/niu-navbar.vue
index 02b755b..1acff29 100644
--- a/uni_modules/niu-ui/components/niu-navbar/niu-navbar.vue
+++ b/uni_modules/niu-ui/components/niu-navbar/niu-navbar.vue
@@ -175,7 +175,6 @@
 			// #endif
 		},
 		created() {
-			this.$n.navbar.top = this.getNavbarHeight()
 			// #ifdef MP
 			let statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
 			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
@@ -189,6 +188,7 @@
 			// #endif
 		},
 		mounted() {
+			this.$set(this.$n.data, "navbarTop", this.getNavbarHeight())
 			let pages = getCurrentPages();
 			if (pages.length == 1 && mainPagePath.includes(pages[0].route)) {
 				this.firstPage = true;
diff --git a/uni_modules/niu-ui/components/niu-tabs/niu-tabs.vue b/uni_modules/niu-ui/components/niu-tabs/niu-tabs.vue
index 8705a6b..17979b5 100644
--- a/uni_modules/niu-ui/components/niu-tabs/niu-tabs.vue
+++ b/uni_modules/niu-ui/components/niu-tabs/niu-tabs.vue
@@ -1,26 +1,30 @@
 <template>
-	<view class="niu-x-tabs component">
+	<view class="niu-x-tabs component" :style="{opacity: isShow?1:0}" multiSlots>
 		<!-- <view class="scroll-view"> -->
-			<scroll-view :show-scrollbar="false" class="scroll-view" :scroll-x='!full' :scroll-with-animation='true' :scroll-left="left">
+			<scroll-view :show-scrollbar="false" class="scroll-view" :scroll-x='!full' :scroll-with-animation='anim' :scroll-left="left">
 			<view class="niu-x-tabs__wrapper">
 				<view class="niu-x-tabs__inner" :class="{full,capsule}" :style="{backgroundColor: bg, height: height}">
 					<view class="niu-x-tabs__item" :class="[
 							value==index?'niu-x-tabs__active':'',capsule?'capsule':'',
 							value==index?activeClass:normalClass
-							]"
+							]" 
 					 :style="[value==index?activeCustomStyle:normalCustomStyle, anim?{transition: '.3s linear'}:{}]" :key="index" v-for="(item,index) in list" @click="click(index,true)">
-						<slot :data="item" :pData="pData" :index="index">
+						<!-- 循环中使用slot会报警告，暂时去除，未找到处理办法 -->
+						<!-- <slot :data="item" :pData="pData" :index="index"> -->
 							<text>{{item[akey]}}</text>
 							<view v-if="value==index && activeImage" class="niu-x-tabs__bg">
 								<image class="image" :src="activeImage" mode="widthFix"></image>
 							</view>
-						</slot>
+						<!-- </slot> -->
 					</view>
 					<!-- {{ !!(value<list.length) }} -->
 					<slot name="bar" 
 						:show="barIsShow"
+						:anim="anim"
 						:barLeft="barLeft"
 						:barWidth="barWidth"
+						:item="list[value]"
+						:props="{normalColor, activeColor}"
 					>
 						<view v-if="bar&&value<list.length" class="niu-x-tabs__bar" :class="{capsule}" :style="[{left:barLeft + 'px',width:barWidth + 'px',backgroundColor: barColor},, anim?{transition: 'left .3s ease, width .3s ease'}:{}]"></view>
 					</slot>
@@ -48,7 +52,7 @@
 			},
 			width: {
 				type: String,
-				default: 'auto'
+				default: ''
 			},
 			height: {
 				type: String,
@@ -116,9 +120,10 @@
 				anim: false,
 				left: 0,
 				isRender: false,
+				isShow: false,
 				allLeft: [],
 				barLeft: 0,
-				barWidth: 200,
+				barWidth: 0,
 				x_ml: 0 // 容器距离左侧屏幕的距离
 			};
 		},
@@ -144,11 +149,12 @@
 			}
 		},
 		mounted() {
-			this.init()
+			this.init(this.value)
 		},
 		watch: {
 			list(newValue, oldValue) {
-				this.init()
+				this.anim = false
+				this.init(this.value)
 			},
 			value(newValue, oldValue) {
 				if (this.isRender) return
@@ -169,8 +175,11 @@
 						return [v.left - this.x_ml, v.width]
 					})
 					this.isRender = false
-					this.clickHere(index)
-					this.left = index != 0 ? (this.allLeft[index][0]) : 0;
+					if(index < this.list.length){
+						this.clickHere(index)
+						this.left = index != 0 ? (this.allLeft[index][0] - this.allLeft[index][1] * 2) : 0;
+					}
+					this.isShow = true
 					setTimeout(()=>{
 						this.anim = true
 					},300)
@@ -254,6 +263,7 @@
 
 				.niu-x-tabs__item {
 					flex: 1;
+					width: 0;
 					text-align: center;
 				}
 			}
@@ -297,7 +307,7 @@
 				position: absolute;
 				bottom: 0;
 				left: 0;
-				width: 50rpx;
+				width: 0;
 				height: 2px;
 				background-color: $themeColor;
 
diff --git a/uni_modules/niu-ui/index.js b/uni_modules/niu-ui/index.js
index b87bbe4..e7b19ff 100644
--- a/uni_modules/niu-ui/index.js
+++ b/uni_modules/niu-ui/index.js
@@ -3,13 +3,10 @@ import toast from "./extensions/toast"
 
 export default {
 	install(Vue) {
-		const navbarData = Vue.observable({
-			top: 0
-		})
-		Vue.prototype.$n = {
-			navbar: navbarData,
+		Vue.prototype.$n = Vue.observable({
+			data: {}, 
 			util: util,
 			toast: toast
-		}
+		})
 	}
 }