From 2ab7015aa67756d93aa7700e18cbfcd022f431d8 Mon Sep 17 00:00:00 2001
From: ZEJIA LIU <53506531+ZEJIA-LIU@users.noreply.github.com>
Date: Fri, 16 Aug 2024 14:00:10 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20swiper=20=E7=89=88=E6=9C=AC?=
 =?UTF-8?q?=E5=8D=87=E7=BA=A7=E5=88=B0=2011.1.0=20(#16323)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 完成stencil组件的swiper升级

* feat: 完成react组件库的swiper升级

* feat: 完善onChange和onAnimationFinish 的调用时机

* fix: lint

* feat: 补齐组件类型导出

* feat: 修改solid组件的导出

* feat: 加入动画参数

* chore(release): publish 4.0.5-alpha.0 --tag=alpha

* feat: 修复harmony-hybrid 的组件导出错误

* chore(release): publish 4.0.5-alpha.1 --tag=alpha

* feat: 删除tabbar从组件库暴露给用户

* fix: 修复swiper 事件回调触发类型

* chore(release): publish 4.0.5-alpha.2 --tag=alpha

* fix: 调整swiper-wrapper样式

* chore(release): publish 4.0.5-alpha.3 --tag=alpha

* fix: 修复swiper-wrapper 样式错误

* test: 修复测试用例

* fix: lint

* style: 调整 swiper-pagination 样式

* test: 修复 taro-h5 测试

* feat: 调整components 一些参数输出

* chore(release): publish 4.0.5-alpha.6 --tag=alpha

* chore: remove upload coverage reports to Codecov

* fix: 修复 由于 picomatch 引起的 prerender 的bug

* test: 更新webpack5-runner 的 snap

* ci: ci 恢复webpack5-runner的测试

* styles: 调整 Swiper 组件代码风格和添加注释

* chore(release): publish 4.0.5-alpha.7 --tag=alpha

* feat: 修改 swiper 的 onAnimationFinish调用时机
---
 .github/workflows/nodejs.yml                  |   5 -
 crates/native_binding/package.json            |   2 +-
 npm/darwin-arm64/package.json                 |   2 +-
 npm/darwin-x64/package.json                   |   2 +-
 npm/linux-x64-gnu/package.json                |   2 +-
 npm/linux-x64-musl/package.json               |   2 +-
 npm/win32-x64-msvc/package.json               |   2 +-
 package.json                                  |   4 +-
 .../package.json                              |   2 +-
 .../package.json                              |   2 +-
 .../package.json                              |   2 +-
 packages/babel-preset-taro/package.json       |   2 +-
 packages/create-app/package.json              |   2 +-
 packages/css-to-react-native/package.json     |   2 +-
 packages/eslint-config-taro/package.json      |   2 +-
 packages/jest-helper/package.json             |   2 +-
 packages/postcss-html-transform/package.json  |   2 +-
 .../postcss-plugin-constparse/package.json    |   2 +-
 packages/postcss-pxtransform/package.json     |   2 +-
 packages/postcss-unit-transform/package.json  |   2 +-
 packages/rollup-plugin-copy/package.json      |   2 +-
 packages/shared/package.json                  |   2 +-
 .../stylelint-config-taro-rn/package.json     |   2 +-
 packages/stylelint-taro-rn/package.json       |   2 +-
 packages/stylelint-taro/package.json          |   2 +-
 packages/taro-api/package.json                |   2 +-
 packages/taro-cli-convertor/package.json      |   2 +-
 packages/taro-cli/package.json                |   2 +-
 .../taro-components-advanced/package.json     |   2 +-
 .../package.json                              |   2 +-
 .../package.json                              |   2 +-
 .../taro-components-library-vue3/package.json |   2 +-
 packages/taro-components-react/package.json   |   4 +-
 .../taro-components-react/rollup.config.mjs   |   9 +-
 .../src/components/button/style/index.scss    |  18 +-
 .../src/components/image/style/index.css      |   1 -
 .../src/components/swiper/index.tsx           | 440 ++++++++++++------
 .../src/components/swiper/style/index.css     |  10 +-
 .../src/{index.ts => index.react.ts}          |   5 +-
 .../taro-components-react/src/index.solid.ts  |  67 +++
 .../taro-components-react/types/global.d.ts   |   8 +
 .../taro-components-react/types/index.d.ts    |   8 +-
 packages/taro-components-rn/package.json      |   2 +-
 .../{swiper-bundle.esm.js.ts => bundle.ts}    |  78 ++--
 .../__snapshots__/swiper.spec.tsx.snap        |  75 ++-
 packages/taro-components/package.json         |   4 +-
 .../src/components/map/readme.md              |  39 ++
 .../src/components/swiper/readme.md           |   7 +-
 .../src/components/swiper/style/index.scss    |  15 +-
 .../src/components/swiper/swiper-item.tsx     |  61 +--
 .../src/components/swiper/swiper.tsx          | 409 +++++++++-------
 packages/taro-components/types/Swiper.d.ts    |   4 +
 packages/taro-components/types/global.d.ts    |   4 +
 packages/taro-components/types/index.d.ts     |  20 +
 packages/taro-extend/package.json             |   2 +-
 packages/taro-framework-react/package.json    |   2 +-
 packages/taro-framework-solid/package.json    |   2 +-
 packages/taro-framework-vue3/package.json     |   2 +-
 packages/taro-h5/__mocks__/swiper/bundle.ts   | 181 +++++++
 packages/taro-h5/package.json                 |   3 +-
 packages/taro-helper/package.json             |   2 +-
 packages/taro-loader/package.json             |   2 +-
 packages/taro-platform-alipay/package.json    |   2 +-
 packages/taro-platform-h5/package.json        |   2 +-
 .../taro-platform-harmony-hybrid/package.json |   2 +-
 .../src/components/react/index.ts             |   5 +-
 .../src/components/vue3/index.ts              |   6 +-
 .../types/component.d.ts                      |   8 +
 packages/taro-platform-harmony/package.json   |   2 +-
 packages/taro-platform-jd/package.json        |   2 +-
 packages/taro-platform-qq/package.json        |   2 +-
 packages/taro-platform-swan/package.json      |   2 +-
 packages/taro-platform-tt/package.json        |   2 +-
 packages/taro-platform-weapp/package.json     |   2 +-
 packages/taro-plugin-html/package.json        |   2 +-
 packages/taro-plugin-http/package.json        |   2 +-
 packages/taro-plugin-inject/package.json      |   2 +-
 packages/taro-plugin-mini-ci/package.json     |   2 +-
 .../taro-plugin-react-devtools/package.json   |   2 +-
 .../taro-plugin-vue-devtools/package.json     |   2 +-
 packages/taro-react/package.json              |   2 +-
 packages/taro-rn-runner/package.json          |   2 +-
 .../taro-rn-style-transformer/package.json    |   2 +-
 packages/taro-rn-supporter/package.json       |   2 +-
 packages/taro-rn-transformer/package.json     |   2 +-
 packages/taro-rn/package.json                 |   2 +-
 packages/taro-router-rn/package.json          |   2 +-
 packages/taro-router/package.json             |   2 +-
 packages/taro-runner-utils/package.json       |   2 +-
 packages/taro-runtime-rn/package.json         |   2 +-
 packages/taro-runtime/package.json            |   2 +-
 packages/taro-service/package.json            |   2 +-
 packages/taro-transformer-wx/package.json     |   2 +-
 packages/taro-vite-runner/package.json        |   2 +-
 packages/taro-webpack5-prebundle/package.json |   2 +-
 packages/taro-webpack5-runner/package.json    |   2 +-
 .../src/prerender/prerender.ts                |   2 +-
 packages/taro-with-weapp/package.json         |   2 +-
 packages/taro/package.json                    |   2 +-
 packages/taroize/package.json                 |   2 +-
 pnpm-lock.yaml                                |  30 +-
 .../__snapshots__/prerender.spec.ts.snap      |  51 +-
 102 files changed, 1118 insertions(+), 605 deletions(-)
 rename packages/taro-components-react/src/{index.ts => index.react.ts} (94%)
 create mode 100644 packages/taro-components-react/src/index.solid.ts
 rename packages/taro-components/__mocks__/swiper/{swiper-bundle.esm.js.ts => bundle.ts} (63%)
 create mode 100644 packages/taro-components/types/global.d.ts
 create mode 100644 packages/taro-h5/__mocks__/swiper/bundle.ts

diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
index 6242e217a018..835dc0f4b0d0 100644
--- a/.github/workflows/nodejs.yml
+++ b/.github/workflows/nodejs.yml
@@ -113,11 +113,6 @@ jobs:
         run: pnpm test
         env:
           CI: true
-      - name: Upload coverage reports to Codecov
-        uses: codecov/codecov-action@v3
-        env:
-          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
-
       # 以下 coverage 流程通过 artifact 拆分文件作为单独 job 上传时间损耗过长，因此在在 node test 后直接继续执行
       - name: Upload [taro-cli] coverage to Codecov
         uses: codecov/codecov-action@v4
diff --git a/crates/native_binding/package.json b/crates/native_binding/package.json
index fbf098e7821f..3d7ee7f9269c 100644
--- a/crates/native_binding/package.json
+++ b/crates/native_binding/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/binding",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Node binding for taro",
   "main": "binding.js",
   "typings": "binding.d.ts",
diff --git a/npm/darwin-arm64/package.json b/npm/darwin-arm64/package.json
index e873267f6a0e..0a83860b3190 100644
--- a/npm/darwin-arm64/package.json
+++ b/npm/darwin-arm64/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@tarojs/binding-darwin-arm64",
   "description": "Native binding for taro",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "os": [
     "darwin"
   ],
diff --git a/npm/darwin-x64/package.json b/npm/darwin-x64/package.json
index b01032048c45..8a1445ac449c 100644
--- a/npm/darwin-x64/package.json
+++ b/npm/darwin-x64/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@tarojs/binding-darwin-x64",
   "description": "Native binding for taro",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "os": [
     "darwin"
   ],
diff --git a/npm/linux-x64-gnu/package.json b/npm/linux-x64-gnu/package.json
index 029597af9186..0c899c75671c 100644
--- a/npm/linux-x64-gnu/package.json
+++ b/npm/linux-x64-gnu/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@tarojs/binding-linux-x64-gnu",
   "description": "Native binding for taro",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "os": [
     "linux"
   ],
diff --git a/npm/linux-x64-musl/package.json b/npm/linux-x64-musl/package.json
index ccdbb8514c2f..8aeb53aa463f 100644
--- a/npm/linux-x64-musl/package.json
+++ b/npm/linux-x64-musl/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/binding-linux-x64-musl",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "os": [
     "linux"
   ],
diff --git a/npm/win32-x64-msvc/package.json b/npm/win32-x64-msvc/package.json
index 9e40748a144c..4eadd31e638c 100644
--- a/npm/win32-x64-msvc/package.json
+++ b/npm/win32-x64-msvc/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@tarojs/binding-win32-x64-msvc",
   "description": "Native binding for taro",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "os": [
     "win32"
   ],
diff --git a/package.json b/package.json
index c5ecc9c5b7cf..7027b9f11991 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "taro",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "开放式跨端跨框架开发解决方案",
   "homepage": "https://github.com/NervJS/taro#readme",
   "author": "O2Team",
@@ -29,7 +29,7 @@
     "lint:style": "stylelint ./packages/**/*.{css,scss}",
     "format": "prettier --write --cache .",
     "format:check": "prettier --check --cache .",
-    "test": "pnpm --if-present -r --aggregate-output --filter=./packages/* test:ci",
+    "test": "pnpm --if-present -r --aggregate-output --filter=./packages/* --filter=./tests test:ci",
     "test:binding": "pnpm --filter @tarojs/binding run test",
     "updateSnapshot": "pnpm --if-present -r --aggregate-output --filter=./tests --filter=./packages/* updateSnapshot",
     "version": "run-s version:*",
