add Sticky

view-design · Jul 9, 2018 · 1af0777 · 1af0777
1 parent 338ffe3
commit 1af0777
Show file tree

Hide file tree

Showing 4 changed files with 205 additions and 0 deletions.
diff --git a/src/code/sticky.js b/src/code/sticky.js
@@ -0,0 +1,109 @@
+let code = {};
+
+code.import = `
+"usingComponents": {
+    "i-sticky": "../../dist/sticky/index",
+    "i-sticky-item": "../../dist/sticky-item/index"
+}
+`;
+code.usage = `
+<view class="i-sticky-demo-des">
+    注: 1.由于组件内部不能使用onPageScroll,导致不能监听scrollTop值只能通过用户用props传递。
+</view>
+<view class="i-sticky-demo-des">
+    2.在微信开发客户端显示的时候会有bug。不停计算scrollTop值不能同步
+</view>
+<view class="i-sticky-demo">
+    <i-sticky scrollTop="{{scrollTop}}">
+        <i-sticky-item i-class="i-sticky-demo-title">
+            <view slot="title">
+                逻辑层
+            </view>
+            <view slot="content">
+                <view class="i-sticky-demo-item">注册程序</view>
+                <view class="i-sticky-demo-item">场景值</view>
+                <view class="i-sticky-demo-item">注册页面</view>
+                <view class="i-sticky-demo-item">路由</view>
+                <view class="i-sticky-demo-item">模块化</view>
+                <view class="i-sticky-demo-item">API</view>
+            </view>
+        </i-sticky-item>
+        <i-sticky-item i-class="i-sticky-demo-title">
+            <view slot="title">
+                视图层
+            </view>
+            <view slot="content">
+                <view class="i-sticky-demo-item">注册程序</view>
+                <view class="i-sticky-demo-item">场景值</view>
+                <view class="i-sticky-demo-item">注册页面</view>
+                <view class="i-sticky-demo-item">路由</view>
+                <view class="i-sticky-demo-item">模块化</view>
+                <view class="i-sticky-demo-item">API</view>
+            </view>
+        </i-sticky-item>
+        <i-sticky-item i-class="i-sticky-demo-title">
+            <view slot="title">
+                自定义组件
+            </view>
+            <view slot="content">
+                <view class="i-sticky-demo-item">注册程序</view>
+                <view class="i-sticky-demo-item">场景值</view>
+                <view class="i-sticky-demo-item">注册页面</view>
+                <view class="i-sticky-demo-item">路由</view>
+                <view class="i-sticky-demo-item">模块化</view>
+                <view class="i-sticky-demo-item">API</view>
+                <view class="i-sticky-demo-item">注册程序</view>
+                <view class="i-sticky-demo-item">场景值</view>
+                <view class="i-sticky-demo-item">注册页面</view>
+                <view class="i-sticky-demo-item">路由</view>
+                <view class="i-sticky-demo-item">模块化</view>
+                <view class="i-sticky-demo-item">API</view>
+            </view>
+        </i-sticky-item>
+        <i-sticky-item i-class="i-sticky-demo-title">
+            <view slot="title">
+                插件
+            </view>
+            <view slot="content">
+                <view class="i-sticky-demo-item">注册程序</view>
+                <view class="i-sticky-demo-item">场景值</view>
+                <view class="i-sticky-demo-item">注册页面</view>
+                <view class="i-sticky-demo-item">路由</view>
+                <view class="i-sticky-demo-item">模块化</view>
+                <view class="i-sticky-demo-item">API</view>
+                <view class="i-sticky-demo-item">注册程序</view>
+                <view class="i-sticky-demo-item">场景值</view>
+                <view class="i-sticky-demo-item">注册页面</view>
+                <view class="i-sticky-demo-item">路由</view>
+                <view class="i-sticky-demo-item">模块化</view>
+                <view class="i-sticky-demo-item">API</view>
+                <view class="i-sticky-demo-item">注册程序</view>
+                <view class="i-sticky-demo-item">场景值</view>
+                <view class="i-sticky-demo-item">注册页面</view>
+                <view class="i-sticky-demo-item">路由</view>
+                <view class="i-sticky-demo-item">模块化</view>
+                <view class="i-sticky-demo-item">API</view>
+            </view>
+        </i-sticky-item>
+    </i-sticky>
+</view>
+`;
+
+code.js = `
+Page({
+    data : {
+        scrollTop : 0
+    },
+    onChange(event){
+        console.log(event.detail,'click right menu callback data')
+    },
+    //页面滚动执行方式
+    onPageScroll(event){
+        this.setData({
+            scrollTop : event.scrollTop
+        })
+    }
+});
+`;
+
+export default code;
diff --git a/src/config/navigate.js b/src/config/navigate.js
@@ -90,6 +90,10 @@ const list = {
                     title: 'Index 索引选择器',
                     path: '/components/index'
                 },
