暂存

config.json

@@ -327,6 +327,13 @@
       "desc": "vue版的腾讯地图",
       "type": "component",
       "showDemo": true
+    },
+    {
+      "name": "ParallaxScroll",
+      "chnName": "视差滚动",
+      "desc": "用于页面展示的视差滚动",
+      "type": "component",
+      "showDemo": true
     }
   ]
 }

src/demo/parallaxscroll.vue

@@ -0,0 +1,69 @@
+<template>
+    <div>
+        <!-- 组件名和描述 -->
+        <nut-demoheader 
+        :name="$route.name"
+        ></nut-demoheader>
+
+        <!-- DEMO区域 -->
+        <nut-parallaxscroll>
+            <!-- 视差滚动背景 -->
+            <div class="bg-box" slot="bg"> </div>      
+            <!--视差滚动背景2  -->
+            <div class="bg2-box"></div>
+            <!-- 视差滚动3 -->
+            <div>
+                这里作为文字说明,这里是一个视差滚动的demo
+                这里作为文字说明,这里是一个视差滚动的demo
+                这里作为文字说明,这里是一个视差滚动的demo
+                这里作为文字说明,这里是一个视差滚动的demo
+                这里作为文字说明,这里是一个视差滚动的demo
+                这里作为文字说明,这里是一个视差滚动的demo
+                这里作为文字说明,这里是一个视差滚动的demo
+                这里作为文字说明,这里是一个视差滚动的demo
+            </div>
+        </nut-parallaxscroll>
+         <nut-parallaxscroll>
+            <!-- 视差滚动背景 -->
+            <div class="bg-box" slot="bg"> </div>      
+            <!--视差滚动背景2  -->
+            <div class="bg2-box"></div>
+            <!-- 视差滚动3 -->
+            <div>
+                这里作为文字说明,这里是一个视差滚动的demo
+                这里作为文字说明,这里是一个视差滚动的demo
+                这里作为文字说明,这里是一个视差滚动的demo
+                这里作为文字说明,这里是一个视差滚动的demo
+                这里作为文字说明,这里是一个视差滚动的demo
+                这里作为文字说明,这里是一个视差滚动的demo
+                这里作为文字说明,这里是一个视差滚动的demo
+                这里作为文字说明,这里是一个视差滚动的demo
+            </div>
+        </nut-parallaxscroll>
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+        }
+    },
+    methods:{
+    }
+}
+</script>
+
+<style lang="scss">
+.bg-box{
+    height: 900px;
+    background-image:url(../asset/img/nutui-logo3.png);
+    background-color:#178d7d;
+    background-position: center center;
+    background-repeat: no-repeat;   
+    background-attachment: fixed;
+}
+.bg2-box{
+
+}
+</style>

src/package/parallaxscroll/index.js

@@ -0,0 +1,7 @@
+import ParallaxScroll from './src/parallaxscroll.vue';
+
+ParallaxScroll.install = function(Vue) {
+  Vue.component(ParallaxScroll.name, ParallaxScroll);
+};
+
+export default ParallaxScroll

src/package/parallaxscroll/src/parallaxscroll.vue

@@ -0,0 +1,22 @@
+<template>
+
+    <div class="nut-parallaxscroll">
+        <slot name="bg"></slot>
+        <slot></slot>       
+    </div>
+</template>
+<script>
+
+export default {
+    name:'nut-parallaxscroll',
+    props: {
+    },
+    data() {
+        return {};
+    },
+    methods: {
+    }
+}
+</script>
+<style lang="scss">
+</style>

src/view/map.vue

@@ -52,8 +52,7 @@
             </tbody>
             </table>
         </div>
-    </div>
-    </div>
+    </div>   
 </template>
 
 <script>

src/view/parallaxscroll.vue

@@ -0,0 +1,79 @@
+<template>
+    <div>
+       <nut-docheader 
+        :name="$route.name" 
+        :chName="$route.params.chnName" 
+        type="Filter" 
+        desc=""
+        :showQrCode="true"></nut-docheader>
+        <h5>示例</h5>
+        <nut-codebox :code="demo1"></nut-codebox>
+        <div>当用户滚动页面时，视差引起背景图像的滚动。<br>
+        页面上很多的元素在相互独立地滚动着，如果我们来对其它分层的话，可以有两到三层 ：背景层，内容层，贴图层
+        <br>
+        贴图层(内容层和背景层之间的元素)的滚动(次慢)
+        <br>
+        内容层的滚动(可以和页面的滚动速度一致)
+        <br>
+        背景层的滚动(最慢)
+        </div>
+        <h5>Props</h5>
+        <div class="tbl-wrapper">
+            <table class="u-full-width">
+            <thead>
+                <tr>
+                <th>参数</th>
+                <th>说明</th>
+                <th>类型</th>
+                <th>默认值</th>
+                <th>可选值</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                <td></td>
+                <td></td>
+                <td></td>
+                <td></td>
+                <td></td>
+                </tr>
+            </tbody>
+            </table>
+        </div>
+        
+        <h5>Events</h5>
+        <div class="tbl-wrapper">
+            <table class="u-full-width">
+            <thead>
+                <tr>
+                <th>事件名</th>
+                <th>说明</th>
+                <th>回调参数</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                <td></td>
+                <td></td>
+                <td></td>
+                </tr>
+            </tbody>
+            </table>
+        </div>   
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            demo1:`test`
+        }
+    },
+    methods:{
+    }
+}
+</script>
+
+<style lang="scss">
+</style>