diff --git a/packages/babel-plugin-transform-react-jsx-to-rn-stylesheet/package.json b/packages/babel-plugin-transform-react-jsx-to-rn-stylesheet/package.json
index 3285f2f2ab10..15f682c67858 100644
--- a/packages/babel-plugin-transform-react-jsx-to-rn-stylesheet/package.json
+++ b/packages/babel-plugin-transform-react-jsx-to-rn-stylesheet/package.json
@@ -1,6 +1,6 @@
 {
   "name": "babel-plugin-transform-react-jsx-to-rn-stylesheet",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Transform stylesheet selector to style in JSX Elements.",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/babel-plugin-transform-solid-jsx/package.json b/packages/babel-plugin-transform-solid-jsx/package.json
index c812d706f3a9..ad878dacfafa 100644
--- a/packages/babel-plugin-transform-solid-jsx/package.json
+++ b/packages/babel-plugin-transform-solid-jsx/package.json
@@ -1,7 +1,7 @@
 {
   "name": "babel-plugin-transform-solid-jsx",
   "description": "A JSX to DOM plugin that wraps expressions for fine grained change detection",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "license": "MIT",
   "repository": {
     "type": "git",
diff --git a/packages/babel-plugin-transform-taroapi/package.json b/packages/babel-plugin-transform-taroapi/package.json
index 9a0b05c8989b..d345d97f9be3 100644
--- a/packages/babel-plugin-transform-taroapi/package.json
+++ b/packages/babel-plugin-transform-taroapi/package.json
@@ -1,6 +1,6 @@
 {
   "name": "babel-plugin-transform-taroapi",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "author": "O2Team",
   "license": "MIT",
   "main": "dist/index.js",
diff --git a/packages/babel-preset-taro/package.json b/packages/babel-preset-taro/package.json
index 8f5972dee07a..13656246e8fb 100644
--- a/packages/babel-preset-taro/package.json
+++ b/packages/babel-preset-taro/package.json
@@ -1,6 +1,6 @@
 {
   "name": "babel-preset-taro",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Taro babel preset",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/create-app/package.json b/packages/create-app/package.json
index 8919b7b31a80..900451d7ba7f 100644
--- a/packages/create-app/package.json
+++ b/packages/create-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/create-app",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "create taro app with one command",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/css-to-react-native/package.json b/packages/css-to-react-native/package.json
index 360035e1f558..54f328b9eced 100644
--- a/packages/css-to-react-native/package.json
+++ b/packages/css-to-react-native/package.json
@@ -1,7 +1,7 @@
 {
   "name": "taro-css-to-react-native",
   "description": "Convert CSS text to a React Native stylesheet object",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "author": "O2Team",
   "license": "MIT",
   "main": "dist/index.js",
diff --git a/packages/eslint-config-taro/package.json b/packages/eslint-config-taro/package.json
index cc2abd7de9f1..29708c816b16 100644
--- a/packages/eslint-config-taro/package.json
+++ b/packages/eslint-config-taro/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-taro",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Taro specific linting rules for ESLint",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/jest-helper/package.json b/packages/jest-helper/package.json
index c4e3e8257eb9..9734b69cf9b9 100644
--- a/packages/jest-helper/package.json
+++ b/packages/jest-helper/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jest-taro-helper",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "jest helper for taro",
   "private": true,
   "author": "O2Team",
diff --git a/packages/postcss-html-transform/package.json b/packages/postcss-html-transform/package.json
index 20b0e98f1a9f..0d67c11749e8 100644
--- a/packages/postcss-html-transform/package.json
+++ b/packages/postcss-html-transform/package.json
@@ -1,6 +1,6 @@
 {
   "name": "postcss-html-transform",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "transform html tag name selector",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/postcss-plugin-constparse/package.json b/packages/postcss-plugin-constparse/package.json
index 36c602aa1e57..0d03d0d35e34 100644
--- a/packages/postcss-plugin-constparse/package.json
+++ b/packages/postcss-plugin-constparse/package.json
@@ -1,6 +1,6 @@
 {
   "name": "postcss-plugin-constparse",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "parse constants defined in config",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/postcss-pxtransform/package.json b/packages/postcss-pxtransform/package.json
index d68f16ae992c..8e98e7a57f7a 100644
--- a/packages/postcss-pxtransform/package.json
+++ b/packages/postcss-pxtransform/package.json
@@ -1,6 +1,6 @@
 {
   "name": "postcss-pxtransform",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "PostCSS plugin px 转小程序 rpx及h5 rem 单位",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/postcss-unit-transform/package.json b/packages/postcss-unit-transform/package.json
index 07ab8bb12363..2effa4037d33 100644
--- a/packages/postcss-unit-transform/package.json
+++ b/packages/postcss-unit-transform/package.json
@@ -1,6 +1,6 @@
 {
   "name": "postcss-taro-unit-transform",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "小程序单位转换",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/rollup-plugin-copy/package.json b/packages/rollup-plugin-copy/package.json
index e6cd44cfdd94..8d5335a9926d 100644
--- a/packages/rollup-plugin-copy/package.json
+++ b/packages/rollup-plugin-copy/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rollup-plugin-copy",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "rollup-plugin-copy for taro",
   "private": true,
   "author": "O2Team",
diff --git a/packages/shared/package.json b/packages/shared/package.json
index bda29860dd88..39fe2f8565f5 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/shared",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Taro utils internal use.",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/stylelint-config-taro-rn/package.json b/packages/stylelint-config-taro-rn/package.json
index 663c6b8450a4..43e7b75fb04c 100644
--- a/packages/stylelint-config-taro-rn/package.json
+++ b/packages/stylelint-config-taro-rn/package.json
@@ -1,6 +1,6 @@
 {
   "name": "stylelint-config-taro-rn",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Shareable stylelint config for React Native CSS modules",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/stylelint-taro-rn/package.json b/packages/stylelint-taro-rn/package.json
index 7925942a9ba9..ed8a2c5a3e08 100644
--- a/packages/stylelint-taro-rn/package.json
+++ b/packages/stylelint-taro-rn/package.json
@@ -1,6 +1,6 @@
 {
   "name": "stylelint-taro-rn",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "A collection of React Native specific rules for stylelint",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/stylelint-taro/package.json b/packages/stylelint-taro/package.json
index f949644d1b5a..8b5995a56eab 100644
--- a/packages/stylelint-taro/package.json
+++ b/packages/stylelint-taro/package.json
@@ -1,6 +1,6 @@
 {
   "name": "stylelint-taro",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Taro stylelint 规则集合",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-api/package.json b/packages/taro-api/package.json
index aaf6ad225c56..f16363f35746 100644
--- a/packages/taro-api/package.json
+++ b/packages/taro-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/api",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Taro common API",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-cli-convertor/package.json b/packages/taro-cli-convertor/package.json
index b3c15b9b4461..48157ce647b0 100644
--- a/packages/taro-cli-convertor/package.json
+++ b/packages/taro-cli-convertor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/cli-convertor",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "cli tool for taro-convert",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-cli/package.json b/packages/taro-cli/package.json
index 3d40bdf6533a..bc30c339af0a 100644
--- a/packages/taro-cli/package.json
+++ b/packages/taro-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/cli",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "cli tool for taro",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-components-advanced/package.json b/packages/taro-components-advanced/package.json
index 0d2cc02f975a..a774dbb64a94 100644
--- a/packages/taro-components-advanced/package.json
+++ b/packages/taro-components-advanced/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/components-advanced",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-components-library-react/package.json b/packages/taro-components-library-react/package.json
index fdfea4b90d59..164879afe001 100644
--- a/packages/taro-components-library-react/package.json
+++ b/packages/taro-components-library-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/components-library-react",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Taro 组件库 React 版本库",
   "private": true,
   "author": "O2Team",
diff --git a/packages/taro-components-library-solid/package.json b/packages/taro-components-library-solid/package.json
index 5f60776872dc..88dee175b5ca 100644
--- a/packages/taro-components-library-solid/package.json
+++ b/packages/taro-components-library-solid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/components-library-solid",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Taro 组件库 Solid 版本库",
   "private": true,
   "main": "index.js",
diff --git a/packages/taro-components-library-vue3/package.json b/packages/taro-components-library-vue3/package.json
index 942fe565b1cd..1fc11236a204 100644
--- a/packages/taro-components-library-vue3/package.json
+++ b/packages/taro-components-library-vue3/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/components-library-vue3",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Taro 组件库 Vue3 版本库",
   "private": true,
   "author": "O2Team",
diff --git a/packages/taro-components-react/package.json b/packages/taro-components-react/package.json
index fe97fde2ca86..35dc1b881ac8 100644
--- a/packages/taro-components-react/package.json
+++ b/packages/taro-components-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/components-react",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "",
   "main:h5": "dist/index.js",
   "main": "dist/index.js",
@@ -37,7 +37,7 @@
     "@tarojs/components": "workspace:*",
     "@babel/runtime": "^7.24.4",
     "classnames": "^2.2.5",
-    "swiper": "6.8.0",
+    "swiper": "11.1.0",
     "tslib": "^2.6.2"
   },
   "devDependencies": {
diff --git a/packages/taro-components-react/rollup.config.mjs b/packages/taro-components-react/rollup.config.mjs
index e710e173f914..28f441c370d2 100644
--- a/packages/taro-components-react/rollup.config.mjs
+++ b/packages/taro-components-react/rollup.config.mjs
@@ -42,7 +42,6 @@ function getAliasPlugin (framework) {
 }
 
 const base = {
-  input: 'src/index.ts',
   treeshake: false,
   output: {
     chunkFileNames: '[name].js',
@@ -51,7 +50,7 @@ const base = {
     format: 'es',
     preserveModules: true,
     preserveModulesRoot: 'src',
-    sourcemap: true
+    sourcemap: true,
   }
 }
 
@@ -62,6 +61,9 @@ const babelConfig = {
 
 const react = () => {
   const config = recursiveMerge({}, base, {
+    input: {
+      index: 'src/index.react.ts'
+    },
     plugins: getPlugins(
       [
         getAliasPlugin('react'),
@@ -89,6 +91,9 @@ const react = () => {
 
 const solid = () => {
   const config = recursiveMerge({}, base, {
+    input: {
+      index: 'src/index.solid.ts'
+    },
     output: {
       dir: 'dist/solid',
     },
diff --git a/packages/taro-components-react/src/components/button/style/index.scss b/packages/taro-components-react/src/components/button/style/index.scss
index fdb07fc412e5..277c3b7fc476 100644
--- a/packages/taro-components-react/src/components/button/style/index.scss
+++ b/packages/taro-components-react/src/components/button/style/index.scss
@@ -119,9 +119,9 @@ $weuiBtnPlainWarnActiveBorderColor: rgba(230 67 64 / 60%);
     font-size: $weuiBtnMiniFontSize;
   }
 
-  &[plain],
-  &[plain][type="default"],
-  &[plain][type="primary"] {
+  &[plain="true"],
+  &[plain="true"][type="default"],
+  &[plain="true"][type="primary"] {
     border-width: 1px;
     background-color: transparent;
   }
@@ -162,7 +162,7 @@ $weuiBtnPlainWarnActiveBorderColor: rgba(230 67 64 / 60%);
     }
   }
 
-  &[plain][type="primary"] {
+  &[plain="true"][type="primary"] {
     border: 1px solid $weuiBtnPlainPrimaryBorderColor;
     color: $weuiBtnPlainPrimaryColor;
 
@@ -177,7 +177,7 @@ $weuiBtnPlainWarnActiveBorderColor: rgba(230 67 64 / 60%);
     }
   }
 
-  &[plain][type="warn"] {
+  &[plain="true"][type="warn"] {
     border: 1px solid $weuiBtnPlainWarnBorderColor;
     color: $weuiBtnPlainWarnColor;
 
@@ -192,8 +192,8 @@ $weuiBtnPlainWarnActiveBorderColor: rgba(230 67 64 / 60%);
     }
   }
 
-  &[plain],
-  &[plain][type="default"] {
+  &[plain="true"],
+  &[plain="true"][type="default"] {
     border: 1px solid $weuiBtnPlainDefaultBorderColor;
     color: $weuiBtnPlainDefaultColor;
 
@@ -236,13 +236,13 @@ $weuiBtnPlainWarnActiveBorderColor: rgba(230 67 64 / 60%);
     }
   }
 
-  &[plain][disabled] {
+  &[plain="true"][disabled] {
     border: 1px solid rgb(0 0 0 / 20%);
     background-color: #f7f7f7;
     color: rgb(0 0 0 / 30%);
   }
 
-  &[plain][disabled][type="primary"] {
+  &[plain="true"][disabled][type="primary"] {
     border: 1px solid rgb(0 0 0 / 20%);
     background-color: #f7f7f7;
     color: rgb(0 0 0 / 30%);
diff --git a/packages/taro-components-react/src/components/image/style/index.css b/packages/taro-components-react/src/components/image/style/index.css
index 71ead6395b11..e72ab99f0cbf 100644
--- a/packages/taro-components-react/src/components/image/style/index.css
+++ b/packages/taro-components-react/src/components/image/style/index.css
@@ -16,7 +16,6 @@ img[src=""] {
 }
 
 .taro-img__mode-scaletofill {
-  object-fit: contain;
   width: 100%;
   height: 100%;
 }
diff --git a/packages/taro-components-react/src/components/swiper/index.tsx b/packages/taro-components-react/src/components/swiper/index.tsx
index f0484f3f727d..48eed57f7b7c 100644
--- a/packages/taro-components-react/src/components/swiper/index.tsx
+++ b/packages/taro-components-react/src/components/swiper/index.tsx
@@ -1,15 +1,17 @@
-import 'swiper/swiper-bundle.min.css'
+import 'swiper/swiper-bundle.css'
 import './style/index.css'
 
 import classNames from 'classnames'
 import React from 'react'
-import Swipers from 'swiper/swiper-bundle.esm.js'
+import Swipers from 'swiper/bundle'
 
 import { createForwardRefComponent, debounce } from '../../utils'
 
 import type ISwiper from 'swiper'
 
 let INSTANCE_ID = 0
+const ONE_ADDITIONAL_SLIDES_THRESHOLD = 5
+const TWO_ADDITIONAL_SLIDES_THRESHOLD = 7
 
 interface SwiperItemProps extends React.HTMLAttributes<HTMLDivElement> {
   itemId: string
@@ -30,8 +32,11 @@ interface SwiperProps extends React.HTMLAttributes<HTMLDivElement> {
   indicatorColor?: string
   indicatorActiveColor?: string
   indicatorDots?: boolean
+  currentItemId?: string
   forwardedRef?: React.MutableRefObject<HTMLDivElement>
+  full?: boolean
   onAnimationFinish?: (e: TouchEvent) => void
+  effectsProps?: Record<string, any>
 }
 
 const createEvent = (type: string) => {
@@ -67,18 +72,77 @@ class SwiperItemInner extends React.Component<SwiperItemProps, Record<string, un
   }
 }
 
-class SwiperInner extends React.Component<SwiperProps, Record<string, unknown>> {
+interface SwiperState {
+  swiperWrapper: HTMLElement | null
+}
+
+class SwiperInner extends React.Component<SwiperProps, SwiperState> {
   _id = 1 + INSTANCE_ID++
-  _$current = 0
-  _$width = 0
-  _$height = 0
+  #source = 'autoplay'
+  #swiperResetting: boolean = false
+  #lastSwiperActiveIndex: number = 0
+  // dom 变化是否由外部引起，因为 swiper 的循环模式也会引起 dom 的变化。如果不是由外部引起的 dom 变化，就不需要重新初始化 swiper
+  #domChangeByOutSide: boolean = false
   $el: HTMLDivElement | null
-  mySwiper: ISwiper
+  swiper: ISwiper| null
   observer: MutationObserver
-  observerFirst: MutationObserver
-  observerLast: MutationObserver
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      swiperWrapper: null
+    }
+  }
 
   componentDidMount () {
+    this.handleInit()
+  }
+
+  hackSwiperWrapDomAction () {
+    if (!this.state.swiperWrapper || !this.swiper) return
+    const appendChild = this.state.swiperWrapper.appendChild.bind(this.state.swiperWrapper)
+    const removeChild = this.state.swiperWrapper.removeChild.bind(this.state.swiperWrapper)
+    const replaceChild = this.state.swiperWrapper.replaceChild.bind(this.state.swiperWrapper)
+    const insertBefore = this.state.swiperWrapper.insertBefore.bind(this.state.swiperWrapper)
+
+    const beforeAction = () => {
+      if (!this.state.swiperWrapper || !this.swiper) return
+      this.#swiperResetting = true
+      if (!this.#domChangeByOutSide && this.props.circular) {
+        // 如果是由于外部子节点的变化引起的 dom 变化，需要重新初始化 swiper。
+        // 在初dom操作之前，需要调用 loopDestroy，把子节点的顺序恢复
+        this.#domChangeByOutSide = true
+        this.swiper.loopDestroy()
+        this.swiper.params.loop = false
+      }
+    }
+
+    // eslint-disable-next-line react/no-direct-mutation-state
+    this.state.swiperWrapper.appendChild = (...args) => {
+      beforeAction()
+      return appendChild(...args)
+    }
+
+    // eslint-disable-next-line react/no-direct-mutation-state
+    this.state.swiperWrapper.removeChild = (...args) => {
+      beforeAction()
+      return removeChild(...args)
+    }
+
+    // eslint-disable-next-line react/no-direct-mutation-state
+    this.state.swiperWrapper.replaceChild = (...args) => {
+      beforeAction()
+      return replaceChild(...args)
+    }
+
+    // eslint-disable-next-line react/no-direct-mutation-state
+    this.state.swiperWrapper.insertBefore = (...args) => {
+      beforeAction()
+      return insertBefore(...args)
+    }
+  }
+
+  handleInit = (reset = false) => {
     const {
       autoplay = false,
       circular = true,
@@ -86,10 +150,30 @@ class SwiperInner extends React.Component<SwiperProps, Record<string, unknown>>
       displayMultipleItems = 1,
       duration = 500,
       interval = 5000,
-      spaceBetween,
+      currentItemId,
+      effectsProps = {},
       vertical
     } = this.props
 
+    let initialSlide = parseInt(String(current), 10)
+    if (reset) {
+      initialSlide = this.#lastSwiperActiveIndex
+    } else {
+      if (currentItemId) {
+        let itemIdIndex = 0
+        this.getSlidersList().forEach((swiperItem, index) => {
+          // @ts-ignore
+          if (swiperItem.itemId && swiperItem.itemId === currentItemId) {
+            itemIdIndex = index
+          }
+        })
+        initialSlide = itemIdIndex
+      }
+    }
+
+    const loopAdditionalSlides = this.getLoopAdditionalSlides()
+    const centeredSlides = parseFloat(String(displayMultipleItems)) === 1
+    const slidesPerView = parseFloat(String(displayMultipleItems)) === 1 ? 'auto' : displayMultipleItems
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const that = this
     const opt: Record<string, any> = {
@@ -97,54 +181,70 @@ class SwiperInner extends React.Component<SwiperProps, Record<string, unknown>>
       pagination: { el: `.taro-swiper-${this._id} > .swiper-container > .swiper-pagination` },
       direction: vertical ? 'vertical' : 'horizontal',
       loop: circular,
-      slidesPerView: parseFloat(String(displayMultipleItems)),
-      initialSlide: parseInt(String(current), 10),
+      slidesPerView: slidesPerView,
+      initialSlide,
       speed: parseInt(String(duration), 10),
       observer: true,
       observeParents: true,
+      loopAdditionalSlides,
+      centeredSlides,
+      ...effectsProps,
       on: {
-        slideChange () {
+        init (_swiper) {
+          that.getNeedFixLoop() && _swiper.loopFix()
+          that.props.autoplay && _swiper.autoplay.start()
+        },
+        transitionEnd (_swiper) {
+          if (that.#swiperResetting || that.#lastSwiperActiveIndex === _swiper.realIndex) return
+          that.#lastSwiperActiveIndex = _swiper.realIndex
+          that.getNeedFixLoop() && _swiper.loopFix()
+          that.props.autoplay && _swiper.autoplay.start()
           const e = createEvent('touchend')
           try {
+            const currentId = that.getCurrentId(_swiper)
             Object.defineProperty(e, 'detail', {
               enumerable: true,
               value: {
-                current: this.realIndex
+                source: that.#source,
+                current: this.realIndex,
+                currentId: currentId
               }
             })
           } catch (err) {} // eslint-disable-line no-empty
-          that._$current = this.realIndex
-          that.handleOnChange(e)
+          that.handleOnAnimationFinish(e)
+          that.#source = 'autoplay'
+        },
+        touchMove () {
+          that.#source = 'touch'
         },
-        transitionEnd () {
+        touchEnd: (_swiper) => {
+          that.#source = 'touch'
+          that.props.autoplay && _swiper.autoplay.start()
+        },
+        touchStart: (_swiper) => {
+          that.#source = 'touch'
+          that.props.autoplay && _swiper.autoplay.pause()
+        },
+        slideChange (_swiper) {
+          if (that.#swiperResetting || that.#lastSwiperActiveIndex === _swiper.realIndex) return
           const e = createEvent('touchend')
           try {
+            const currentId = that.getCurrentId(_swiper)
             Object.defineProperty(e, 'detail', {
               enumerable: true,
               value: {
-                current: this.mySwiper.realIndex
+                current: this.realIndex,
+                source: that.#source,
+                currentId,
               }
             })
-            if (this.mySwiper.isBeginning) {
-              this.mySwiper.slideToLoop((this.props.children as any).length - 1, 0)
-            } else if (this.mySwiper.isEnd) {
-              this.mySwiper.slideToLoop(0, 0)
-            }
           } catch (err) {} // eslint-disable-line no-empty
-          that.handleOnAnimationFinish(e)
+          that.handleOnChange(e)
         },
-        observerUpdate (_swiper: ISwiper, e) {
-          const target = e.target
-          const className = target && typeof target.className === 'string' ? target.className : ''
-          if (className.includes('taro_page') && target.style.display !== 'none') {
-            if (that.props.autoplay && target.contains(_swiper.$el[0])) {
-              if (that.props.circular) {
-                _swiper.slideToLoop(this.realIndex, 0) // 更新下标
-              } else {
-                _swiper.slideTo(this.realIndex)
-              }
-            }
-          }
+        autoplay (_swiper) {
+          // Note: 修复 autoplay 时，切换到其他页面再切回来，autoplay 会停止的问题
+          _swiper.animating = false
+          that.#source = 'autoplay'
         }
       }
     }
@@ -157,79 +257,128 @@ class SwiperInner extends React.Component<SwiperProps, Record<string, unknown>>
       }
     }
 
-    // 两端距离
-    if (spaceBetween) {
-      opt.spaceBetween = spaceBetween
+    this.swiper = new Swipers(this.$el!, opt)
+
+    // Note: 这里是拦截了 swiper 的 minTranslate 和 maxTranslate 方法，手动修复了 loop 模式下的 margin 问题
+    // 因为这两个属性会影响滑动到哪个位置进行 fixloop
+    // 可参考源码：https://github.com/nolimits4web/swiper/blob/v11.1.0/src/core/events/onTouchMove.mjs
+    // https://github.com/nolimits4web/swiper/blob/v11.1.0/src/core/loop/loopFix.mjs
+    if (this.getNeedFixLoop()) {
+      // @ts-ignore
+      const minTranslate = this.swiper.minTranslate.bind(this.swiper)
+      // @ts-ignore
+      const maxTranslate = this.swiper.maxTranslate.bind(this.swiper)
+      if (centeredSlides && this.getSlidersList().length < 4) {
+        // @ts-ignore
+        this.swiper.minTranslate = () => minTranslate() + this.parseMargin()[1]
+        // @ts-ignore
+        this.swiper.maxTranslate = () => maxTranslate() - this.parseMargin()[0]
+      } else {
+        // @ts-ignore
+        this.swiper.minTranslate = () => minTranslate() - this.parseMargin()[0]
+        // @ts-ignore
+        this.swiper.maxTranslate = () => maxTranslate() + this.parseMargin()[1]
+      }
     }
 
-    this.mySwiper = new Swipers(this.$el!, opt)
-    setTimeout(() => {
-      this.mySwiper.update()
-    }, 500)
+    this.setState({
+      swiperWrapper: this.swiper.wrapperEl
+    })
+  }
 
-    if (!this.mySwiper || !this.props.circular) return
+  componentDidUpdate (prevProps, pervState) {
+    if (!this.swiper || !this.state.swiperWrapper) return
+    if (pervState.swiperWrapper !== this.state.swiperWrapper && this.state.swiperWrapper) {
+      this.observer && this.observer.disconnect()
+      this.observer = new MutationObserver(this.handleSwiperSizeDebounce)
+      this.observer.observe(this.state.swiperWrapper as Node, {
+        childList: true
+      })
+      this.hackSwiperWrapDomAction()
+    }
 
-    const wrapper = this.mySwiper.$wrapperEl[0]
-    this.observer = new MutationObserver(this.handleSwiperLoopListen)
+    if (prevProps.circular !== this.props.circular || prevProps.displayMultipleItems !== this.props.displayMultipleItems) {
+      this.reset()
+    }
 
-    this.observer.observe(wrapper, {
-      childList: true
-    })
-  }
+    if (prevProps.interval !== this.props.interval) {
+      if (typeof this.swiper.params.autoplay === 'object') {
+        this.swiper.params.autoplay.delay = this.props.interval
+      }
+    }
 
-  UNSAFE_componentWillReceiveProps (nextProps) {
-    if (this.mySwiper) {
-      const nextCurrent = typeof nextProps.current === 'number' ? nextProps.current : this._$current || 0
+    if (prevProps.duration !== this.props.duration) {
+      this.swiper.params.speed = this.props.duration
+    }
 
-      this.handleSwiperLoop()
-      // 是否衔接滚动模式
-      if (nextProps.circular) {
-        if (!this.mySwiper.isBeginning && !this.mySwiper.isEnd) {
-          this.mySwiper.slideToLoop(parseInt(nextCurrent, 10)) // 更新下标
-        }
+    if (prevProps.current !== this.props.current && !this.props.currentItemId) {
+      const n = parseInt(String(this.props.current), 10)
+      if (isNaN(n) || n === this.swiper.realIndex) return
+      this.#source = ''
+      if (this.props.circular) {
+        this.swiper.slideToLoop(n) // 更新下标
+        this.props.autoplay && this.swiper.autoplay.pause()
+        // @ts-ignore
+        this.swiper.loopFix()
+        this.props.autoplay && this.swiper.autoplay.start()
       } else {
-        this.mySwiper.slideTo(parseInt(nextCurrent, 10) + 1) // 更新下标
+        this.swiper.slideTo(n) // 更新下标
       }
+    }
+
+    if (prevProps.autoplay !== this.props.autoplay) {
+      const swiperAutoplay = this.swiper.autoplay
+      if (swiperAutoplay) {
+        if (swiperAutoplay.running === this.props.autoplay) return
 
-      const autoplay = this.mySwiper.autoplay
-      // 判断是否需要停止或开始自动轮播
-      if (autoplay.running !== nextProps.autoplay) {
-        if (nextProps.autoplay) {
-          if (typeof this.mySwiper.params.autoplay === 'object') {
-            this.mySwiper.params.autoplay.disableOnInteraction = false
-            this.mySwiper.params.autoplay.delay = parseInt(String(this.props.interval) || '3000', 10)
+        if (this.props.autoplay) {
+          if (this.swiper.params && typeof this.swiper.params.autoplay === 'object') {
+            if (this.swiper.params.autoplay.disableOnInteraction === true) {
+              this.swiper.params.autoplay.disableOnInteraction = false
+            }
+            this.swiper.params.autoplay.delay = this.props.interval
           }
-          autoplay.start()
+          swiperAutoplay.start()
         } else {
-          autoplay.stop()
+          swiperAutoplay.stop()
         }
       }
-
-      this.mySwiper.update() // 更新子元素
     }
-  }
 
-  componentDidUpdate (preProps) {
-    if (preProps.children.length === 0 && (this.props.children as any).length > 0) {
-      (this.mySwiper as any).loopDestroy()
-      ;(this.mySwiper as any).loopCreate()
-    }
-    if (!this.mySwiper) return
-    if (this.props.autoplay) {
-      if (this._$width !== this.mySwiper.width || this._$height !== this.mySwiper.height) {
-        this.mySwiper.autoplay.start()
+    if (prevProps.currentItemId !== this.props.currentItemId) {
+      let itemIdIndex = 0
+      this.getSlidersList().forEach((swiperItem, index) => {
+        const itemId = swiperItem.getAttribute('item-id')
+        // @ts-ignore
+        if (itemId === this.props.currentItemId) {
+          if (this.props.circular) {
+            itemIdIndex = Number(swiperItem.getAttribute('data-swiper-slide-index'))
+          } else {
+            itemIdIndex = index
+          }
+        }
+      })
+      if (isNaN(itemIdIndex) || itemIdIndex === this.swiper.realIndex) return
+      this.#source = ''
+      if (this.props.circular) {
+        this.swiper.slideToLoop(itemIdIndex) // 更新下标
+        this.props.autoplay && this.swiper.autoplay.pause()
+        // @ts-ignore
+        this.swiper.loopFix()
+        this.props.autoplay && this.swiper.autoplay.start()
+      } else {
+        this.swiper.slideTo(itemIdIndex) // 更新下标
       }
     }
-    this._$width = this.mySwiper.width
-    this._$height = this.mySwiper.height
   }
 
   componentWillUnmount () {
     this.$el = null
-    if (this.mySwiper) this.mySwiper.destroy()
+    this.swiper?.destroy?.()
     this.observer?.disconnect?.()
-    this.observerFirst?.disconnect?.()
-    this.observerLast?.disconnect?.()
+    this.setState({
+      swiperWrapper: null
+    })
   }
 
   handleOnChange (e: React.FormEvent<HTMLDivElement>) {
@@ -242,65 +391,94 @@ class SwiperInner extends React.Component<SwiperProps, Record<string, unknown>>
     typeof func === 'function' && func(e)
   }
 
-  parsePX (s = '0px') {
-    return parseFloat(s.replace(/r*px/i, ''))
+  handleSwiperSizeDebounce = debounce(() => {
+    if (!this.swiper) return
+    if (this.props.circular) {
+      if (this.#domChangeByOutSide) {
+        this.reset()
+        this.#domChangeByOutSide = false
+      }
+    } else {
+      this.swiper.update()
+      this.#swiperResetting = false
+    }
+  }, 50)
+
+
+  reset = () => {
+    if (!this.swiper) return
+    this.#swiperResetting = true
+    this.#lastSwiperActiveIndex = this.swiper.realIndex
+    this.swiper.destroy()
+    this.handleInit(true)
+    this.#swiperResetting = false
+  }
+
+  // 以下为方法函数
+  getSlidersList = () => this.$el?.querySelectorAll?.('.swiper-slide') || []
+
+  // 获取是否需要手动修复 loop 的条件
+  getNeedFixLoop = () => {
+    const margins = this.parseMargin()
+    const hasMargin = margins.filter(Boolean).length > 0
+    return this.props.circular && hasMargin
   }
 
-  handleSwiperLoopListen = () => {
-    this.observerFirst?.disconnect?.()
-    this.observerLast?.disconnect?.()
-    this.observerFirst = new MutationObserver(this.handleSwiperLoop)
-    this.observerLast = new MutationObserver(this.handleSwiperLoop)
-    const wrapper = this.mySwiper.$wrapperEl[0]
-    const list = wrapper.querySelectorAll('taro-swiper-item-core:not(.swiper-slide-duplicate)')
-    if (list.length >= 1) {
-      this.observerFirst.observe(list[0], {
-        characterData: true
-      })
-    } else if (list.length >= 2) {
-      this.observerLast.observe(list[list.length - 1], {
-        characterData: true
-      })
-    }
+  // Note: loop 的时候添加 additionalSlides 可以避免循环的时候由于 loopFix 不及时，出现空白的问题。但是并不是 additionalSlides 越多越好，因为 additionalSlides 越多，如果 swiper-item 的数量不够，会导致出现 bug。
+  // 目前的策略是 swiper-item 的数量小于等于 5 时，不添加 additionalSlides，大于 5 小于等于 7 时，添加 1 个 additionalSlides，大于 7 时，添加 2 个 additionalSlides。
+  getLoopAdditionalSlides():number {
+    const slidersLength = (this.getSlidersList()).length
+    if (!this.$el || !this.getNeedFixLoop() || slidersLength < ONE_ADDITIONAL_SLIDES_THRESHOLD) return 0
+    if (slidersLength <= TWO_ADDITIONAL_SLIDES_THRESHOLD) return 1
+    return 2
   }
 
-  handleSwiperLoop = debounce(() => {
-    if (this.mySwiper && this.mySwiper.$wrapperEl && this.props.circular) {
-      // @ts-ignore
-      this.mySwiper.loopDestroy()
-      // @ts-ignore
-      this.mySwiper.loopCreate()
-    }
-  }, 500)
+  parseMargin = () => {
+    const { previousMargin = '0px', nextMargin = '0px' } = this.props
+    const [, pM] = /^(\d+)px/.exec(previousMargin) || []
+    const [, nN] = /^(\d+)px/.exec(nextMargin as string) || []
+    return [parseInt(pM) || 0, parseInt(nN) || 0]
+  }
+
+  getCurrentId (swiper: ISwiper) {
+    const slides = swiper.slides
+    const activeIndex = swiper.activeIndex
+    const currentSlide = slides[activeIndex]
+    return currentSlide.getAttribute('item-id')
+  }
 
   render () {
     const {
       className,
       style,
       vertical,
-      previousMargin,
-      nextMargin,
       indicatorColor,
       indicatorActiveColor,
       forwardedRef
     } = this.props
     const defaultIndicatorColor = indicatorColor || 'rgba(0, 0, 0, .3)'
     const defaultIndicatorActiveColor = indicatorActiveColor || '#000'
+    const [pM, nM] = this.parseMargin()
     const cls = classNames(`taro-swiper-${this._id}`, className)
-    const sty = Object.assign({
-      paddingTop: vertical ? this.parsePX(previousMargin) : 0,
-      paddingRight: vertical ? 0 : this.parsePX(nextMargin),
-      paddingBottom: vertical ? this.parsePX(nextMargin) : 0,
-      paddingLeft: vertical ? 0 : this.parsePX(previousMargin),
-      overflow: 'hidden'
-    }, style)
-    const paginationCls = classNames(
-      'swiper-pagination',
-      {
-        'swiper-pagination-hidden': !this.props.indicatorDots,
-        'swiper-pagination-bullets': this.props.indicatorDots
-      }
-    )
+    const sty = Object.assign({}, style)
+    const hasMargin = pM || nM
+    if (hasMargin) {
+      sty.overflow = 'hidden'
+    }
+    if (this.props.full) {
+      sty.height = '100%'
+    }
+    const swiperContainerStyleList:string [] = [
+      'overflow: visible;',
+      vertical ? `margin-top: ${pM}px; margin-bottom: ${nM}px;` : `margin-right: ${nM}px; margin-left: ${pM}px;`,
+      this.props.full ? 'height: 100%;' : ''
+    ]
+
+
+    const swiperPaginationStyleList:string [] = [
+      this.props.indicatorDots ? 'opacity: 1;' : 'display: none;',
+      'font-size: 0;'
+    ]
     return (
       <div className={`swiper-container-wrapper ${cls}`} style={sty} ref={(e) => {
         if (forwardedRef && e) {
@@ -313,11 +491,13 @@ class SwiperInner extends React.Component<SwiperProps, Record<string, unknown>>
               __html: `<style type='text/css'>
               .taro-swiper-${this._id} > .swiper-container > .swiper-pagination > .swiper-pagination-bullet { background: ${defaultIndicatorColor} }
               .taro-swiper-${this._id} > .swiper-container > .swiper-pagination > .swiper-pagination-bullet-active { background: ${defaultIndicatorActiveColor} }
+              .taro-swiper-${this._id} > .swiper-container { ${swiperContainerStyleList.join('')} }
+              .taro-swiper-${this._id} > .swiper-container > .swiper-pagination { ${swiperPaginationStyleList.join('')} }
               </style>`
             }}
           />
-          <div className='swiper-wrapper'>{this.props.children}</div>
-          <div className={paginationCls} />
+          <div className='swiper-wrapper' >{this.props.children}</div>
+          <div className='swiper-pagination' />
         </div>
       </div>
     )
diff --git a/packages/taro-components-react/src/components/swiper/style/index.css b/packages/taro-components-react/src/components/swiper/style/index.css
index 26265858c9b9..b46cd2db8801 100644
--- a/packages/taro-components-react/src/components/swiper/style/index.css
+++ b/packages/taro-components-react/src/components/swiper/style/index.css
@@ -4,12 +4,6 @@
 
 .swiper-container {
     height: 100%;
-}
-
-.swiper-pagination {
-    font-size: 0;
-}
-
-.swiper-pagination-bullet {
-    opacity: 1
+    position: relative;
+    overflow: visible;
 }
diff --git a/packages/taro-components-react/src/index.ts b/packages/taro-components-react/src/index.react.ts
similarity index 94%
rename from packages/taro-components-react/src/index.ts
rename to packages/taro-components-react/src/index.react.ts
index d6db68d7fd2e..6c965b3b651a 100644
--- a/packages/taro-components-react/src/index.ts
+++ b/packages/taro-components-react/src/index.react.ts
@@ -43,7 +43,7 @@ export { OfficialAccount } from '@tarojs/components/lib/react'
 export { OpenData } from '@tarojs/components/lib/react'
 export { PageContainer } from '@tarojs/components/lib/react'
 export { PageMeta } from '@tarojs/components/lib/react'
-export { Picker, PickerGroup } from '@tarojs/components/lib/react'
+export { Picker } from '@tarojs/components/lib/react'
 export { PickerView, PickerViewColumn } from '@tarojs/components/lib/react'
 export { Progress } from '@tarojs/components/lib/react'
 export { default as PullDownRefresh } from './components/pull-down-refresh'
@@ -58,11 +58,10 @@ export { Slider } from '@tarojs/components/lib/react'
 export { NativeSlot, Slot } from '@tarojs/components/lib/react'
 export { Swiper, SwiperItem } from './components/swiper'
 export { Switch } from '@tarojs/components/lib/react'
-export { Tabbar, TabItem } from '@tarojs/components/lib/react'
 export { Tabs } from '@tarojs/components/lib/react'
 export { default as Text } from './components/text'
 export { Textarea } from '@tarojs/components/lib/react'
-export { Video, VideoControl, VideoDanmu } from '@tarojs/components/lib/react'
+export { Video } from '@tarojs/components/lib/react'
 export { default as View } from './components/view'
 export { VoipRoom } from '@tarojs/components/lib/react'
 export { WebView } from '@tarojs/components/lib/react'
diff --git a/packages/taro-components-react/src/index.solid.ts b/packages/taro-components-react/src/index.solid.ts
new file mode 100644
index 000000000000..f1e61168418a
--- /dev/null
+++ b/packages/taro-components-react/src/index.solid.ts
@@ -0,0 +1,67 @@
+/* eslint-disable simple-import-sort/exports */
+export { Ad } from '@tarojs/components/lib/solid'
+export { AdCustom } from '@tarojs/components/lib/solid'
+export { AnimationVideo } from '@tarojs/components/lib/solid'
+export { AnimationView } from '@tarojs/components/lib/solid'
+export { ArCamera } from '@tarojs/components/lib/solid'
+export { Audio } from '@tarojs/components/lib/solid'
+export { AwemeData } from '@tarojs/components/lib/solid'
+export { Block } from '@tarojs/components/lib/solid'
+export { default as Button } from './components/button'
+export { Camera } from '@tarojs/components/lib/solid'
+export { Canvas } from '@tarojs/components/lib/solid'
+export { ChannelLive } from '@tarojs/components/lib/solid'
+export { ChannelVideo } from '@tarojs/components/lib/solid'
+export { Checkbox, CheckboxGroup } from '@tarojs/components/lib/solid'
+export { CommentDetail, CommentList } from '@tarojs/components/lib/solid'
+export { ContactButton } from '@tarojs/components/lib/solid'
+export { CoverImage } from '@tarojs/components/lib/solid'
+export { CoverView } from '@tarojs/components/lib/solid'
+export { CustomWrapper } from '@tarojs/components/lib/solid'
+export { Editor } from '@tarojs/components/lib/solid'
+export { FollowSwan } from '@tarojs/components/lib/solid'
+export { Form } from '@tarojs/components/lib/solid'
+export { FunctionalPageNavigator } from '@tarojs/components/lib/solid'
+export { default as Icon } from './components/icon'
+export { default as Image } from './components/image'
+export { InlinePaymentPanel } from '@tarojs/components/lib/solid'
+export { Input } from '@tarojs/components/lib/solid'
+export { KeyboardAccessory } from '@tarojs/components/lib/solid'
+export { Label } from '@tarojs/components/lib/solid'
+export { Lifestyle } from '@tarojs/components/lib/solid'
+export { Like } from '@tarojs/components/lib/solid'
+export { LivePlayer } from '@tarojs/components/lib/solid'
+export { LivePusher } from '@tarojs/components/lib/solid'
+export { Login } from '@tarojs/components/lib/solid'
+export { Lottie } from '@tarojs/components/lib/solid'
+export { Map } from '@tarojs/components/lib/solid'
+export { MatchMedia } from '@tarojs/components/lib/solid'
+export { MovableArea, MovableView } from '@tarojs/components/lib/solid'
+export { NavigationBar } from '@tarojs/components/lib/solid'
+export { Navigator } from '@tarojs/components/lib/solid'
+export { OfficialAccount } from '@tarojs/components/lib/solid'
+export { OpenData } from '@tarojs/components/lib/solid'
+export { PageContainer } from '@tarojs/components/lib/solid'
+export { PageMeta } from '@tarojs/components/lib/solid'
+export { Picker } from '@tarojs/components/lib/solid'
+export { PickerView, PickerViewColumn } from '@tarojs/components/lib/solid'
+export { Progress } from '@tarojs/components/lib/solid'
+// export { default as PullDownRefresh } from './components/pull-down-refresh'
+export { PullToRefresh } from '@tarojs/components/lib/solid'
+export { Radio, RadioGroup } from '@tarojs/components/lib/solid'
+export { RichText } from '@tarojs/components/lib/solid'
+export { RootPortal } from '@tarojs/components/lib/solid'
+export { RtcRoom, RtcRoomItem } from '@tarojs/components/lib/solid'
+export { default as ScrollView } from './components/scroll-view'
+export { ShareElement } from '@tarojs/components/lib/solid'
+export { Slider } from '@tarojs/components/lib/solid'
+export { NativeSlot, Slot } from '@tarojs/components/lib/solid'
+export { Swiper, SwiperItem } from '@tarojs/components/lib/solid'
+export { Switch } from '@tarojs/components/lib/solid'
+export { Tabs } from '@tarojs/components/lib/solid'
+export { default as Text } from './components/text'
+export { Textarea } from '@tarojs/components/lib/solid'
+export { Video } from '@tarojs/components/lib/solid'
+export { default as View } from './components/view'
+export { VoipRoom } from '@tarojs/components/lib/solid'
+export { WebView } from '@tarojs/components/lib/solid'
diff --git a/packages/taro-components-react/types/global.d.ts b/packages/taro-components-react/types/global.d.ts
index c39c2cf76d0d..32807413f3ac 100644
--- a/packages/taro-components-react/types/global.d.ts
+++ b/packages/taro-components-react/types/global.d.ts
@@ -3,3 +3,11 @@ declare namespace JSX {
     [elemName: string]: any;
   }
 }
+
+declare module '@tarojs/components/lib/solid' {
+  export * from '@tarojs/components'
+}
+
+declare module '@tarojs/components/lib/react' {
+  export * from '@tarojs/components'
+}
diff --git a/packages/taro-components-react/types/index.d.ts b/packages/taro-components-react/types/index.d.ts
index 79a5e651a001..17e035bc9c40 100644
--- a/packages/taro-components-react/types/index.d.ts
+++ b/packages/taro-components-react/types/index.d.ts
@@ -1,3 +1,9 @@
+
+declare module 'swiper/bundle' {
+  import Swiper from 'swiper';
+  export = Swiper
+}
+
 declare module '@tarojs/components-react' {
   export * from '@tarojs/components'
 }
@@ -14,4 +20,4 @@ declare module '*/hooks' {
   export const memo: typeof React.memo
   export const forwardRef: typeof React.forwardRef
   export const useImperativeHandle: typeof React.useImperativeHandle
-}
\ No newline at end of file
+}
diff --git a/packages/taro-components-rn/package.json b/packages/taro-components-rn/package.json
index e4b17ec812c5..a2e24704221c 100644
--- a/packages/taro-components-rn/package.json
+++ b/packages/taro-components-rn/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/components-rn",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "React Native 基础组件",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-components/__mocks__/swiper/swiper-bundle.esm.js.ts b/packages/taro-components/__mocks__/swiper/bundle.ts
similarity index 63%
rename from packages/taro-components/__mocks__/swiper/swiper-bundle.esm.js.ts
rename to packages/taro-components/__mocks__/swiper/bundle.ts
index b5824eba07cd..62640385c7c7 100644
--- a/packages/taro-components/__mocks__/swiper/swiper-bundle.esm.js.ts
+++ b/packages/taro-components/__mocks__/swiper/bundle.ts
@@ -1,33 +1,62 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { SwiperOptions } from 'swiper'
-import { A11yMethods } from 'swiper/types/components/a11y'
-import { AutoplayMethods } from 'swiper/types/components/autoplay'
-import { ControllerMethods } from 'swiper/types/components/controller'
-import { CoverflowEffectMethods } from 'swiper/types/components/effect-coverflow'
-import { CubeEffectMethods } from 'swiper/types/components/effect-cube'
-import { FadeEffectMethods } from 'swiper/types/components/effect-fade'
-import { FlipEffectMethods } from 'swiper/types/components/effect-flip'
-import { HashNavigationMethods } from 'swiper/types/components/hash-navigation'
-import { HistoryMethods } from 'swiper/types/components/history'
-import { KeyboardMethods } from 'swiper/types/components/keyboard'
-import { LazyMethods } from 'swiper/types/components/lazy'
-import { MousewheelMethods } from 'swiper/types/components/mousewheel'
-import { NavigationMethods } from 'swiper/types/components/navigation'
-import { PaginationMethods } from 'swiper/types/components/pagination'
-import { ParallaxMethods } from 'swiper/types/components/parallax'
-import { ScrollbarMethods } from 'swiper/types/components/scrollbar'
-import { ThumbsMethods } from 'swiper/types/components/thumbs'
-import { VirtualMethods } from 'swiper/types/components/virtual'
-import { ZoomMethods } from 'swiper/types/components/zoom'
+import { A11yMethods } from 'swiper/types/modules/a11y'
+import { AutoplayMethods } from 'swiper/types/modules/autoplay'
+import { ControllerMethods } from 'swiper/types/modules/controller'
+import { CardsEffectMethods } from 'swiper/types/modules/effect-cards'
+import { CoverflowEffectMethods } from 'swiper/types/modules/effect-coverflow'
+import { CreativeEffectMethods } from 'swiper/types/modules/effect-creative'
+import { CubeEffectMethods } from 'swiper/types/modules/effect-cube'
+import { FadeEffectMethods } from 'swiper/types/modules/effect-fade'
+import { FlipEffectMethods } from 'swiper/types/modules/effect-flip'
+import { FreeModeMethods } from 'swiper/types/modules/free-mode'
+import { HashNavigationMethods } from 'swiper/types/modules/hash-navigation'
+import { HistoryMethods } from 'swiper/types/modules/history'
+import { KeyboardMethods } from 'swiper/types/modules/keyboard'
+import { MousewheelMethods } from 'swiper/types/modules/mousewheel'
+import { NavigationMethods } from 'swiper/types/modules/navigation'
+import { PaginationMethods } from 'swiper/types/modules/pagination'
+import { ParallaxMethods } from 'swiper/types/modules/parallax'
+import { ScrollbarMethods } from 'swiper/types/modules/scrollbar'
+import { ThumbsMethods } from 'swiper/types/modules/thumbs'
+import { VirtualMethods } from 'swiper/types/modules/virtual'
+import { ZoomMethods } from 'swiper/types/modules/zoom'
 import { SwiperEvents } from 'swiper/types/swiper-events'
+import { SwiperOptions } from 'swiper/types/swiper-options'
 
-import type ISwiper from 'swiper'
+import type ISwiper from 'swiper/types/swiper-class'
 
 export default class Swiper implements ISwiper {
+  originalParams: SwiperOptions
+  loopedSlides: number | null
+  snapIndex: number
+  snapGrid: number[]
+  isLocked: boolean
+  swipeDirection: 'next' | 'prev'
+  slidesPerViewDynamic (): number {
+    throw new Error('Method not implemented.')
+  }
+
+  changeLanguageDirection (direction: 'rtl' | 'ltr'): void {
+    throw new Error('Method not implemented.')
+  }
+
+  loopCreate (): void {
+    throw new Error('Method not implemented.')
+  }
+
+  loopDestroy (): void {
+    throw new Error('Method not implemented.')
+  }
+
+  init (el?: HTMLElement | undefined): ISwiper {
+    throw new Error('Method not implemented.')
+  }
+
+  creativeEffect: CreativeEffectMethods
+  cardsEffect: CardsEffectMethods
+  freeMode: FreeModeMethods
   params: SwiperOptions
-  $el
   el: HTMLElement
-  $wrapperEl
   wrapperEl: HTMLElement
   slides
   width: number
@@ -83,8 +112,6 @@ export default class Swiper implements ISwiper {
 
   attachEvents (): void {}
 
-  init (): void {}
-
   destroy (deleteInstance?: boolean | undefined, cleanStyles?: boolean | undefined): void {}
 
   appendSlide (slides: string | HTMLElement | string[] | HTMLElement[]): void {}
@@ -134,7 +161,6 @@ export default class Swiper implements ISwiper {
   hashNavigation: HashNavigationMethods
   history: HistoryMethods
   keyboard: KeyboardMethods
-  lazy: LazyMethods
   mousewheel: MousewheelMethods
   navigation: NavigationMethods
   pagination: PaginationMethods
diff --git a/packages/taro-components/__tests__/__snapshots__/swiper.spec.tsx.snap b/packages/taro-components/__tests__/__snapshots__/swiper.spec.tsx.snap
index 1cb8e956c7ce..36334ca7ec30 100644
--- a/packages/taro-components/__tests__/__snapshots__/swiper.spec.tsx.snap
+++ b/packages/taro-components/__tests__/__snapshots__/swiper.spec.tsx.snap
@@ -1,145 +1,175 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Swiper events 1`] = `
-<taro-swiper-core class="taro-swiper-6" style="overflow: hidden;">
+<taro-swiper-core class="taro-swiper-6">
   <!---->
-  <div class="swiper-container" style="overflow: visible; margin-right: 0px; margin-left: 0px;">
+  <div class="swiper-container">
     <style type="text/css">
       .taro-swiper-6 > .swiper-container > .swiper-pagination > .swiper-pagination-bullet { background: rgba(0, 0, 0, .3) }
               .taro-swiper-6 > .swiper-container > .swiper-pagination > .swiper-pagination-bullet-active { background: #000000 }
+              .taro-swiper-6 > .swiper-container { overflow: visible;margin-right: 0px; margin-left: 0px; }
+              .taro-swiper-6 > .swiper-container > .swiper-pagination { display: none;font-size: 0; }
     </style>
     <div class="swiper-wrapper">
       <taro-swiper-item-core class="swiper-slide">
+        <!---->
         <div style="height: 100%; background: green;"></div>
       </taro-swiper-item-core>
       <taro-swiper-item-core class="swiper-slide">
+        <!---->
         <div style="height: 100%; background: yellow;"></div>
       </taro-swiper-item-core>
       <taro-swiper-item-core class="swiper-slide">
+        <!---->
         <div style="height: 100%; background: green;"></div>
       </taro-swiper-item-core>
     </div>
-    <div class="swiper-pagination swiper-pagination-hidden"></div>
+    <div class="swiper-pagination"></div>
   </div>
 </taro-swiper-core>
 `;
 
 exports[`Swiper props 1`] = `
-<taro-swiper-core class="taro-swiper-0" style="overflow: hidden;">
+<taro-swiper-core class="taro-swiper-0">
   <!---->
-  <div class="swiper-container" style="overflow: visible; margin-right: 0px; margin-left: 0px;">
+  <div class="swiper-container">
     <style type="text/css">
       .taro-swiper-0 > .swiper-container > .swiper-pagination > .swiper-pagination-bullet { background: rgba(0, 0, 0, .3) }
               .taro-swiper-0 > .swiper-container > .swiper-pagination > .swiper-pagination-bullet-active { background: #000000 }
+              .taro-swiper-0 > .swiper-container { overflow: visible;margin-right: 0px; margin-left: 0px; }
+              .taro-swiper-0 > .swiper-container > .swiper-pagination { display: none;font-size: 0; }
     </style>
     <div class="swiper-wrapper">
       <taro-swiper-item-core class="swiper-slide">
+        <!---->
         <div style="height: 100%;"></div>
       </taro-swiper-item-core>
       <taro-swiper-item-core class="swiper-slide">
+        <!---->
         <div style="height: 100%;"></div>
       </taro-swiper-item-core>
       <taro-swiper-item-core class="swiper-slide">
+        <!---->
         <div style="height: 100%;"></div>
       </taro-swiper-item-core>
     </div>
-    <div class="swiper-pagination swiper-pagination-hidden"></div>
+    <div class="swiper-pagination"></div>
   </div>
 </taro-swiper-core>
 `;
 
 exports[`Swiper should autoplay 1`] = `
-<taro-swiper-core class="taro-swiper-1" style="overflow: hidden;">
+<taro-swiper-core class="taro-swiper-1">
   <!---->
-  <div class="swiper-container" style="overflow: visible; margin-right: 0px; margin-left: 0px;">
+  <div class="swiper-container">
     <style type="text/css">
       .taro-swiper-1 > .swiper-container > .swiper-pagination > .swiper-pagination-bullet { background: rgba(0, 0, 0, .3) }
               .taro-swiper-1 > .swiper-container > .swiper-pagination > .swiper-pagination-bullet-active { background: #000000 }
+              .taro-swiper-1 > .swiper-container { overflow: visible;margin-right: 0px; margin-left: 0px; }
+              .taro-swiper-1 > .swiper-container > .swiper-pagination { display: none;font-size: 0; }
     </style>
     <div class="swiper-wrapper">
       <taro-swiper-item-core class="swiper-slide">
+        <!---->
         <div style="height: 100%;"></div>
       </taro-swiper-item-core>
       <taro-swiper-item-core class="swiper-slide">
+        <!---->
         <div style="height: 100%;"></div>
       </taro-swiper-item-core>
       <taro-swiper-item-core class="swiper-slide">
+        <!---->
         <div style="height: 100%;"></div>
       </taro-swiper-item-core>
     </div>
-    <div class="swiper-pagination swiper-pagination-hidden"></div>
+    <div class="swiper-pagination"></div>
   </div>
 </taro-swiper-core>
 `;
 
 exports[`Swiper should be circular 1`] = `
-<taro-swiper-core class="taro-swiper-2" style="overflow: hidden;">
+<taro-swiper-core class="taro-swiper-2">
   <!---->
-  <div class="swiper-container" style="overflow: visible; margin-right: 0px; margin-left: 0px;">
+  <div class="swiper-container">
     <style type="text/css">
       .taro-swiper-2 > .swiper-container > .swiper-pagination > .swiper-pagination-bullet { background: rgba(0, 0, 0, .3) }
               .taro-swiper-2 > .swiper-container > .swiper-pagination > .swiper-pagination-bullet-active { background: #000000 }
+              .taro-swiper-2 > .swiper-container { overflow: visible;margin-right: 0px; margin-left: 0px; }
+              .taro-swiper-2 > .swiper-container > .swiper-pagination { display: none;font-size: 0; }
     </style>
     <div class="swiper-wrapper">
       <taro-swiper-item-core class="swiper-slide">
+        <!---->
         <div></div>
       </taro-swiper-item-core>
       <taro-swiper-item-core class="swiper-slide">
+        <!---->
         <div></div>
       </taro-swiper-item-core>
       <taro-swiper-item-core class="swiper-slide">
+        <!---->
         <div></div>
       </taro-swiper-item-core>
     </div>
-    <div class="swiper-pagination swiper-pagination-hidden"></div>
+    <div class="swiper-pagination"></div>
   </div>
 </taro-swiper-core>
 `;
 
 exports[`Swiper should be vertical 1`] = `
-<taro-swiper-core class="taro-swiper-3" style="overflow: hidden;">
+<taro-swiper-core class="taro-swiper-3">
   <!---->
-  <div class="swiper-container" style="overflow: visible; margin-top: 0px; margin-bottom: 0px;">
+  <div class="swiper-container">
     <style type="text/css">
       .taro-swiper-3 > .swiper-container > .swiper-pagination > .swiper-pagination-bullet { background: rgba(0, 0, 0, .3) }
               .taro-swiper-3 > .swiper-container > .swiper-pagination > .swiper-pagination-bullet-active { background: #000000 }
+              .taro-swiper-3 > .swiper-container { overflow: visible;margin-top: 0px; margin-bottom: 0px; }
+              .taro-swiper-3 > .swiper-container > .swiper-pagination { display: none;font-size: 0; }
     </style>
     <div class="swiper-wrapper">
       <taro-swiper-item-core class="swiper-slide">
+        <!---->
         <div style="height: 100%;"></div>
       </taro-swiper-item-core>
       <taro-swiper-item-core class="swiper-slide">
+        <!---->
         <div style="height: 100%;"></div>
       </taro-swiper-item-core>
       <taro-swiper-item-core class="swiper-slide">
+        <!---->
         <div style="height: 100%;"></div>
       </taro-swiper-item-core>
     </div>
-    <div class="swiper-pagination swiper-pagination-hidden"></div>
+    <div class="swiper-pagination"></div>
   </div>
 </taro-swiper-core>
 `;
 
 exports[`Swiper should display multi items within screen width 1`] = `
-<taro-swiper-core class="taro-swiper-5" style="overflow: hidden;">
+<taro-swiper-core class="taro-swiper-5">
   <!---->
-  <div class="swiper-container" style="overflow: visible; margin-right: 0px; margin-left: 0px;">
+  <div class="swiper-container">
     <style type="text/css">
       .taro-swiper-5 > .swiper-container > .swiper-pagination > .swiper-pagination-bullet { background: rgba(0, 0, 0, .3) }
               .taro-swiper-5 > .swiper-container > .swiper-pagination > .swiper-pagination-bullet-active { background: #000000 }
+              .taro-swiper-5 > .swiper-container { overflow: visible;margin-right: 0px; margin-left: 0px; }
+              .taro-swiper-5 > .swiper-container > .swiper-pagination { display: none;font-size: 0; }
     </style>
     <div class="swiper-wrapper">
       <taro-swiper-item-core class="swiper-slide">
+        <!---->
         <div style="height: 100%;"></div>
       </taro-swiper-item-core>
       <taro-swiper-item-core class="swiper-slide">
+        <!---->
         <div style="height: 100%;"></div>
       </taro-swiper-item-core>
       <taro-swiper-item-core class="swiper-slide">
+        <!---->
         <div style="height: 100%;"></div>
       </taro-swiper-item-core>
     </div>
-    <div class="swiper-pagination swiper-pagination-hidden"></div>
+    <div class="swiper-pagination"></div>
   </div>
 </taro-swiper-core>
 `;
@@ -147,23 +177,28 @@ exports[`Swiper should display multi items within screen width 1`] = `
 exports[`Swiper should has previous margin 1`] = `
 <taro-swiper-core class="taro-swiper-4" style="overflow: hidden;">
   <!---->
-  <div class="swiper-container" style="overflow: visible; margin-right: 0px; margin-left: 10px;">
+  <div class="swiper-container">
     <style type="text/css">
       .taro-swiper-4 > .swiper-container > .swiper-pagination > .swiper-pagination-bullet { background: rgba(0, 0, 0, .3) }
               .taro-swiper-4 > .swiper-container > .swiper-pagination > .swiper-pagination-bullet-active { background: #000000 }
+              .taro-swiper-4 > .swiper-container { overflow: visible;margin-right: 0px; margin-left: 10px; }
+              .taro-swiper-4 > .swiper-container > .swiper-pagination { display: none;font-size: 0; }
     </style>
     <div class="swiper-wrapper">
       <taro-swiper-item-core class="swiper-slide">
+        <!---->
         <div style="height: 100%;"></div>
       </taro-swiper-item-core>
       <taro-swiper-item-core class="swiper-slide">
+        <!---->
         <div style="height: 100%;"></div>
       </taro-swiper-item-core>
       <taro-swiper-item-core class="swiper-slide">
+        <!---->
         <div style="height: 100%;"></div>
       </taro-swiper-item-core>
     </div>
-    <div class="swiper-pagination swiper-pagination-hidden"></div>
+    <div class="swiper-pagination"></div>
   </div>
 </taro-swiper-core>
 `;
diff --git a/packages/taro-components/package.json b/packages/taro-components/package.json
index c237993c07ee..45dd2d5c30c6 100644
--- a/packages/taro-components/package.json
+++ b/packages/taro-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/components",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Taro 组件库",
   "browser": "dist/index.js",
   "main:h5": "dist/index.js",
@@ -64,7 +64,7 @@
     "classnames": "^2.2.5",
     "hls.js": "^1.1.5",
     "resolve-pathname": "^3.0.0",
-    "swiper": "6.8.0",
+    "swiper": "11.1.0",
     "tslib": "^2.6.2"
   },
   "devDependencies": {
diff --git a/packages/taro-components/src/components/map/readme.md b/packages/taro-components/src/components/map/readme.md
index 3a480d89c600..1fb9805745cc 100644
--- a/packages/taro-components/src/components/map/readme.md
+++ b/packages/taro-components/src/components/map/readme.md
@@ -5,6 +5,45 @@
 <!-- Auto Generated Below -->
 
 
+## Properties
+
+| Property                   | Attribute                     | Description      | Type         | Default     |
+| -------------------------- | ----------------------------- | ---------------- | ------------ | ----------- |
+| `circles`                  | --                            | 圆(问题)            | `circle[]`   | `undefined` |
+| `enable3D`                 | `enable-3-d`                  | 3D楼块             | `boolean`    | `undefined` |
+| `enableAutoMaxOverlooking` | `enable-auto-max-overlooking` | 是否开启最大俯视角        | `boolean`    | `undefined` |
+| `enableBuilding`           | `enable-building`             | 是否展示建筑           | `boolean`    | `undefined` |
+| `enableOverlooking`        | `enable-overlooking`          | 是否开启俯视           | `boolean`    | `undefined` |
+| `enableRotate`             | `enable-rotate`               | 是否支持旋转           | `boolean`    | `undefined` |
+| `enableSatellite`          | `enable-satellite`            | 是否开启卫星图          | `boolean`    | `undefined` |
+| `enableScroll`             | `enable-scroll`               | 是否支持拖动           | `boolean`    | `undefined` |
+| `enableTraffic`            | `enable-traffic`              | 是否开启实时路况         | `boolean`    | `undefined` |
+| `enableZoom`               | `enable-zoom`                 | 是否支持缩放           | `boolean`    | `undefined` |
+| `height`                   | `height`                      | 添加高度属性           | `string`     | `'100%'`    |
+| `latitude`                 | `latitude`                    | 纬度               | `number`     | `undefined` |
+| `layerStyle`               | `layer-style`                 | 【个性化地图】配置的 style | `number`     | `undefined` |
+| `longitude`                | `longitude`                   | 经度               | `number`     | `undefined` |
+| `markers`                  | --                            | 标记点              | `marker[]`   | `undefined` |
+| `maxScale`                 | `max-scale`                   | 最大缩放级别           | `number`     | `undefined` |
+| `minScale`                 | `min-scale`                   | 最小缩放级别           | `number`     | `undefined` |
+| `polygons`                 | --                            | 多边形（参数问题）        | `polygon[]`  | `undefined` |
+| `polyline`                 | --                            | 路线(问题)           | `polyline[]` | `undefined` |
+| `rotate`                   | `rotate`                      | 旋转               | `number`     | `undefined` |
+| `scale`                    | `scale`                       | 缩放级别             | `number`     | `undefined` |
+| `showCompass`              | `show-compass`                | 指南针              | `boolean`    | `undefined` |
+| `showScale`                | `show-scale`                  | 比例尺              | `boolean`    | `undefined` |
+| `skew`                     | `skew`                        | 倾斜               | `number`     | `undefined` |
+| `subkey`                   | `subkey`                      | 个性化地图】使用的key     | `string`     | `undefined` |
+| `width`                    | `width`                       | 添加宽度属性           | `string`     | `'100%'`    |
+
+
+## Events
+
+| Event | Description | Type               |
+| ----- | ----------- | ------------------ |
+| `tap` |             | `CustomEvent<any>` |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/taro-components/src/components/swiper/readme.md b/packages/taro-components/src/components/swiper/readme.md
index 575104af95c1..71ce279e6ecb 100644
--- a/packages/taro-components/src/components/swiper/readme.md
+++ b/packages/taro-components/src/components/swiper/readme.md
@@ -22,10 +22,9 @@
 
 ## Properties
 
-| Property | Attribute | Description | Type      | Default     |
-| -------- | --------- | ----------- | --------- | ----------- |
-| `deep`   | `deep`    |             | `boolean` | `false`     |
-| `itemId` | `item-id` |             | `string`  | `undefined` |
+| Property | Attribute | Description | Type     | Default     |
+| -------- | --------- | ----------- | -------- | ----------- |
+| `itemId` | `item-id` |             | `string` | `undefined` |
 
 
 ----------------------------------------------
diff --git a/packages/taro-components/src/components/swiper/style/index.scss b/packages/taro-components/src/components/swiper/style/index.scss
index b0c5b2179951..62f92378582f 100644
--- a/packages/taro-components/src/components/swiper/style/index.scss
+++ b/packages/taro-components/src/components/swiper/style/index.scss
@@ -1,4 +1,3 @@
-@import "~swiper/swiper.min.css";
 @import "~swiper/swiper-bundle.min.css";
 
 taro-swiper-core {
@@ -8,18 +7,8 @@ taro-swiper-core {
   .swiper {
     &-container {
       height: 100%;
-    }
-
-    &-pagination {
-      font-size: 0;
-
-      &.swiper-pagination-bullet {
-        opacity: 1;
-      }
-
-      &.swiper-pagination-hidden {
-        display: none;
-      }
+      position: relative;
+      overflow: visible;
     }
   }
 }
diff --git a/packages/taro-components/src/components/swiper/swiper-item.tsx b/packages/taro-components/src/components/swiper/swiper-item.tsx
index 10b2dcfe5268..edf1bcdb538a 100644
--- a/packages/taro-components/src/components/swiper/swiper-item.tsx
+++ b/packages/taro-components/src/components/swiper/swiper-item.tsx
@@ -1,70 +1,29 @@
-import { Component, ComponentInterface, Element, Host, h, Prop } from '@stencil/core'
+import { Component, ComponentInterface, Host, h, Element, Prop } from '@stencil/core'
 
-const nativeCloneNode = Node.prototype.cloneNode
+import { handleStencilNodes } from '../../utils'
+import classNames from 'classnames'
 
 @Component({
   tag: 'taro-swiper-item-core'
 })
 export class SwiperItem implements ComponentInterface {
   @Element() el: HTMLElement
-
   @Prop() itemId: string
-  @Prop() deep: boolean = false
-
-  handleCloneNode (node: Node, deep: boolean) {
-    const clonedNode = nativeCloneNode.call(node, false)
-    const srcChildNodes = this.handleChildNodes(node)
-
-    if (deep) {
-      for (let i = 0; i < srcChildNodes.length; i++) {
-        const srcNode: Node = srcChildNodes[i]
-        if (!srcNode) break
-        let srcDeep: boolean = deep
-        if (srcNode.nodeType !== 2 && srcNode.nodeType !== 8) {
-          // Note: 没有引用节点（s-cr[reference comment]）的情况下，不复制子节点避免冗余（例如：Image 组件）
-          if (this.deep !== true && !srcNode['s-cr']) {
-            srcDeep = false
-          }
-          const childClone = this.handleCloneNode(srcNode, srcDeep)
-          clonedNode.appendChild(childClone)
-        }
-      }
-    }
-
-    return clonedNode
-  }
-
-  handleChildNodes (node: Node) {
-    const childNodes = node.childNodes
-
-    // check if element is stencil element without shadow dom
-    // and then detect elements that were slotted into the element
-    if (node['s-sc']) {
-      const result: any[] = []
-
-      for (let i = 0; i < childNodes.length; i++) {
-        const slot = childNodes[i]['s-nr']
-
-        if (slot) {
-          result.push(slot)
-        }
-      }
-
-      return result
-    }
 
-    return Array.from(childNodes)
+  //Note: 由于 swiper.js 会通过子元素中的 class 来判断是否为 swiper-slide，所以这里需要在 connectedCallback 中添加 swiper-slide 类名
+  connectedCallback() {
+    this.el.className = classNames(this.el.className, 'swiper-slide')
   }
 
   componentDidRender () {
-    this.el.cloneNode = (deep = false) => {
-      return this.handleCloneNode(this.el, deep)
-    }
+    handleStencilNodes(this.el)
   }
 
   render () {
     return (
-      <Host class='swiper-slide' item-id={this.itemId} />
+      <Host item-id={this.itemId}>
+        <slot></slot>
+      </Host>
     )
   }
 }
diff --git a/packages/taro-components/src/components/swiper/swiper.tsx b/packages/taro-components/src/components/swiper/swiper.tsx
index 9655162ae9e4..0da251e53d48 100644
--- a/packages/taro-components/src/components/swiper/swiper.tsx
+++ b/packages/taro-components/src/components/swiper/swiper.tsx
@@ -1,12 +1,12 @@
-import { Component, h, ComponentInterface, Prop, Event, EventEmitter, Watch, Host, Element, State } from '@stencil/core'
-import classNames from 'classnames'
-import type ISwiper from 'swiper'
-import SwiperJS from 'swiper/swiper-bundle.esm.js'
+import { Component, h, ComponentInterface, Prop, Event, EventEmitter, Host, Element, State, Watch } from '@stencil/core'
+import SwiperJS from 'swiper/bundle'
 
 import { debounce } from '../../utils'
+import type ISwiper from 'swiper'
 
 let INSTANCE_ID = 0
-
+const ONE_ADDITIONAL_SLIDES_THRESHOLD = 5
+const TWO_ADDITIONAL_SLIDES_THRESHOLD = 7
 @Component({
   tag: 'taro-swiper-core',
   styleUrls: [
@@ -16,6 +16,10 @@ let INSTANCE_ID = 0
 export class Swiper implements ComponentInterface {
   #id = INSTANCE_ID++
   #source = ''
+  #swiperResetting = false
+  // dom 变化是否由外部引起，因为 swiper 的循环模式也会引起 dom 的变化。如果不是由外部引起的 dom 变化，就不需要重新初始化 swiper
+  #domChangeByOutSide = false
+  #lastSwiperActiveIndex = 0
 
   @Element() el: HTMLElement
   @State() swiperWrapper: HTMLElement | null
@@ -96,6 +100,11 @@ export class Swiper implements ComponentInterface {
    */
   @Prop() zoom = false
 
+  /**
+   * swiper11 相关的动效参数，具体见文档 https://swiperjs.com/swiper-api#parameters
+  */
+  @Prop() effectsProps: Record<string, any> = {}
+
   @Event({
     eventName: 'change'
   }) onChange: EventEmitter
@@ -106,15 +115,16 @@ export class Swiper implements ComponentInterface {
 
   @Watch('current')
   watchCurrent (newVal) {
-    if (this.currentItemId || !this.isWillLoadCalled) return
-
+    if (this.currentItemId || !this.isWillLoadCalled || !this.swiper) return
     const n = parseInt(newVal, 10)
-    if (isNaN(n)) return
-
+    if (isNaN(n) || n === this.swiper.realIndex) return
+    this.#source = ''
     if (this.circular) {
-      if (!this.swiper.isBeginning && !this.swiper.isEnd) {
-        this.swiper.slideToLoop(n) // 更新下标
-      }
+      this.swiper.slideToLoop(n) // 更新下标
+      this.autoplay && this.swiper.autoplay.pause()
+      // @ts-ignore
+      this.swiper.loopFix()
+      this.autoplay && this.swiper.autoplay.start()
     } else {
       this.swiper.slideTo(n) // 更新下标
     }
@@ -122,18 +132,26 @@ export class Swiper implements ComponentInterface {
 
   @Watch('currentItemId')
   watchCurrentItemId (newVal) {
-    const wrapper = this.swiper.$wrapperEl?.[0]
+    if (!this.swiperWrapper || !this.isWillLoadCalled) return
+
     let itemIdIndex = 0
-    wrapper.querySelectorAll('taro-swiper-item-core:not(.swiper-slide-duplicate)').forEach((swiperItem, index) => {
-      // @ts-ignore
-      if (swiperItem.itemId && swiperItem.itemId === newVal) {
-        itemIdIndex = index
+    this.getSlidersList().forEach((swiperItem, index) => {
+      const itemId = swiperItem.getAttribute('item-id')
+      if (itemId === newVal) {
+        if (this.circular) {
+          itemIdIndex = Number(swiperItem.getAttribute('data-swiper-slide-index'))
+        } else {
+          itemIdIndex = index
+        }
       }
     })
+    if(itemIdIndex === this.swiper.realIndex) return // 无需更新
+    this.#source = ''
     if (this.circular) {
-      if (!this.swiper.isBeginning && !this.swiper.isEnd) {
-        this.swiper.slideToLoop(itemIdIndex) // 更新下标
-      }
+      this.swiper.slideToLoop(itemIdIndex) // 更新下标
+      // @ts-ignore
+      this.swiper.loopFix()
+      this.autoplay && this.swiper.autoplay.start()
     } else {
       this.swiper.slideTo(itemIdIndex) // 更新下标
     }
@@ -163,13 +181,13 @@ export class Swiper implements ComponentInterface {
 
   @Watch('duration')
   watchDuration (newVal) {
-    if (!this.isWillLoadCalled) return
+    if (!this.swiper || !this.isWillLoadCalled) return
     this.swiper.params.speed = newVal
   }
 
   @Watch('interval')
   watchInterval (newVal) {
-    if (!this.isWillLoadCalled) return
+    if (!this.swiper || !this.isWillLoadCalled) return
 
     if (typeof this.swiper.params.autoplay === 'object') {
       this.swiper.params.autoplay.delay = newVal
@@ -178,44 +196,72 @@ export class Swiper implements ComponentInterface {
 
   @Watch('swiperWrapper')
   watchSwiperWrapper (newVal?: HTMLElement) {
-    if (!this.isWillLoadCalled) return
+    if (!this.isWillLoadCalled || !this.swiper) return
     if (!newVal) return
+    const beforeDomOperation = () => {
+      this.#domChangeByOutSide = true
+      // 如果是由于外部子节点的变化引起的 dom 变化，需要重新初始化 swiper。
+      // 在初dom操作之前，需要调用 loopDestroy，把子节点的顺序恢复
+      this.swiper.loopDestroy()
+      this.swiper.params.loop = false
+    }
     this.el.appendChild = <T extends Node>(newChild: T): T => {
+      this.#swiperResetting = true
+      if(!this.#domChangeByOutSide && this.circular) {
+        beforeDomOperation()
+      }
       return newVal.appendChild(newChild)
     }
     this.el.insertBefore = <T extends Node>(newChild: T, refChild: Node | null): T => {
+      this.#swiperResetting = true
+      if(!this.#domChangeByOutSide && this.circular) {
+        beforeDomOperation()
+      }
       return newVal.insertBefore(newChild, refChild)
     }
     this.el.replaceChild = <T extends Node>(newChild: Node, oldChild: T): T => {
+      this.#swiperResetting = true
+      if(!this.#domChangeByOutSide && this.circular) {
+        beforeDomOperation()
+      }
       return newVal.replaceChild(newChild, oldChild)
     }
     this.el.removeChild = <T extends Node>(oldChild: T): T => {
+      this.#swiperResetting = true
+      if(!this.#domChangeByOutSide && this.circular) {
+        beforeDomOperation()
+      }
       return newVal.removeChild(oldChild)
     }
-    this.el.addEventListener('DOMNodeInserted', this.handleSwiperSizeDebounce)
-    this.el.addEventListener('DOMNodeRemoved', this.handleSwiperSizeDebounce)
-    this.el.addEventListener('MutationObserver', this.handleSwiperSizeDebounce)
   }
 
+  handleSwiperSizeDebounce = debounce(() => {
+    if (!this.swiper || !this.isWillLoadCalled) return
+    if(this.circular) {
+      if(this.#domChangeByOutSide) {
+        this.reset()
+        this.#domChangeByOutSide = false
+        this.#swiperResetting = false
+      }
+    } else {
+      this.swiper.update()
+      this.#swiperResetting = false
+    }
+  }, 50)
+
   @Watch("circular")
   watchCircular () {
-    if (this.swiper) {
-      this.swiper.destroy()
-      this.handleInit()
-    }
+    if (!this.swiper || !this.isWillLoadCalled) return
+    this.reset()
   }
 
   @Watch("displayMultipleItems")
   watchDisplayMultipleItems () {
-    if (this.swiper) {
-      this.swiper.destroy()
-      this.handleInit()
-    }
+    if (!this.swiper || !this.isWillLoadCalled) return
+    this.reset()
   }
 
   @State() observer: MutationObserver
-  @State() observerFirst: MutationObserver
-  @State() observerLast: MutationObserver
 
   componentWillLoad () {
     this.isWillLoadCalled = true
@@ -223,79 +269,18 @@ export class Swiper implements ComponentInterface {
 
   componentDidLoad () {
     this.handleInit()
-    if (!this.swiper || !this.circular) return
-
-    const wrapper = this.swiper.$wrapperEl?.[0]
-    this.observer = new MutationObserver(this.handleSwiperLoopListen)
-
-    this.observer.observe(wrapper, {
+    if (!this.swiper || !this.swiperWrapper) return
+    this.observer = new MutationObserver(this.handleSwiperSizeDebounce)
+    this.observer.observe(this.swiperWrapper as Node, {
       childList: true
     })
   }
 
-  componentWillUpdate () {
-    if (!this.swiper) return
-    if (this.autoplay && !this.swiper.autoplay?.running) {
-      this.swiper.autoplay?.start()
-    }
-    if (this.swiper.$el) {
-      this.swiper.update() // 更新子元素
-    }
-  }
-
-  componentDidRender () {
-    this.handleSwiperLoop()
-  }
-
   disconnectedCallback () {
-    this.el.removeEventListener('DOMNodeInserted', this.handleSwiperSizeDebounce)
-    this.el.removeEventListener('DOMNodeRemoved', this.handleSwiperSizeDebounce)
-    this.el.removeEventListener('MutationObserver', this.handleSwiperSizeDebounce)
-    this.observer?.disconnect?.()
-    this.observerFirst?.disconnect?.()
-    this.observerLast?.disconnect?.()
+    this.observer?.disconnect()
   }
 
-  handleSwiperLoopListen = () => {
-    this.observerFirst?.disconnect && this.observerFirst.disconnect()
-    this.observerLast?.disconnect && this.observerLast.disconnect()
-    this.observerFirst = new MutationObserver(this.handleSwiperLoopDebounce)
-    this.observerLast = new MutationObserver(this.handleSwiperLoopDebounce)
-    const wrapper = this.swiper.$wrapperEl?.[0]
-    const list = wrapper.querySelectorAll('taro-swiper-item-core:not(.swiper-slide-duplicate)')
-    if (list.length >= 1) {
-      this.observerFirst.observe(list[0], {
-        characterData: true
-      })
-    } else if (list.length >= 2) {
-      this.observerLast.observe(list[list.length - 1], {
-        characterData: true
-      })
-    }
-  }
-
-  handleSwiperLoop = () => {
-    if (!this.swiper || !this.circular) return
-    const swiper = this.swiper as any // Note: loop 相关的方法 swiper 未声明
-    const duplicates = this.swiperWrapper?.querySelectorAll('.swiper-slide-duplicate') || []
-    if (duplicates.length < 2) {
-      // Note: 循环模式下，但是前后垫片未注入
-      swiper.loopDestroy?.()
-      swiper.loopCreate?.()
-    } else {
-      swiper.loopFix?.()
-    }
-  }
-
-  handleSwiperLoopDebounce = debounce(this.handleSwiperLoop, 50)
-
-  handleSwiperSizeDebounce = debounce(() => {
-    if (this.swiper && this.swiper.$wrapperEl && !this.circular) {
-      this.swiper.updateSlides()
-    }
-  }, 50)
-
-  handleInit () {
+  handleInit (reset = false) {
     const {
       autoplay,
       circular,
@@ -304,81 +289,87 @@ export class Swiper implements ComponentInterface {
       displayMultipleItems,
       duration,
       interval,
+      effectsProps,
       vertical
     } = this
-    let initialSlide = circular ? current + 1 : current
-    if (currentItemId) {
-      let itemIdIndex = 0
-      this.el.querySelectorAll('taro-swiper-item-core:not(.swiper-slide-duplicate)').forEach((swiperItem, index) => {
-        // @ts-ignore
-        if (swiperItem.itemId && swiperItem.itemId === currentItemId) {
-          itemIdIndex = index
-        }
-      })
-      initialSlide = circular ? itemIdIndex + 1 : itemIdIndex
+    let initialSlide = current
+    if (reset) {
+      initialSlide = this.#lastSwiperActiveIndex
+    } else {
+      if (currentItemId) {
+        let itemIdIndex = 0
+        this.getSlidersList().forEach((swiperItem, index) => {
+          // @ts-ignore
+          if (swiperItem.itemId && swiperItem.itemId === currentItemId) {
+            itemIdIndex = index
+          }
+        })
+        initialSlide = itemIdIndex
+      }
     }
+    const loopAdditionalSlides = this.getLoopAdditionalSlides()
+    const centeredSlides = displayMultipleItems === 1
+    const slidesPerView = displayMultipleItems === 1 ? 'auto' : displayMultipleItems
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const that = this
-
     const options: any = {
       pagination: { el: `.taro-swiper-${this.#id} > .swiper-container > .swiper-pagination` },
       direction: vertical ? 'vertical' : 'horizontal',
       loop: circular,
-      slidesPerView: displayMultipleItems,
+      slidesPerView: slidesPerView,
       initialSlide: initialSlide,
+      loopAdditionalSlides: loopAdditionalSlides,
       speed: duration,
-      observer: true,
       observeParents: true,
+      observer: true,
+      centeredSlides: centeredSlides,
       zoom: this.zoom,
+      ...effectsProps,
       on: {
-        slideTo () {
-          that.current = this.realIndex
-        },
-        // Note: slideChange 事件在 swiper.slideTo 改写 current 时不触发，因此用 slideChangeTransitionEnd 事件代替
-        slideChangeTransitionEnd () {
-          /** Note: 此处不能使用 slideChangeTransitionStart 事件
-           * - 因为在它触发时 swiper 各个参数并未准备好，将会导致错误的事件抛出；
-           * - 同时抛出 change 事件会导致 current 监听被打乱 swiper 的生命周期；
-           * - 模式与 slideTo 结合时，会导致动画会被中断、slider 展示不完整或衔接模式错误等问题。
-           */
-          if (circular) {
-            if (this.isBeginning || this.isEnd) {
-              this.slideToLoop(this.realIndex, 0) // 更新下标
-              return
-            }
-          }
-          that.onChange.emit({
+        changeTransitionEnd(e) {
+          if(that.#swiperResetting || that.#lastSwiperActiveIndex === this.realIndex) return
+          that.#lastSwiperActiveIndex = this.realIndex
+          that.getNeedFixLoop() && e.loopFix()
+          that.autoplay && e.autoplay.start()
+          const currentItemId = that.getCurrentItemId(e)
+          that.onAnimationFinish.emit({
             current: this.realIndex,
             source: that.#source,
+            currentItemId,
           })
+          that.#source = 'autoplay'
         },
-        touchEnd: () => {
+        touchMove () {
           that.#source = 'touch'
         },
-        autoplay() {
-          that.#source = 'autoplay'
-        },
-        transitionEnd () {
-          setTimeout(() => {
-            that.#source = ''
-          })
-          that.onAnimationFinish.emit({
+        slideChange(e) {
+          if(that.#swiperResetting || that.#lastSwiperActiveIndex === this.realIndex) return
+          const currentItemId = that.getCurrentItemId(e)
+          that.onChange.emit({
             current: this.realIndex,
             source: that.#source,
+            currentItemId,
           })
         },
-        observerUpdate (_swiper: ISwiper, e) {
-          const target = e.target
-          const className = target && typeof target.className === 'string' ? target.className : ''
-          if (className.includes('taro_page') && target.style.display !== 'none') {
-            if (that.autoplay && target.contains(_swiper.$el[0])) {
-              if (that.circular) {
-                _swiper.slideToLoop(this.realIndex, 0) // 更新下标
-              } else {
-                _swiper.slideTo(this.realIndex)
-              }
-            }
-          }
+        init: (e) => {
+          that.getNeedFixLoop() && e.loopFix();
+          that.autoplay && e.autoplay.start()
+        },
+        touchEnd: (e) => {
+          that.#source = 'touch'
+          that.autoplay && e.autoplay.start()
+        },
+        touchStart: (e) => {
+          that.#source = 'touch'
+          that.autoplay && e.autoplay.pause()
+        },
+        autoplay(e) {
+          // Note: 修复 autoplay 时，切换到其他页面再切回来，autoplay 会停止的问题
+          // autoplay 会调用 slideTo 方法，里面会判断是否 animating，如果 animating 为 true，就会被 return
+          // 参考源码：https://github.com/nolimits4web/swiper/blob/v11.1.0/src/core/slide/slideTo.mjs#27 27行
+          // https://github.com/nolimits4web/swiper/blob/v11.1.0/src/modules/autoplay/autoplay.mjs
+          e.animating = false;
+          that.#source = 'autoplay'
         }
       }
     }
@@ -390,9 +381,72 @@ export class Swiper implements ComponentInterface {
         disableOnInteraction: false
       }
     }
-
     this.swiper = new SwiperJS(`.taro-swiper-${this.#id} > .swiper-container`, options)
-    this.swiperWrapper = this.el.querySelector(`.taro-swiper-${this.#id} > .swiper-container > .swiper-wrapper`)
+
+    // Note: 这里是拦截了 swiper 的 minTranslate 和 maxTranslate 方法，手动修复了 loop 模式下的 margin 问题
+    // 因为这两个属性会影响滑动到哪个位置进行 fixloop
+    // 可参考源码：https://github.com/nolimits4web/swiper/blob/v11.1.0/src/core/events/onTouchMove.mjs
+    // https://github.com/nolimits4web/swiper/blob/v11.1.0/src/core/loop/loopFix.mjs
+    if(this.getNeedFixLoop()) {
+      // @ts-ignore
+      const minTranslate = this.swiper.minTranslate.bind(this.swiper);
+      //@ts-ignore
+      const maxTranslate = this.swiper.maxTranslate.bind(this.swiper);
+      if(centeredSlides && this.getSlidersList().length < 4) {
+        //@ts-ignore
+        this.swiper.minTranslate = ()=> minTranslate() + this.parseMargin()[1];
+        //@ts-ignore
+        this.swiper.maxTranslate = ()=> maxTranslate() - this.parseMargin()[0];
+      } else {
+        //@ts-ignore
+        this.swiper.minTranslate = ()=> minTranslate() - this.parseMargin()[0];
+        //@ts-ignore
+        this.swiper.maxTranslate = ()=> maxTranslate() + this.parseMargin()[1];
+      }
+    }
+
+    this.swiperWrapper = this.swiper.wrapperEl
+  }
+
+  reset = () => {
+    this.#swiperResetting = true
+    this.#lastSwiperActiveIndex = this.swiper.realIndex
+    this.swiper.destroy()
+    this.handleInit(true)
+    this.#swiperResetting = false
+  }
+
+  // 下面为方法函数
+
+  getSlidersList = () => this.el.querySelectorAll('taro-swiper-item-core:not(.swiper-slide-duplicate)') || []
+
+  // 获取是否需要手动修复 loop 的条件
+  getNeedFixLoop = () => {
+    const margins = this.parseMargin()
+    const hasMargin = margins.filter(Boolean).length > 0
+    return this.circular && hasMargin
+  }
+
+  // Note: loop 的时候添加 additionalSlides 可以避免循环的时候由于 loopFix 不及时，出现空白的问题。但是并不是 additionalSlides 越多越好，因为 additionalSlides 越多，如果 swiper-item 的数量不够，会导致出现 bug。
+  // 目前的策略是 swiper-item 的数量小于等于 5 时，不添加 additionalSlides，大于 5 小于等于 7 时，添加 1 个 additionalSlides，大于 7 时，添加 2 个 additionalSlides。
+  getLoopAdditionalSlides():number{
+    const slidersLength = (this.getSlidersList()).length
+    if(!this.el || !this.getNeedFixLoop() || slidersLength < ONE_ADDITIONAL_SLIDES_THRESHOLD) return 0
+    if(slidersLength <= TWO_ADDITIONAL_SLIDES_THRESHOLD) return 1
+    return 2
+  }
+
+  parseMargin = () => {
+    const [, previousMargin] = /^(\d+)px/.exec(this.previousMargin) || []
+    const [, nextMargin] = /^(\d+)px/.exec(this.nextMargin) || []
+    return [parseInt(previousMargin) || 0, parseInt(nextMargin) || 0]
+  }
+
+  getCurrentItemId (swiper: ISwiper) {
+    const slides = swiper.slides
+    const activeIndex = swiper.activeIndex
+    const currentSlide = slides[activeIndex]
+    return currentSlide.getAttribute('item-id')
   }
 
   render () {
@@ -403,45 +457,44 @@ export class Swiper implements ComponentInterface {
       indicatorActiveColor
     } = this
 
-    const hostStyle: Record<string, string> = { overflow: 'hidden' }
-    const style: Record<string, string> = { overflow: 'visible' }
+    const [pM, nM] = this.parseMargin()
+    const hasMargin = pM || nM
+    const hostStyle: Record<string, string> = {}
+    if(hasMargin) {
+      hostStyle.overflow = 'hidden'
+    }
     if (this.full) {
       hostStyle.height = '100%'
-      style.height = '100%'
-    }
-
-    const [, previousMargin] = /^(\d+)px/.exec(this.previousMargin) || []
-    const [, nextMargin] = /^(\d+)px/.exec(this.nextMargin) || []
-    const pM = parseInt(previousMargin) || 0
-    const nM = parseInt(nextMargin) || 0
-    if (vertical) {
-      style.marginTop = `${pM}px`
-      style.marginBottom = `${nM}px`
-    } else {
-      style.marginRight = `${nM}px`
-      style.marginLeft = `${pM}px`
     }
+   
+    const swiperContainerStyleList: string [] = [
+      'overflow: visible;',
+      vertical ? `margin-top: ${pM}px; margin-bottom: ${nM}px;` : `margin-right: ${nM}px; margin-left: ${pM}px;`,
+      this.full ? 'height: 100%;' : '',
+    ]
+
+    const swiperPaginationStyleList: string [] = [
+      indicatorDots ? 'opacity: 1;' : 'display: none;',
+      'font-size: 0;'
+    ]
 
     return (
       <Host class={`taro-swiper-${this.#id}`} style={hostStyle}>
-        <div class='swiper-container' style={style}>
+        <div class='swiper-container'>
           <style type='text/css'>
             {`
               .taro-swiper-${this.#id} > .swiper-container > .swiper-pagination > .swiper-pagination-bullet { background: ${indicatorColor} }
               .taro-swiper-${this.#id} > .swiper-container > .swiper-pagination > .swiper-pagination-bullet-active { background: ${indicatorActiveColor} }
+              .taro-swiper-${this.#id} > .swiper-container { ${swiperContainerStyleList.join('')} }
+              .taro-swiper-${this.#id} > .swiper-container > .swiper-pagination { ${swiperPaginationStyleList.join('')} }
             `}
           </style>
           <div class='swiper-wrapper'>
             <slot />
           </div>
-          <div class={classNames('swiper-pagination',
-            {
-              'swiper-pagination-hidden': !indicatorDots,
-              'swiper-pagination-bullets': indicatorDots
-            }
-          )} />
+          <div class='swiper-pagination' />
         </div>
       </Host>
     )
   }
-}
+}
\ No newline at end of file
diff --git a/packages/taro-components/types/Swiper.d.ts b/packages/taro-components/types/Swiper.d.ts
index d3a19e585f34..d4783a93c1e2 100644
--- a/packages/taro-components/types/Swiper.d.ts
+++ b/packages/taro-components/types/Swiper.d.ts
@@ -151,6 +151,10 @@ interface SwiperProps extends StandardProps {
    * @default 0
    */
   cacheExtent?: number
+  /** swiper11 相关的动效参数，具体见文档 https://swiperjs.com/swiper-api#parameters
+   * @supported h5
+  */
+  effectsProps?: Record<string, any>
   /** current 改变时会触发 change 事件
    * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
    */
diff --git a/packages/taro-components/types/global.d.ts b/packages/taro-components/types/global.d.ts
new file mode 100644
index 000000000000..2760158fb402
--- /dev/null
+++ b/packages/taro-components/types/global.d.ts
@@ -0,0 +1,4 @@
+declare module 'swiper/bundle' {
+    import Swiper from 'swiper';
+    export = Swiper
+}
\ No newline at end of file
diff --git a/packages/taro-components/types/index.d.ts b/packages/taro-components/types/index.d.ts
index ac618d98119a..b9e401cbe090 100644
--- a/packages/taro-components/types/index.d.ts
+++ b/packages/taro-components/types/index.d.ts
@@ -15,6 +15,7 @@ export { ScrollView } from './ScrollView'
 export { Swiper } from './Swiper'
 export { SwiperItem } from './SwiperItem'
 export { View } from './View'
+export { AnimationView } from './AnimationView'
 
 /** 基础内容 */
 export { Icon } from './Icon'
@@ -59,20 +60,25 @@ export { NestedScrollBody } from './NestedScrollBody'
 export { FunctionalPageNavigator } from './FunctionalPageNavigator'
 export { Navigator } from './Navigator'
 export { NavigationBar } from './NavigationBar'
+export { Tabs } from './Tabs'
 // export { Tabbar } from './Tabbar'
 // export { TabbarItem } from './TabbarItem'
 
 /** 媒体组件 */
 export { Audio } from './Audio'
 export { Camera } from './Camera'
+export { ArCamera } from './ArCamera'
 export { ChannelLive } from './ChannelLive'
 export { ChannelVideo } from './ChannelVideo'
 export { Image } from './Image'
 export { LivePlayer } from './LivePlayer'
 export { LivePusher } from './LivePusher'
 export { Video } from './Video'
+export { AnimationVideo } from './AnimationVideo'
 export { VoipRoom } from './VoipRoom'
 export { Lottie } from './Lottie'
+export { RtcRoom } from './RtcRoom'
+export { RtcRoomItem } from './RtcRoomItem'
 
 /** 地图 */
 export { Map } from './Map'
@@ -82,15 +88,29 @@ export { Canvas } from './Canvas'
 
 /** 开放能力 */
 export { Ad } from './Ad'
+export { AwemeData } from './AwemeData'
 export { AdCustom } from './AdCustom'
 export { OfficialAccount } from './OfficialAccount'
 export { OpenData } from './OpenData'
 export { WebView } from './WebView'
+export { FollowSwan } from './FollowSwan'
+export { InlinePaymentPanel } from './InlinePaymentPanel'
+export { Lifestyle } from './Lifestyle'
+export { Login } from './Login'
 
 /** 配置节点 */
 export { PageMeta } from './PageMeta'
 
+/** 内容服务组件 **/
+export { CommentDetail } from './CommentDetail'
+export { CommentList } from './CommentList'
+export { Like } from './Like'
+
+/** 客服能力 **/
+export { ContactButton } from './ContactButton'
+
 export { CustomWrapper } from './CustomWrapper'
 export { Slot } from './Slot'
 export { NativeSlot } from './NativeSlot'
 export { Script } from './Script'
+export { PullToRefresh } from './PullToRefresh'
\ No newline at end of file
diff --git a/packages/taro-extend/package.json b/packages/taro-extend/package.json
index 9dc355cfa8a8..7b1cefbe53e3 100644
--- a/packages/taro-extend/package.json
+++ b/packages/taro-extend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/extend",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Taro extend functionality",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-framework-react/package.json b/packages/taro-framework-react/package.json
index a3ef57a6a1de..ca31453b3453 100644
--- a/packages/taro-framework-react/package.json
+++ b/packages/taro-framework-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/plugin-framework-react",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "React/Preact 框架插件",
   "author": "O2Team",
   "homepage": "https://github.com/nervjs/taro",
diff --git a/packages/taro-framework-solid/package.json b/packages/taro-framework-solid/package.json
index 6ce7f5146dde..702decea4d1a 100644
--- a/packages/taro-framework-solid/package.json
+++ b/packages/taro-framework-solid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/plugin-framework-solid",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Solid 框架插件",
   "author": "drchan",
   "homepage": "https://github.com/nervjs/taro",
diff --git a/packages/taro-framework-vue3/package.json b/packages/taro-framework-vue3/package.json
index e217afe5cff2..d65078a1e1bb 100644
--- a/packages/taro-framework-vue3/package.json
+++ b/packages/taro-framework-vue3/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/plugin-framework-vue3",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Vue3 框架插件",
   "author": "O2Team",
   "homepage": "https://github.com/nervjs/taro",
diff --git a/packages/taro-h5/__mocks__/swiper/bundle.ts b/packages/taro-h5/__mocks__/swiper/bundle.ts
new file mode 100644
index 000000000000..62640385c7c7
--- /dev/null
+++ b/packages/taro-h5/__mocks__/swiper/bundle.ts
@@ -0,0 +1,181 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { A11yMethods } from 'swiper/types/modules/a11y'
+import { AutoplayMethods } from 'swiper/types/modules/autoplay'
+import { ControllerMethods } from 'swiper/types/modules/controller'
+import { CardsEffectMethods } from 'swiper/types/modules/effect-cards'
+import { CoverflowEffectMethods } from 'swiper/types/modules/effect-coverflow'
+import { CreativeEffectMethods } from 'swiper/types/modules/effect-creative'
+import { CubeEffectMethods } from 'swiper/types/modules/effect-cube'
+import { FadeEffectMethods } from 'swiper/types/modules/effect-fade'
+import { FlipEffectMethods } from 'swiper/types/modules/effect-flip'
+import { FreeModeMethods } from 'swiper/types/modules/free-mode'
+import { HashNavigationMethods } from 'swiper/types/modules/hash-navigation'
+import { HistoryMethods } from 'swiper/types/modules/history'
+import { KeyboardMethods } from 'swiper/types/modules/keyboard'
+import { MousewheelMethods } from 'swiper/types/modules/mousewheel'
+import { NavigationMethods } from 'swiper/types/modules/navigation'
+import { PaginationMethods } from 'swiper/types/modules/pagination'
+import { ParallaxMethods } from 'swiper/types/modules/parallax'
+import { ScrollbarMethods } from 'swiper/types/modules/scrollbar'
+import { ThumbsMethods } from 'swiper/types/modules/thumbs'
+import { VirtualMethods } from 'swiper/types/modules/virtual'
+import { ZoomMethods } from 'swiper/types/modules/zoom'
+import { SwiperEvents } from 'swiper/types/swiper-events'
+import { SwiperOptions } from 'swiper/types/swiper-options'
+
+import type ISwiper from 'swiper/types/swiper-class'
+
+export default class Swiper implements ISwiper {
+  originalParams: SwiperOptions
+  loopedSlides: number | null
+  snapIndex: number
+  snapGrid: number[]
+  isLocked: boolean
+  swipeDirection: 'next' | 'prev'
+  slidesPerViewDynamic (): number {
+    throw new Error('Method not implemented.')
+  }
+
+  changeLanguageDirection (direction: 'rtl' | 'ltr'): void {
+    throw new Error('Method not implemented.')
+  }
+
+  loopCreate (): void {
+    throw new Error('Method not implemented.')
+  }
+
+  loopDestroy (): void {
+    throw new Error('Method not implemented.')
+  }
+
+  init (el?: HTMLElement | undefined): ISwiper {
+    throw new Error('Method not implemented.')
+  }
+
+  creativeEffect: CreativeEffectMethods
+  cardsEffect: CardsEffectMethods
+  freeMode: FreeModeMethods
+  params: SwiperOptions
+  el: HTMLElement
+  wrapperEl: HTMLElement
+  slides
+  width: number
+  height: number
+  translate: number
+  progress: number
+  activeIndex: number
+  realIndex: number
+  previousIndex: number
+  isBeginning: boolean
+  isEnd: boolean
+  animating: boolean
+  touches: { startX: number, startY: number, currentX: number, currentY: number, diff: number }
+  clickedIndex: number
+  clickedSlide: HTMLElement
+  allowSlideNext: boolean
+  allowSlidePrev: boolean
+  allowTouchMove: boolean
+  rtlTranslate: boolean
+  disable (): void {}
+
+  enable (): void {}
+
+  setProgress (progress: number, speed?: number | undefined): void {}
+
+  slideNext (speed?: number | undefined, runCallbacks?: boolean | undefined): void {}
+
+  slidePrev (speed?: number | undefined, runCallbacks?: boolean | undefined): void {}
+
+  slideTo (index: number, speed?: number | undefined, runCallbacks?: boolean | undefined): void {}
+
+  slideToLoop (index: number, speed?: number | undefined, runCallbacks?: boolean | undefined): void {}
+
+  slideReset (speed?: number | undefined, runCallbacks?: boolean | undefined): void {}
+
+  slideToClosest (speed?: number | undefined, runCallbacks?: boolean | undefined): void {}
+
+  updateAutoHeight (speed?: number | undefined): void {}
+
+  update (): void {}
+
+  updateSize (): void {}
+
+  updateSlides (): void {}
+
+  updateProgress (): void {}
+
+  updateSlidesClasses (): void {}
+
+  changeDirection (direction?: 'horizontal' | 'vertical' | undefined, needUpdate?: boolean | undefined): void {}
+
+  detachEvents (): void {}
+
+  attachEvents (): void {}
+
+  destroy (deleteInstance?: boolean | undefined, cleanStyles?: boolean | undefined): void {}
+
+  appendSlide (slides: string | HTMLElement | string[] | HTMLElement[]): void {}
+
+  prependSlide (slides: string | HTMLElement | string[] | HTMLElement[]): void {}
+
+  addSlide (index: number, slides: string | HTMLElement | string[] | HTMLElement[]): void {}
+
+  removeSlide (slideIndex: number | number[]): void {}
+
+  removeAllSlides (): void {}
+
+  setTranslate (translate: any): void {}
+
+  getTranslate () {}
+
+  translateTo (translate: number, speed: number, runCallbacks?: boolean | undefined, translateBounds?: boolean | undefined) {}
+
+  unsetGrabCursor (): void {}
+
+  setGrabCursor (): void {}
+
+  onAny (handler: (eventName: string, ...args: any[]) => void): void {}
+
+  offAny (handler: (eventName: string, ...args: any[]) => void): void {}
+
+  isHorizontal (): boolean {
+    return false
+  }
+
+  getBreakpoint (breakpoints: { [width: number]: SwiperOptions, [ratio: string]: SwiperOptions } | undefined): string {
+    return ''
+  }
+
+  setBreakpoint (): void {}
+
+  currentBreakpoint: any
+  destroyed: boolean
+  modules: any[]
+  a11y: A11yMethods
+  autoplay: AutoplayMethods
+  controller: ControllerMethods
+  coverflowEffect: CoverflowEffectMethods
+  cubeEffect: CubeEffectMethods
+  fadeEffect: FadeEffectMethods
+  flipEffect: FlipEffectMethods
+  hashNavigation: HashNavigationMethods
+  history: HistoryMethods
+  keyboard: KeyboardMethods
+  mousewheel: MousewheelMethods
+  navigation: NavigationMethods
+  pagination: PaginationMethods
+  parallax: ParallaxMethods
+  scrollbar: ScrollbarMethods
+  thumbs: ThumbsMethods
+  virtual: VirtualMethods
+  zoom: ZoomMethods
+  on<E extends keyof SwiperEvents> (event: E, handler: SwiperEvents[E]): void {}
+
+  once<E extends keyof SwiperEvents> (event: E, handler: SwiperEvents[E]): void {}
+
+  off<E extends keyof SwiperEvents> (event: E, handler: SwiperEvents[E]): void;
+  off<E extends keyof SwiperEvents> (event: E): void;
+  off (event: unknown, handler?: unknown): void {}
+
+  emit<E extends keyof SwiperEvents> (event: E, ...args: any[]): void {}
+}
diff --git a/packages/taro-h5/package.json b/packages/taro-h5/package.json
index 8ef42baff9bc..04c64e99532a 100644
--- a/packages/taro-h5/package.json
+++ b/packages/taro-h5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/taro-h5",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Taro h5 framework",
   "browser": "dist/index.js",
   "main:h5": "dist/index.esm.js",
@@ -66,6 +66,7 @@
     "jest-transform-css": "^6.0.1",
     "mock-socket": "^7.1.0",
     "react": "^18.2.0",
+    "swiper": "11.1.0",
     "react-test-renderer": "^18.2.0",
     "rollup": "^3.29.4",
     "rollup-plugin-node-externals": "^5.0.0",
diff --git a/packages/taro-helper/package.json b/packages/taro-helper/package.json
index 485725c176e5..69e192eddeaf 100644
--- a/packages/taro-helper/package.json
+++ b/packages/taro-helper/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/helper",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Taro Helper",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-loader/package.json b/packages/taro-loader/package.json
index 6081182cf052..331be31b9228 100644
--- a/packages/taro-loader/package.json
+++ b/packages/taro-loader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/taro-loader",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Taro runner use webpack loader",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-platform-alipay/package.json b/packages/taro-platform-alipay/package.json
index 3658db9fb088..cff2b22e2f42 100644
--- a/packages/taro-platform-alipay/package.json
+++ b/packages/taro-platform-alipay/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/plugin-platform-alipay",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "支付宝小程序平台插件",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-platform-h5/package.json b/packages/taro-platform-h5/package.json
index 78c631cce27d..21f32bef2b6f 100644
--- a/packages/taro-platform-h5/package.json
+++ b/packages/taro-platform-h5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/plugin-platform-h5",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Web 端平台插件",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-platform-harmony-hybrid/package.json b/packages/taro-platform-harmony-hybrid/package.json
index f6ce980a2a0e..87096aa5a683 100644
--- a/packages/taro-platform-harmony-hybrid/package.json
+++ b/packages/taro-platform-harmony-hybrid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/plugin-platform-harmony-hybrid",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Harmony 端平台插件",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-platform-harmony-hybrid/src/components/react/index.ts b/packages/taro-platform-harmony-hybrid/src/components/react/index.ts
index 7e0723d1de60..9cccfd478a02 100644
--- a/packages/taro-platform-harmony-hybrid/src/components/react/index.ts
+++ b/packages/taro-platform-harmony-hybrid/src/components/react/index.ts
@@ -43,7 +43,7 @@ export { Navigator } from '@tarojs/components/lib/react'
 export { OfficialAccount } from '@tarojs/components/lib/react'
 export { OpenData } from '@tarojs/components/lib/react'
 export { PageMeta } from '@tarojs/components/lib/react'
-export { Picker, PickerGroup } from '@tarojs/components/lib/react'
+export { Picker } from '@tarojs/components/lib/react'
 export { PickerView, PickerViewColumn } from '@tarojs/components/lib/react'
 export { Progress } from '@tarojs/components/lib/react'
 export { PullToRefresh } from '@tarojs/components/lib/react'
@@ -56,11 +56,10 @@ export { Slider } from '@tarojs/components/lib/react'
 export { NativeSlot, Slot } from '@tarojs/components/lib/react'
 export { Swiper, SwiperItem } from '@tarojs/components/lib/react'
 export { Switch } from '@tarojs/components/lib/react'
-export { Tabbar, TabItem } from '@tarojs/components/lib/react'
 export { Tabs } from '@tarojs/components/lib/react'
 export { Text } from '@tarojs/components/lib/react'
 export { Textarea } from '@tarojs/components/lib/react'
-export { Video, VideoControl, VideoDanmu } from '@tarojs/components/lib/react'
+export { Video } from '@tarojs/components/lib/react'
 export { View } from '@tarojs/components/lib/react'
 export { VoipRoom } from '@tarojs/components/lib/react'
 export { WebView } from '@tarojs/components/lib/react'
diff --git a/packages/taro-platform-harmony-hybrid/src/components/vue3/index.ts b/packages/taro-platform-harmony-hybrid/src/components/vue3/index.ts
index d46811a5b4a5..2c59f0f9b404 100644
--- a/packages/taro-platform-harmony-hybrid/src/components/vue3/index.ts
+++ b/packages/taro-platform-harmony-hybrid/src/components/vue3/index.ts
@@ -42,7 +42,7 @@ export { Navigator } from '@tarojs/components/lib/vue3'
 export { OfficialAccount } from '@tarojs/components/lib/vue3'
 export { OpenData } from '@tarojs/components/lib/vue3'
 export { PageMeta } from '@tarojs/components/lib/vue3'
-export { Picker, PickerGroup } from '@tarojs/components/lib/vue3'
+export { Picker } from '@tarojs/components/lib/vue3'
 export { PickerView, PickerViewColumn } from '@tarojs/components/lib/vue3'
 export { Progress } from '@tarojs/components/lib/vue3'
 export { PullToRefresh } from '@tarojs/components/lib/vue3'
@@ -55,11 +55,11 @@ export { Slider } from '@tarojs/components/lib/vue3'
 export { NativeSlot, Slot } from '@tarojs/components/lib/vue3'
 export { Swiper, SwiperItem } from '@tarojs/components/lib/vue3'
 export { Switch } from '@tarojs/components/lib/vue3'
-export { Tabbar, TabItem } from '@tarojs/components/lib/vue3'
+// export { Tabbar, TabItem } from '@tarojs/components/lib/vue3'
 export { Tabs } from '@tarojs/components/lib/vue3'
 export { Text } from '@tarojs/components/lib/vue3'
 export { Textarea } from '@tarojs/components/lib/vue3'
-export { Video, VideoControl, VideoDanmu } from '@tarojs/components/lib/vue3'
+export { Video } from '@tarojs/components/lib/vue3'
 export { View } from '@tarojs/components/lib/vue3'
 export { VoipRoom } from '@tarojs/components/lib/vue3'
 export { WebView } from '@tarojs/components/lib/vue3'
diff --git a/packages/taro-platform-harmony-hybrid/types/component.d.ts b/packages/taro-platform-harmony-hybrid/types/component.d.ts
index 71b07c3852c5..08adf62ca2f7 100644
--- a/packages/taro-platform-harmony-hybrid/types/component.d.ts
+++ b/packages/taro-platform-harmony-hybrid/types/component.d.ts
@@ -4,3 +4,11 @@ declare module '@tarojs/components/dist/components' {
 
   export * from '@tarojs/components/dist/components'
 }
+
+declare module '@tarojs/components/lib/vue3' {
+  export * from '@tarojs/components'
+}
+
+declare module '@tarojs/components/lib/react' {
+  export * from '@tarojs/components'
+}
\ No newline at end of file
diff --git a/packages/taro-platform-harmony/package.json b/packages/taro-platform-harmony/package.json
index 0a7a8e1aec1e..97bc68cf1471 100644
--- a/packages/taro-platform-harmony/package.json
+++ b/packages/taro-platform-harmony/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/plugin-platform-harmony-ets",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "OpenHarmony & 鸿蒙系统插件",
   "author": "O2Team",
   "homepage": "https://gitee.com/openharmony-sig/taro",
diff --git a/packages/taro-platform-jd/package.json b/packages/taro-platform-jd/package.json
index 4fa116316823..76a2941a3c0d 100644
--- a/packages/taro-platform-jd/package.json
+++ b/packages/taro-platform-jd/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/plugin-platform-jd",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "京东小程序平台插件",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-platform-qq/package.json b/packages/taro-platform-qq/package.json
index 230de48696e6..92ebebb85367 100644
--- a/packages/taro-platform-qq/package.json
+++ b/packages/taro-platform-qq/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/plugin-platform-qq",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "QQ 小程序平台插件",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-platform-swan/package.json b/packages/taro-platform-swan/package.json
index 81b6c978a748..1792f7e988e4 100644
--- a/packages/taro-platform-swan/package.json
+++ b/packages/taro-platform-swan/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/plugin-platform-swan",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "百度小程序平台插件",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-platform-tt/package.json b/packages/taro-platform-tt/package.json
index 3006d6d04195..e9d6acef7cd7 100644
--- a/packages/taro-platform-tt/package.json
+++ b/packages/taro-platform-tt/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/plugin-platform-tt",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "头条小程序平台插件",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-platform-weapp/package.json b/packages/taro-platform-weapp/package.json
index 5ca14768ba8f..31dd6c0db8b3 100644
--- a/packages/taro-platform-weapp/package.json
+++ b/packages/taro-platform-weapp/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/plugin-platform-weapp",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "微信小程序平台插件",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-plugin-html/package.json b/packages/taro-plugin-html/package.json
index d36172cfe7a2..2064f2be69ce 100644
--- a/packages/taro-plugin-html/package.json
+++ b/packages/taro-plugin-html/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/plugin-html",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Taro 小程序端支持使用 HTML 标签的插件",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-plugin-http/package.json b/packages/taro-plugin-http/package.json
index ea4b3c2ce2d2..145648fa1155 100644
--- a/packages/taro-plugin-http/package.json
+++ b/packages/taro-plugin-http/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/plugin-http",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Taro 小程序端支持使用 web 请求 的插件",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-plugin-inject/package.json b/packages/taro-plugin-inject/package.json
index bebffa0d039a..7b2408b0bd62 100644
--- a/packages/taro-plugin-inject/package.json
+++ b/packages/taro-plugin-inject/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/plugin-inject",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Taro 小程序端平台中间层插件",
   "author": "O2Team",
   "homepage": "https://github.com/nervjs/taro",
diff --git a/packages/taro-plugin-mini-ci/package.json b/packages/taro-plugin-mini-ci/package.json
index e15f8022c202..9b6c0d44729b 100644
--- a/packages/taro-plugin-mini-ci/package.json
+++ b/packages/taro-plugin-mini-ci/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/plugin-mini-ci",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Taro 小程序端构建后支持CI（持续集成）的插件",
   "keywords": [
     "Taro",
diff --git a/packages/taro-plugin-react-devtools/package.json b/packages/taro-plugin-react-devtools/package.json
index 2258b4f6655e..7042ffda7d5f 100644
--- a/packages/taro-plugin-react-devtools/package.json
+++ b/packages/taro-plugin-react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/plugin-react-devtools",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Taro 小程序端支持使用 React DevTools 的插件",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-plugin-vue-devtools/package.json b/packages/taro-plugin-vue-devtools/package.json
index a29f2d415355..ff6061f15673 100644
--- a/packages/taro-plugin-vue-devtools/package.json
+++ b/packages/taro-plugin-vue-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/plugin-vue-devtools",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Taro 小程序端支持使用 Vue DevTools 的插件",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-react/package.json b/packages/taro-react/package.json
index 0305bb0c5221..59292931a792 100644
--- a/packages/taro-react/package.json
+++ b/packages/taro-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/react",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "like react-dom, but for mini apps.",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-rn-runner/package.json b/packages/taro-rn-runner/package.json
index 727de8f93b91..7b827799bd17 100644
--- a/packages/taro-rn-runner/package.json
+++ b/packages/taro-rn-runner/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/rn-runner",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "ReactNative build tool for taro",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-rn-style-transformer/package.json b/packages/taro-rn-style-transformer/package.json
index d4ac34fe2e3b..c4dae6cf2951 100644
--- a/packages/taro-rn-style-transformer/package.json
+++ b/packages/taro-rn-style-transformer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/rn-style-transformer",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "提供 Taro RN 统一处理样式文件能力",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-rn-supporter/package.json b/packages/taro-rn-supporter/package.json
index c8fad2ee1a53..2d7ba9fa618c 100644
--- a/packages/taro-rn-supporter/package.json
+++ b/packages/taro-rn-supporter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/rn-supporter",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Taro rn supporter",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-rn-transformer/package.json b/packages/taro-rn-transformer/package.json
index 6832b8f3adc3..c0dd30c50355 100644
--- a/packages/taro-rn-transformer/package.json
+++ b/packages/taro-rn-transformer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/rn-transformer",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Taro RN 入口文件处理",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-rn/package.json b/packages/taro-rn/package.json
index 529d12af4f6e..f0c19ba8b9f6 100644
--- a/packages/taro-rn/package.json
+++ b/packages/taro-rn/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/taro-rn",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Taro RN framework",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-router-rn/package.json b/packages/taro-router-rn/package.json
index 8c58a50f45dc..f2353a39f581 100644
--- a/packages/taro-router-rn/package.json
+++ b/packages/taro-router-rn/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/router-rn",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Taro-router-rn",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-router/package.json b/packages/taro-router/package.json
index 78d635346b3b..e9e2ea4abd19 100644
--- a/packages/taro-router/package.json
+++ b/packages/taro-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/router",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Taro-router",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-runner-utils/package.json b/packages/taro-runner-utils/package.json
index a6840623ea0d..d29f488ee6c1 100644
--- a/packages/taro-runner-utils/package.json
+++ b/packages/taro-runner-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/runner-utils",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Taro runner utilities.",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-runtime-rn/package.json b/packages/taro-runtime-rn/package.json
index 139ea92f697b..ac287a38fae3 100644
--- a/packages/taro-runtime-rn/package.json
+++ b/packages/taro-runtime-rn/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/runtime-rn",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "taro-runtime-rn",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-runtime/package.json b/packages/taro-runtime/package.json
index f1820e721ba1..1c11351471b8 100644
--- a/packages/taro-runtime/package.json
+++ b/packages/taro-runtime/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/runtime",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "taro runtime for mini apps.",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-service/package.json b/packages/taro-service/package.json
index 613fa8c50e4f..3057f601d9a5 100644
--- a/packages/taro-service/package.json
+++ b/packages/taro-service/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/service",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Taro Service",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-transformer-wx/package.json b/packages/taro-transformer-wx/package.json
index 1a771545216e..b98ee5d4f6bb 100644
--- a/packages/taro-transformer-wx/package.json
+++ b/packages/taro-transformer-wx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/transformer-wx",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Transfrom Nerv Component to Wechat mini program.",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-vite-runner/package.json b/packages/taro-vite-runner/package.json
index c57af035db22..c8b5ff439793 100644
--- a/packages/taro-vite-runner/package.json
+++ b/packages/taro-vite-runner/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/vite-runner",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "main": "index.js",
   "license": "MIT",
   "files": [
diff --git a/packages/taro-webpack5-prebundle/package.json b/packages/taro-webpack5-prebundle/package.json
index 2757b7f12281..746a7912dafa 100644
--- a/packages/taro-webpack5-prebundle/package.json
+++ b/packages/taro-webpack5-prebundle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/webpack5-prebundle",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Taro app webpack5 prebundle",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-webpack5-runner/package.json b/packages/taro-webpack5-runner/package.json
index 033e4047b5f1..a7dc273309cd 100644
--- a/packages/taro-webpack5-runner/package.json
+++ b/packages/taro-webpack5-runner/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/webpack5-runner",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Taro app runner",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro-webpack5-runner/src/prerender/prerender.ts b/packages/taro-webpack5-runner/src/prerender/prerender.ts
index aa163131ab77..49f5e71d3e47 100644
--- a/packages/taro-webpack5-runner/src/prerender/prerender.ts
+++ b/packages/taro-webpack5-runner/src/prerender/prerender.ts
@@ -75,7 +75,7 @@ export function validatePrerenderPages (pages: string[], config?: PrerenderConfi
     const picomatch = require('picomatch')
     const isMatch = picomatch(match)
     pageConfigs = pages
-      .filter(isMatch)
+      .filter((page) => isMatch(page)) // Note: 这里不能写成 .filter(isMatch)，因为 filter 会传入三个参数，会影响 picomatch 的匹配
       .filter((p: string) => !p.includes('.config'))
       .map((p: string) => ({ path: p, params: {} }))
   }
diff --git a/packages/taro-with-weapp/package.json b/packages/taro-with-weapp/package.json
index 93133305dd81..89ce15baf942 100644
--- a/packages/taro-with-weapp/package.json
+++ b/packages/taro-with-weapp/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/with-weapp",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "taroize 之后的运行时",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taro/package.json b/packages/taro/package.json
index 1feb532efc69..f03876214329 100644
--- a/packages/taro/package.json
+++ b/packages/taro/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/taro",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "Taro framework",
   "author": "O2Team",
   "license": "MIT",
diff --git a/packages/taroize/package.json b/packages/taroize/package.json
index 460eaa46423b..10e256335c47 100644
--- a/packages/taroize/package.json
+++ b/packages/taroize/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/taroize",
-  "version": "4.0.4",
+  "version": "4.0.5-alpha.7",
   "description": "转换原生微信小程序代码为 Taro 代码",
   "author": "O2Team",
   "license": "MIT",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4edcd64f12e1..8baa64c5aa97 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -733,8 +733,8 @@ importers:
         specifier: ^3.0.0
         version: 3.0.0
       swiper:
-        specifier: 6.8.0
-        version: 6.8.0
+        specifier: 11.1.0
+        version: 11.1.0
       tslib:
         specifier: ^2.6.2
         version: 2.6.2
@@ -918,8 +918,8 @@ importers:
         specifier: ^2.2.5
         version: 2.5.1
       swiper:
-        specifier: 6.8.0
-        version: 6.8.0
+        specifier: 11.1.0
+        version: 11.1.0
       tslib:
         specifier: ^2.6.2
         version: 2.6.2
@@ -1248,6 +1248,9 @@ importers:
       rollup-plugin-ts:
         specifier: ^3.0.2
         version: 3.4.5(@babel/core@7.24.4)(@babel/preset-env@7.24.6)(@babel/runtime@7.24.6)(rollup@3.29.4)(typescript@5.4.5)
+      swiper:
+        specifier: 11.1.0
+        version: 11.1.0
 
   packages/taro-helper:
     dependencies:
@@ -13350,12 +13353,6 @@ packages:
     resolution: {integrity: sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==, tarball: https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz}
     dev: false
 
-  /dom7@3.0.0:
-    resolution: {integrity: sha512-oNlcUdHsC4zb7Msx7JN3K0Nro1dzJ48knvBOnDPKJ2GV9wl1i5vydJZUSyOfrkKFDZEud/jBsTk92S/VGSAe/g==, tarball: https://registry.npmjs.org/dom7/-/dom7-3.0.0.tgz}
-    dependencies:
-      ssr-window: 3.0.0
-    dev: false
-
   /domelementtype@2.3.0:
     resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==, tarball: https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz}
 
@@ -24454,10 +24451,6 @@ packages:
     dev: false
     optional: true
 
-  /ssr-window@3.0.0:
-    resolution: {integrity: sha512-q+8UfWDg9Itrg0yWK7oe5p/XRCJpJF9OBtXfOPgSJl+u3Xd5KI328RUEvUqSMVM9CiQUEf1QdBzJMkYGErj9QA==, tarball: https://registry.npmjs.org/ssr-window/-/ssr-window-3.0.0.tgz}
-    dev: false
-
   /ssri@10.0.6:
     resolution: {integrity: sha512-MGrFH9Z4NP9Iyhqn16sDtBpRRNJ0Y2hNa6D65h736fVSaPCHr4DM4sWUNvVaSuC+0OBGhwsrydQwmgfg5LncqQ==, tarball: https://registry.npmjs.org/ssri/-/ssri-10.0.6.tgz}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@@ -25055,14 +25048,9 @@ packages:
       picocolors: 1.0.1
     dev: false
 
-  /swiper@6.8.0:
-    resolution: {integrity: sha512-6H3e7VOihasMp8sPXNhRDkc61UD0XeFlefbWfUHecBLBTtmA+9WxJiKDBMdzgetK1cny+5+mKfVcsmxYgnEDSw==, tarball: https://registry.npmjs.org/swiper/-/swiper-6.8.0.tgz}
+  /swiper@11.1.0:
+    resolution: {integrity: sha512-Pm78CgU7Wvg+w/MgIL/1NwMSLgx0XqFof25EnVyX8iZFCYJv5CppH7LHkBj43qW2k5Cp3Iz7FcdBxrox7XX2AQ==, tarball: https://registry.npmjs.org/swiper/-/swiper-11.1.0.tgz}
     engines: {node: '>= 4.7.0'}
-    requiresBuild: true
-    dependencies:
-      dom7: 3.0.0
-      ssr-window: 3.0.0
-    dev: false
 
   /symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==, tarball: https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz}
diff --git a/tests/__tests__/__snapshots__/prerender.spec.ts.snap b/tests/__tests__/__snapshots__/prerender.spec.ts.snap
index 51dbfd53a0c4..3fb20418c084 100644
--- a/tests/__tests__/__snapshots__/prerender.spec.ts.snap
+++ b/tests/__tests__/__snapshots__/prerender.spec.ts.snap
@@ -667,9 +667,6 @@ require("./runtime");
       if (typeof PRERENDER !== 'undefined') {
         module.exports = wx._prerender
       }
-      if (typeof PRERENDER !== 'undefined') {
-        module.exports = wx._prerender
-      }
 
 /** filePath: dist/app.json **/
 {"pages":["pages/index/index","others/detail/index","others/normal/index"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#fff","navigationBarTitleText":"WeChat","navigationBarTextStyle":"black"}}
@@ -1479,9 +1476,6 @@ require("./runtime");
     }));
     var __webpack_exports__ = __webpack_require__.O();
 } ]);
-      if (typeof PRERENDER !== 'undefined') {
-        module.exports = wx._prerender
-      }
 
 /** filePath: dist/comp.json **/
 {"component":true,"usingComponents":{"comp":"./comp"}}
@@ -1491,14 +1485,6 @@ require("./runtime");
 <wxs module="xs" src="./utils.wxs" />
 <template is="{{'tmpl_0_' + i.nn}}" data="{{i:i,c:1,l:xs.f('',i.nn)}}" />
 
-/** filePath: dist/custom-wrapper.js **/
-      if (typeof PRERENDER !== 'undefined') {
-        module.exports = wx._prerender
-      }
-      if (typeof PRERENDER !== 'undefined') {
-        module.exports = wx._prerender
-      }
-
 /** filePath: dist/others/detail/index.js **/
 "use strict";
 
@@ -2907,9 +2893,6 @@ require("./runtime");
       if (typeof PRERENDER !== 'undefined') {
         module.exports = wx._prerender
       }
-      if (typeof PRERENDER !== 'undefined') {
-        module.exports = wx._prerender
-      }
 
 /** filePath: dist/pages/index/index.json **/
 {"navigationBarTitleText":"首页","usingComponents":{"comp":"../../comp"}}
@@ -2917,7 +2900,7 @@ require("./runtime");
 /** filePath: dist/pages/index/index.wxml **/
 <import src="../../base.wxml"/>
 <block wx:if="{{root.uid}}">
-  <block wx:if="{{root.uid}}">
+  <template is="taro_tmpl" data="{{root:root}}" />
 </block>
 <block wx:else>
 <view class="index" id="_n_19" ><text id="_n_18" >Hello world!</text></view>
@@ -3781,9 +3764,6 @@ require("./runtime");
       if (typeof PRERENDER !== 'undefined') {
         module.exports = wx._prerender
       }
-      if (typeof PRERENDER !== 'undefined') {
-        module.exports = wx._prerender
-      }
 
 /** filePath: dist/app.json **/
 {"pages":["pages/index/index","others/detail/index","others/normal/index"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#fff","navigationBarTitleText":"WeChat","navigationBarTextStyle":"black"}}
@@ -4593,9 +4573,6 @@ require("./runtime");
     }));
     var __webpack_exports__ = __webpack_require__.O();
 } ]);
-      if (typeof PRERENDER !== 'undefined') {
-        module.exports = wx._prerender
-      }
 
 /** filePath: dist/comp.json **/
 {"component":true,"usingComponents":{"comp":"./comp"}}
@@ -4605,11 +4582,6 @@ require("./runtime");
 <wxs module="xs" src="./utils.wxs" />
 <template is="{{'tmpl_0_' + i.nn}}" data="{{i:i,c:1,l:xs.f('',i.nn)}}" />
 
-/** filePath: dist/custom-wrapper.js **/
-      if (typeof PRERENDER !== 'undefined') {
-        module.exports = wx._prerender
-      }
-
 /** filePath: dist/others/detail/index.js **/
 "use strict";
 
@@ -6018,9 +5990,6 @@ require("./runtime");
       if (typeof PRERENDER !== 'undefined') {
         module.exports = wx._prerender
       }
-      if (typeof PRERENDER !== 'undefined') {
-        module.exports = wx._prerender
-      }
 
 /** filePath: dist/pages/index/index.json **/
 {"navigationBarTitleText":"首页","usingComponents":{"comp":"../../comp"}}
@@ -6028,7 +5997,7 @@ require("./runtime");
 /** filePath: dist/pages/index/index.wxml **/
 <import src="../../base.wxml"/>
 <block wx:if="{{root.uid}}">
-  <block wx:if="{{root.uid}}">
+  <template is="taro_tmpl" data="{{root:root}}" />
 </block>
 <block wx:else>
 <view class="index" id="_n_19" ><text id="_n_18" >Hello world!</text></view>
@@ -6892,9 +6861,6 @@ require("./runtime");
       if (typeof PRERENDER !== 'undefined') {
         module.exports = wx._prerender
       }
-      if (typeof PRERENDER !== 'undefined') {
-        module.exports = wx._prerender
-      }
 
 /** filePath: dist/app.json **/
 {"pages":["pages/index/index","others/detail/index","others/normal/index"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#fff","navigationBarTitleText":"WeChat","navigationBarTextStyle":"black"}}
@@ -7704,9 +7670,6 @@ require("./runtime");
     }));
     var __webpack_exports__ = __webpack_require__.O();
 } ]);
-      if (typeof PRERENDER !== 'undefined') {
-        module.exports = wx._prerender
-      }
 
 /** filePath: dist/comp.json **/
 {"component":true,"usingComponents":{"comp":"./comp"}}
@@ -7716,11 +7679,6 @@ require("./runtime");
 <wxs module="xs" src="./utils.wxs" />
 <template is="{{'tmpl_0_' + i.nn}}" data="{{i:i,c:1,l:xs.f('',i.nn)}}" />
 
-/** filePath: dist/custom-wrapper.js **/
-      if (typeof PRERENDER !== 'undefined') {
-        module.exports = wx._prerender
-      }
-
 /** filePath: dist/others/detail/index.js **/
 "use strict";
 
@@ -9129,9 +9087,6 @@ require("./runtime");
       if (typeof PRERENDER !== 'undefined') {
         module.exports = wx._prerender
       }
-      if (typeof PRERENDER !== 'undefined') {
-        module.exports = wx._prerender
-      }
 
 /** filePath: dist/pages/index/index.json **/
 {"navigationBarTitleText":"首页","usingComponents":{"comp":"../../comp"}}
@@ -9139,7 +9094,7 @@ require("./runtime");
 /** filePath: dist/pages/index/index.wxml **/
 <import src="../../base.wxml"/>
 <block wx:if="{{root.uid}}">
-  <block wx:if="{{root.uid}}">
+  <template is="taro_tmpl" data="{{root:root}}" />
 </block>
 <block wx:else>
 <view class="index" id="_n_19" ><text id="_n_18" >Hello world!</text></view>