diff --git a/src/core/service/plugins/app/router-guard.js b/src/core/service/plugins/app/router-guard.js
index 131d6b826039224f7689321a714a6e3f4e059511..de1b5633a786c72bdb3e0a1a9622ef5d4620c2f4 100644
--- a/src/core/service/plugins/app/router-guard.js
+++ b/src/core/service/plugins/app/router-guard.js
@@ -145,10 +145,13 @@ function beforeEach (to, from, next, routes) {
     if (__PLATFORM__ === 'h5') {
       if (to.meta && to.meta.name) {
         document.body.className = 'uni-body ' + to.meta.name
+        const nvueDirKey = 'nvue-dir-' + __uniConfig.nvue['flex-direction']
         if (to.meta.isNVue) {
           document.body.setAttribute('nvue', '')
+          document.body.setAttribute(nvueDirKey, '')
         } else {
           document.body.removeAttribute('nvue')
+          document.body.removeAttribute(nvueDirKey)
         }
       }
     }
diff --git a/src/core/service/plugins/index.js b/src/core/service/plugins/index.js
index 81b23b1c2620b80d578455f9aa750b9346a90896..aa828085f0c2afff81d437e66936fa962d3e76ee 100644
--- a/src/core/service/plugins/index.js
+++ b/src/core/service/plugins/index.js
@@ -108,7 +108,9 @@ export default {
       if (entryRoute.meta && entryRoute.meta.name) {
         document.body.className = 'uni-body ' + entryRoute.meta.name
         if (entryRoute.meta.isNVue) {
+          const nvueDirKey = 'nvue-dir-' + __uniConfig.nvue['flex-direction']
           document.body.setAttribute('nvue', '')
+          document.body.setAttribute(nvueDirKey, '')
         }
       }
     }
diff --git a/src/core/view/index.css b/src/core/view/index.css
index 8dde30399c8b4c22529b04e3e99359c5e73ece2c..cd4dd7af66547152bfd62ebb7bfbcf4c595ab2cd 100644
--- a/src/core/view/index.css
+++ b/src/core/view/index.css
@@ -130,9 +130,28 @@ uni-page {
 [nvue] uni-view,
 [nvue] uni-swiper-item {
     display: flex;
+}
+
+[nvue-dir-row] uni-view,
+[nvue-dir-row] uni-swiper-item {
+    flex-direction: row;
+}
+
+[nvue-dir-column] uni-view,
+[nvue-dir-column] uni-swiper-item {
     flex-direction: column;
 }
 
+[nvue-dir-row-reverse] uni-view,
+[nvue-dir-row-reverse] uni-swiper-item {
+    flex-direction: row-reverse;
+}
+
+[nvue-dir-column-reverse] uni-view,
+[nvue-dir-column-reverse] uni-swiper-item {
+    flex-direction: column-reverse;
+}
+
 [nvue] uni-view,
 [nvue] uni-image,
 [nvue] uni-input,