feat(z-tabs): 支持鸿蒙 Next

- 新增鸿蒙 Next 系统支持
-适配鸿蒙系统屏幕宽度计算
- 更新版本号至 0.3.0

pages/shoppingTrolley/shoppingTrolley.vue

@@ -10,7 +10,7 @@
 					<button @click="ticketType = 1">景区门票</button>
 					<button @click="ticketType = 3">游玩套票</button>
 				</view>
-				<z-tabs ref="zTab" :activeStyle="activeStyle" :list="tabList" @change="tabChange" valueKey="id"
+				<z-tabs :current='current' ref="zTab" :activeStyle="activeStyle" :list="tabList" @change="tabChange" valueKey="id"
 					:inactive-color="'rgba(27, 27, 27, 1)'" :bgColor="'transparent'" />
 			</template>
 
@@ -123,6 +123,7 @@
 			return {
 				//v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
 				dataList: [],
+				current:0,
 				ticketType:1,
 				tabList: [],
 				car: [],
@@ -199,7 +200,8 @@
 				handler(oval,nval){
 					if(oval!=nval){
 						this.getTicketSortList()
-						this.$refs.paging.reload(true);
+						this.$refs.paging.reload(true)
+						this.current = 0
 						this.$refs.zTab.updateSubviewLayout()
 					}
 				}

uni_modules/z-tabs/changelog.md

@@ -1,3 +1,5 @@
+## 0.3.0（2024-10-21）
+支持鸿蒙Next
 ## 0.2.7（2024-07-18）
 1.`新增` 支持切换rpx&px  
 2.`修复` 宽度小于屏幕时底部tabs位置不正确的问题  

uni_modules/z-tabs/components/z-tabs/z-tabs.vue

@@ -1,4 +1,4 @@
-<!-- z-tabs v0.2.7 by-ZXLee -->
+<!-- z-tabs v0.3.0 by-ZXLee -->
 <!-- github地址:https://github.com/SmileZXLee/uni-z-tabs -->
 <!-- dcloud地址:https://ext.dcloud.net.cn/plugin?name=z-tabs -->
 <!-- 反馈QQ群：371624008 -->
@@ -49,7 +49,10 @@
 	// #endif
 	import zTabsConfig from './config/index'
 	
-	//获取默认配置信息
+	// #ifdef APP-HARMONY
+	let screenWidth = 0;
+	// #endif
+	// 获取默认配置信息
 	function _gc(key, defaultValue) {
 		let config = null;
 		if (zTabsConfig && Object.keys(zTabsConfig).length) {
@@ -60,10 +63,22 @@
 		const value = config[_toKebab(key)];
 		return value === undefined ? defaultValue : value;
 	}
-	//驼峰转短横线
+	// 驼峰转短横线
 	function _toKebab(value) {
 		return value.replace(/([A-Z])/g, "-$1").toLowerCase();
 	}
+	// rpx => px，兼容鸿蒙
+	function rpx2px(rpx) {
+		// #ifdef APP-HARMONY
+		if (!screenWidth) {
+			screenWidth = uni.getSystemInfoSync().screenWidth;
+		}
+		return (screenWidth * Number.parseFloat(rpx)) / 750;
+		// #endif
+		// #ifndef APP-HARMONY
+		return uni.upx2px(rpx);
+		// #endif
+	}
 	
 	/**
 	 * z-tabs 标签
@@ -109,9 +124,9 @@
 				barCalcedWidth: 0,
 				pxBarWidth: 0,
 				scrollLeft: 0,
-				tabsSuperWidth: uni.upx2px(750),
-				tabsWidth: uni.upx2px(750),
-				tabsHeight: uni.upx2px(80),
+				tabsSuperWidth: rpx2px(750),
+				tabsWidth: rpx2px(750),
+				tabsHeight: rpx2px(80),
 				tabsLeft: 0,
 				tabsContainerWidth: 0,
 				itemNodeInfos: [],
@@ -281,8 +296,7 @@
 				handler(newVal) {
 					this._handleListChange(newVal);
 				},
-				immediate: false,
-				deep: true
+				immediate: false
 			},
 			bottomDotX(newVal) {
 				if(newVal >= 0){
@@ -420,7 +434,6 @@
 			},
 			//更新z-tabs内部布局
 			updateSubviewLayout(tryCount = 0) {
-				
 				this.$nextTick(() => {
 					let delayTime = 10;
 					// #ifdef APP-NVUE || MP-BAIDU
@@ -429,7 +442,6 @@
 					setTimeout(() => {
 						this._getNodeClientRect('.z-tabs-scroll-view-conatiner').then(res=>{
 							if (res){ 
-								
 								if (!res[0].width && tryCount < 10) {
 									setTimeout(() => {
 										tryCount ++;
@@ -504,7 +516,7 @@
 						if (nodeRes) {
 							node = nodeRes[0];
 							offset = this.currentScrollLeft;
-							this.tabsHeight = Math.max(node.height + uni.upx2px(28), this.tabsHeight);
+							this.tabsHeight = Math.max(node.height + rpx2px(28), this.tabsHeight);
 							tabsContainerWidth = 0;
 							for(let i = 0;i < this.itemNodeInfos.length;i++){
 								let oldNode = this.itemNodeInfos[i];
@@ -611,7 +623,7 @@
 			_convertTextToPx(text) {
 				const dataType = Object.prototype.toString.call(text);
 				if (dataType === '[object Number]') {
-					return uni.upx2px(text);
+					return rpx2px(text);
 				}
 				let isRpx = false;
 				if (text.indexOf('rpx') !== -1 || text.indexOf('upx') !== -1) {
@@ -620,10 +632,10 @@
 				} else if (text.indexOf('px') !== -1) {
 					text = text.replace('px', '');
 				} else {
-					text = uni.upx2px(text);
+					text = rpx2px(text);
 				}
 				if (!isNaN(text)) {
-					if (isRpx) return Number(uni.upx2px(text));
+					if (isRpx) return Number(rpx2px(text));
 					return Number(text);
 				}
 				return 0;

uni_modules/z-tabs/package.json

@@ -2,7 +2,7 @@
   "id": "z-tabs",
   "name": "z-tabs",
   "displayName": "【z-tabs】一个简单轻量的tabs组件",
-  "version": "0.2.7",
+  "version": "0.3.0",
   "description": "全平台兼容，支持nvue、vue3",
   "keywords": [
     "tabs"

uni_modules/z-tabs/readme.md

@@ -1,6 +1,6 @@
 # z-tabs
 
-[![version](https://img.shields.io/badge/version-0.2.6-blue)](https://github.com/SmileZXLee/uni-z-tabs)
+[![version](https://img.shields.io/badge/version-0.3.0-blue)](https://github.com/SmileZXLee/uni-z-tabs)
 [![license](https://img.shields.io/github/license/SmileZXLee/uni-z-tabs)](https://en.wikipedia.org/wiki/MIT_License)
 
 ***