diff --git a/example/ReactNativeProject/package-lock.json b/example/ReactNativeProject/package-lock.json
index a018544..e8426f6 100644
--- a/example/ReactNativeProject/package-lock.json
+++ b/example/ReactNativeProject/package-lock.json
@@ -101,7 +101,6 @@
"resolved": "http://artifactory.intra.xiaojukeji.com/artifactory/api/npm/npm/@babel/core/-/core-7.28.4.tgz?dl=https%3A%2F%2Fregistry.npmmirror.com%2F%40babel%2Fcore%2F-%2Fcore-7.28.4.tgz",
"integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
"license": "MIT",
- "peer": true,
"dependencies": {
"@babel/code-frame": "^7.27.1",
"@babel/generator": "^7.28.3",
@@ -133,7 +132,6 @@
"integrity": "sha512-Aa+yDiH87980jR6zvRfFuCR1+dLb00vBydhTL+zI992Rz/wQhSvuxjmOOuJOgO3XmakO6RykRGD2S1mq1AtgHA==",
"dev": true,
"license": "MIT",
- "peer": true,
"dependencies": {
"@nicolo-ribaudo/eslint-scope-5-internals": "5.1.1-v1",
"eslint-visitor-keys": "^2.1.0",
@@ -1965,7 +1963,6 @@
"resolved": "http://artifactory.intra.xiaojukeji.com/artifactory/api/npm/npm/@babel/preset-env/-/preset-env-7.28.3.tgz?dl=https%3A%2F%2Fregistry.npmmirror.com%2F%40babel%2Fpreset-env%2F-%2Fpreset-env-7.28.3.tgz",
"integrity": "sha512-ROiDcM+GbYVPYBOeCR6uBXKkQpBExLl8k9HO1ygXEyds39j+vCCsjmj7S8GOniZQlEs81QlkdJZe76IpLSiqpg==",
"license": "MIT",
- "peer": true,
"dependencies": {
"@babel/compat-data": "^7.28.0",
"@babel/helper-compilation-targets": "^7.27.2",
@@ -4416,7 +4413,6 @@
"integrity": "sha512-xIGPytx2bj5HxFk0c7S25AVuJowHmEFg5LFC9XosKc0TSOjP1r6zGC6OqC/arQV/pNuqmZN2IFnpgJn0Bn+hhQ==",
"devOptional": true,
"license": "MIT",
- "peer": true,
"dependencies": {
"@react-native-community/cli-clean": "15.0.1",
"@react-native-community/cli-config": "15.0.1",
@@ -4658,7 +4654,6 @@
"resolved": "http://artifactory.intra.xiaojukeji.com/artifactory/api/npm/npm/@react-native-masked-view/masked-view/-/masked-view-0.3.2.tgz?dl=https%3A%2F%2Fregistry.npmmirror.com%2F%40react-native-masked-view%2Fmasked-view%2F-%2Fmasked-view-0.3.2.tgz",
"integrity": "sha512-XwuQoW7/GEgWRMovOQtX3A4PrXhyaZm0lVUiY8qJDvdngjLms9Cpdck6SmGAUNqQwcj2EadHC1HwL0bEyoa/SQ==",
"license": "MIT",
- "peer": true,
"peerDependencies": {
"react": ">=16",
"react-native": ">=0.57"
@@ -5105,7 +5100,6 @@
"resolved": "http://artifactory.intra.xiaojukeji.com/artifactory/api/npm/npm/@react-navigation/native/-/native-7.1.17.tgz?dl=https%3A%2F%2Fregistry.npmmirror.com%2F%40react-navigation%2Fnative%2F-%2Fnative-7.1.17.tgz",
"integrity": "sha512-uEcYWi1NV+2Qe1oELfp9b5hTYekqWATv2cuwcOAg5EvsIsUPtzFrKIasgUXLBRGb9P7yR5ifoJ+ug4u6jdqSTQ==",
"license": "MIT",
- "peer": true,
"dependencies": {
"@react-navigation/core": "^7.12.4",
"escape-string-regexp": "^4.0.0",
@@ -5365,7 +5359,6 @@
"integrity": "sha512-0dLEBsA1kI3OezMBF8nSsb7Nk19ZnsyE1LLhB8r27KbgU5H4pvuqZLdtE+aUkJVoXgTVuA+iLIwmZ0TuK4tx6A==",
"devOptional": true,
"license": "MIT",
- "peer": true,
"dependencies": {
"@types/prop-types": "*",
"csstype": "^3.0.2"
@@ -5415,7 +5408,6 @@
"integrity": "sha512-94EQTWZ40mzBc42ATNIBimBEDltSJ9RQHCC8vc/PDbxi4k8dVwUAv4o98dk50M1zB+JGFxp43FP7f8+FP8R6Sw==",
"dev": true,
"license": "MIT",
- "peer": true,
"dependencies": {
"@eslint-community/regexpp": "^4.10.0",
"@typescript-eslint/scope-manager": "7.18.0",
@@ -5450,7 +5442,6 @@
"integrity": "sha512-4Z+L8I2OqhZV8qA132M4wNL30ypZGYOQVBfMgxDH/K5UX0PNqTu1c6za9ST5r9+tavvHiTWmBnKzpCJ/GlVFtg==",
"dev": true,
"license": "BSD-2-Clause",
- "peer": true,
"dependencies": {
"@typescript-eslint/scope-manager": "7.18.0",
"@typescript-eslint/types": "7.18.0",
@@ -5709,7 +5700,6 @@
"resolved": "http://artifactory.intra.xiaojukeji.com/artifactory/api/npm/npm/acorn/-/acorn-8.15.0.tgz?dl=https%3A%2F%2Fregistry.npmmirror.com%2Facorn%2F-%2Facorn-8.15.0.tgz",
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
"license": "MIT",
- "peer": true,
"bin": {
"acorn": "bin/acorn"
},
@@ -6641,7 +6631,6 @@
}
],
"license": "MIT",
- "peer": true,
"dependencies": {
"baseline-browser-mapping": "^2.8.3",
"caniuse-lite": "^1.0.30001741",
@@ -8291,7 +8280,6 @@
"deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
"dev": true,
"license": "MIT",
- "peer": true,
"dependencies": {
"@eslint-community/eslint-utils": "^4.2.0",
"@eslint-community/regexpp": "^4.6.1",
@@ -8950,7 +8938,6 @@
"resolved": "http://artifactory.intra.xiaojukeji.com/artifactory/api/npm/npm/expo/-/expo-52.0.47.tgz?dl=https%3A%2F%2Fregistry.npmmirror.com%2Fexpo%2F-%2Fexpo-52.0.47.tgz",
"integrity": "sha512-Mkvl7Qi2k+V3FdNRUD+yDj8GqU4IiYulLfl36BmSZs8lh/kCYPhTiyBLiEGPfz7d25QKbPWG727ESozbkbvatw==",
"license": "MIT",
- "peer": true,
"dependencies": {
"@babel/runtime": "^7.20.0",
"@expo/cli": "0.22.26",
@@ -11208,7 +11195,6 @@
"integrity": "sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==",
"dev": true,
"license": "MIT",
- "peer": true,
"dependencies": {
"@jest/core": "^29.7.0",
"@jest/types": "^29.6.3",
@@ -14518,7 +14504,6 @@
"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
"dev": true,
"license": "MIT",
- "peer": true,
"bin": {
"prettier": "bin-prettier.js"
},
@@ -14777,7 +14762,6 @@
"resolved": "http://artifactory.intra.xiaojukeji.com/artifactory/api/npm/npm/react/-/react-18.3.1.tgz?dl=https%3A%2F%2Fregistry.npmmirror.com%2Freact%2F-%2Freact-18.3.1.tgz",
"integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
"license": "MIT",
- "peer": true,
"dependencies": {
"loose-envify": "^1.1.0"
},
@@ -14839,7 +14823,6 @@
"resolved": "http://artifactory.intra.xiaojukeji.com/artifactory/api/npm/npm/react-native/-/react-native-0.77.2.tgz?dl=https%3A%2F%2Fregistry.npmmirror.com%2Freact-native%2F-%2Freact-native-0.77.2.tgz",
"integrity": "sha512-TE9JXsuiuWL/dmYvSvlLJQFEzZowQPzcn/9vU7vhTTJzNLnUtA33aMNoSU14Y8XikUUwmjYahRe71zjFJp6Kmw==",
"license": "MIT",
- "peer": true,
"dependencies": {
"@jest/create-cache-key-function": "^29.6.3",
"@react-native/assets-registry": "0.77.2",
@@ -14989,7 +14972,6 @@
"resolved": "http://artifactory.intra.xiaojukeji.com/artifactory/api/npm/npm/react-native-safe-area-context/-/react-native-safe-area-context-4.14.1.tgz?dl=https%3A%2F%2Fregistry.npmmirror.com%2Freact-native-safe-area-context%2F-%2Freact-native-safe-area-context-4.14.1.tgz",
"integrity": "sha512-+tUhT5WBl8nh5+P+chYhAjR470iCByf9z5EYdCEbPaAK3Yfzw+o8VRPnUgmPAKlSccOgQBxx3NOl/Wzckn9ujg==",
"license": "MIT",
- "peer": true,
"peerDependencies": {
"react": "*",
"react-native": "*"
@@ -15000,7 +14982,6 @@
"resolved": "http://artifactory.intra.xiaojukeji.com/artifactory/api/npm/npm/react-native-screens/-/react-native-screens-4.16.0.tgz?dl=https%3A%2F%2Fregistry.npmmirror.com%2Freact-native-screens%2F-%2Freact-native-screens-4.16.0.tgz",
"integrity": "sha512-yIAyh7F/9uWkOzCi1/2FqvNvK6Wb9Y1+Kzn16SuGfN9YFJDTbwlzGRvePCNTOX0recpLQF3kc2FmvMUhyTCH1Q==",
"license": "MIT",
- "peer": true,
"dependencies": {
"react-freeze": "^1.0.0",
"react-native-is-edge-to-edge": "^1.2.1",
@@ -15031,7 +15012,6 @@
"resolved": "http://artifactory.intra.xiaojukeji.com/artifactory/api/npm/npm/react-native-webview/-/react-native-webview-13.16.0.tgz?dl=https%3A%2F%2Fregistry.npmmirror.com%2Freact-native-webview%2F-%2Freact-native-webview-13.16.0.tgz",
"integrity": "sha512-Nh13xKZWW35C0dbOskD7OX01nQQavOzHbCw9XoZmar4eXCo7AvrYJ0jlUfRVVIJzqINxHlpECYLdmAdFsl9xDA==",
"license": "MIT",
- "peer": true,
"dependencies": {
"escape-string-regexp": "^4.0.0",
"invariant": "2.2.4"
@@ -17114,7 +17094,6 @@
"integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==",
"dev": true,
"license": "Apache-2.0",
- "peer": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
diff --git a/example/app.mpx b/example/app.mpx
index a3fbbad..8d64c71 100644
--- a/example/app.mpx
+++ b/example/app.mpx
@@ -55,7 +55,8 @@
"./pages/action-sheet/index",
"./pages/tab-bar/index",
"./pages/slider/index",
- "./pages/swipe/index"
+ "./pages/swipe/index",
+ "/pages/scroll-nav-bar/index"
]
if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android') {
pages = [
diff --git a/example/static/wx/project.config.json b/example/static/wx/project.config.json
index 1db52b8..b557822 100644
--- a/example/static/wx/project.config.json
+++ b/example/static/wx/project.config.json
@@ -61,5 +61,6 @@
"include": []
},
"projectname": "wx",
- "appid": "wx3649147d1a8da494"
+ "appid": "wx05229ce33a9f9cad",
+ "simulatorPluginLibVersion": {}
}
\ No newline at end of file
diff --git a/package.json b/package.json
index d8b2f95..c4c6266 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,10 @@
"init:dev": "pnpm install --frozen-lockfile && cd example && npm ci --legacy-peer-deps && cd ReactNativeProject && npm ci --legacy-peer-deps && npx install-expo-modules"
},
"devDependencies": {
+ "react": "18.3.1",
+ "react-native-reanimated": "3.16.7",
+ "react-native": "0.77.2",
+ "@mpxjs/store": "2.10.2",
"react-native-gesture-handler": "^2.23.0",
"@babel/runtime-corejs3": "^7.10.4",
"@babel/core": "^7.10.4",
diff --git a/packages/mpx-cube-ui/__tests__/components/scroll-nav-bar/scroll-nav-bar.spec.js b/packages/mpx-cube-ui/__tests__/components/scroll-nav-bar/scroll-nav-bar.spec.js
index 64e9f7a..65f53ea 100644
--- a/packages/mpx-cube-ui/__tests__/components/scroll-nav-bar/scroll-nav-bar.spec.js
+++ b/packages/mpx-cube-ui/__tests__/components/scroll-nav-bar/scroll-nav-bar.spec.js
@@ -8,7 +8,7 @@ describe('component scroll-nav-bar unit test', function () {
simulate.load({
id: 'nav-item-content',
tagName: 'nav-item-content',
- template: '',
+ template: '',
properties: {
txt: {
type: String,
@@ -46,15 +46,15 @@ describe('component scroll-nav-bar unit test', function () {
expect(instance.currentValue).toBe('小巴')
expectCurrentViewId(instance.currentView, 1)
expect(instance.rootClass).toBe('cube-scroll-nav-bar')
- expect(instance.containerClass).toBe('scroll-container')
- expect(instance.contentClass).toBe('scroll-content')
+ expect(instance.containerClass).toBe('cube-scroll-container')
+ expect(instance.contentClass).toBe('cube-scroll-content')
expect(instance.scrollX).toBe(true)
expect(instance.scrollY).toBe(false)
expect(instance.enableFlex).toBe(true)
expect(instance.navItems.map(item => item.plainText)).toEqual(BASE_LABELS)
expect(instance.navItems[1].isActive).toBe(true)
- expect(instance.navItems[1].activeClass).toBe('active')
- expect(instance.navItems[1].className).toContain('active')
+ expect(instance.navItems[1].activeClass).toBe('cube-active')
+ expect(instance.navItems[1].className).toContain('cube-active')
})
it('should render vertical nav and resolve enhanced options', async () => {
@@ -71,15 +71,15 @@ describe('component scroll-nav-bar unit test', function () {
expect(component.dom.innerHTML).toMatchSnapshot()
expect(instance.resolvedDirection).toBe('vertical')
expect(instance.rootClass).toBe('cube-scroll-nav-bar cube-scroll-nav-bar_vertical')
- expect(instance.containerClass).toBe('scroll-container scroll-container_vertical')
- expect(instance.contentClass).toBe('scroll-content scroll-content_vertical')
+ expect(instance.containerClass).toBe('cube-scroll-container cube-scroll-container_vertical')
+ expect(instance.contentClass).toBe('cube-scroll-content cube-scroll-content_vertical')
expect(instance.scrollX).toBe(false)
expect(instance.scrollY).toBe(true)
expect(instance.enableFlex).toBe(false)
expect(instance.useEnhanced).toBe(true)
expect(instance.showScrollbar).toBe(true)
expect(instance.bounces).toBe(true)
- expect(instance.navItems[0].className).toContain('nav-item_vertical')
+ expect(instance.navItems[0].className).toContain('cube-nav-item_vertical')
})
it('should support legacy list api', async () => {
@@ -112,7 +112,7 @@ describe('component scroll-nav-bar unit test', function () {
const changeFn = jest.fn()
component.addEventListener('change', changeFn)
- const navItems = component.querySelectorAll('.nav-item')
+ const navItems = component.querySelectorAll('.cube-nav-item')
navItems[2].dispatchEvent('tap')
await simulate.sleep(10)
@@ -143,7 +143,7 @@ describe('component scroll-nav-bar unit test', function () {
const changeFn = jest.fn()
component.addEventListener('change', changeFn)
- const navItems = component.querySelectorAll('.nav-item')
+ const navItems = component.querySelectorAll('.cube-nav-item')
navItems[1].dispatchEvent('tap')
await simulate.sleep(10)
diff --git a/packages/mpx-cube-ui/src/components/scroll-nav-bar/index.mpx b/packages/mpx-cube-ui/src/components/scroll-nav-bar/index.mpx
index 5b30309..ac4b316 100644
--- a/packages/mpx-cube-ui/src/components/scroll-nav-bar/index.mpx
+++ b/packages/mpx-cube-ui/src/components/scroll-nav-bar/index.mpx
@@ -31,7 +31,7 @@
is-active="{{ item.isActive }}"
active-class="{{ item.activeClass }}"
>
-
+
-
+
@@ -65,7 +65,7 @@
&_vertical
height 100%
- .scroll-container
+ .cube-scroll-container
width 100%
height 90rpx
white-space nowrap
@@ -74,7 +74,7 @@
height 100%
white-space normal
- .scroll-content
+ .cube-scroll-content
display inline-flex
width max-content
align-items center
@@ -91,7 +91,7 @@
min-height 100%
padding 12rpx 0
- .nav-item
+ .cube-nav-item
position relative
display inline-flex
align-items center
@@ -106,10 +106,10 @@
transition color 0.2s
box-sizing border-box
- &.active
+ &.cube-active
color $color-primary
- &.disabled
+ &.cube-disabled
color #c8c9cc
&_vertical
@@ -118,12 +118,12 @@
padding 24rpx 28rpx
justify-content center
- .nav-item-inner
+ .cube-nav-item-inner
width 100%
justify-content center
text-align center
- .nav-item-inner
+ .cube-nav-item-inner
display flex
align-items center
justify-content center
diff --git a/packages/mpx-cube-ui/src/components/scroll-nav-bar/nav-item-content.mpx b/packages/mpx-cube-ui/src/components/scroll-nav-bar/nav-item-content.mpx
index f1f1a82..f915222 100644
--- a/packages/mpx-cube-ui/src/components/scroll-nav-bar/nav-item-content.mpx
+++ b/packages/mpx-cube-ui/src/components/scroll-nav-bar/nav-item-content.mpx
@@ -1,5 +1,5 @@
-
+