+                {
+                    title: 'Sticky 吸顶容器',
+                    path: '/components/sticky'
+                },
             ]
         },
         {

diff --git a/src/router.js b/src/router.js
@@ -261,6 +261,13 @@ const routers = [
         },
         component: (resolve) => require(['./views/components/divider.vue'], resolve)
     },
+    {
+        path: '/components/sticky',
+        meta: {
+            title: '吸顶容器 Sticky'
+        },
+        component: (resolve) => require(['./views/components/sticky.vue'], resolve)
+    },
     {
         path: '*',
         redirect: '/'

diff --git a/src/views/components/sticky.vue b/src/views/components/sticky.vue
@@ -0,0 +1,85 @@
+<template>
+    <i-article>
+        <article>
+            <h1>Sticky 吸顶容器</h1>
+            <Anchor title="概述" h2></Anchor>
+            <Anchor title="使用指南" h2></Anchor>
+            <p>在 .json 中引入组件</p>
+            <i-code bg lang="json">{{ code.import }}</i-code>
+            <Anchor title="示例" h2></Anchor>
+            <i-code bg lang="html">{{ code.usage }}</i-code>
+            <br><br>
+            <i-code bg lang="js">{{ code.js }}</i-code>
+            <ad></ad>
+
+            <div class="api">
+                <Anchor title="API" h2></Anchor>
+                <Anchor title="Sticky properties" h3></Anchor>
+                <table>
+                    <thead>
+                        <tr>
+                            <th>属性</th>
+                            <th>说明</th>
+                            <th>类型</th>
+                            <th>默认值</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>i-class</td>
+                            <td>自定义 class 类名</td>
+                            <td>String</td>
+                            <td>-</td>
+                        </tr>
+                        <tr>
+                            <td>scroll-top</td>
+                            <td>由于组件内部不能使用 onPageScroll, 导致不能监听 scrollTop 值，所有由用户传递</td>
+                            <td>Number</td>
+                            <td>-</td>
+                        </tr>
+                    </tbody>
+                </table>
+                <Anchor title="StickyItem slots" h3></Anchor>
+                <table>
+                    <thead>
+                    <tr>
+                        <th>名称</th>
+                        <th>说明</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr>
+                        <td>title</td>
+                        <td>吸顶标题</td>
+                    </tr>
+                    <tr>
+                        <td>content</td>
+                        <td>内容</td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+        </article>
+    </i-article>
+</template>
+<script>
+    import iArticle from '../../components/article.vue';
+    import iCode from 'iCode';
+    import Demo from '../../components/demo.vue';
+    import Code from '../../code/sticky';
+    import Anchor from '../../components/anchor.vue';
+
+    export default {
+        components: {
+            iArticle,
+            iCode,
+            Demo,
+            Anchor
+        },
+        data () {
+            return {
+                code: Code
+            }
+        }
+    }
+</script>