diff --git a/src/code/index.js b/src/code/index.js
new file mode 100644
index 0000000..300cd50
--- /dev/null
+++ b/src/code/index.js
@@ -0,0 +1,64 @@
+let code = {};
+
+code.import = `
+"usingComponents": {
+    "i-index": "../../dist/index/index",
+    "i-index-item": "../../dist/index-item/index"
+}
+`;
+code.usage = `
+<view class="i-index-demo">
+    <i-index height="100%" bind:change="onChange">
+        <i-index-item 
+            wx:for="{{ cities }}" 
+            wx:for-index="index" 
+            wx:key="{{index}}" 
+            wx:for-item="item" name="{{item.key}}">
+            <view 
+                class="i-index-demo-item" 
+                wx:for="{{item.list}}" 
+                wx:for-index="in" 
+                wx:key="{{in}}" 
+                wx:for-item="it">
+                {{it.name}}
+            </view>
+        </i-index-item>
+    </i-index>
+</view>
+`;
+
+code.js = `
+import { cities } from './city';
+Page({
+    data : {
+        cities : []
+    },
+    onChange(event){
+        console.log(event.detail,'click right menu callback data')
+    },
+    onReady(){
+        let storeCity = new Array(26);
+        const words = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"]
+        words.forEach((item,index)=>{
+            storeCity[index] = {
+                key : item,
+                list : []
+            }
+        })
+        cities.forEach((item)=>{
+            let firstName = item.pinyin.substring(0,1);
+            let index = words.indexOf( firstName );
+            storeCity[index].list.push({
+                name : item.name,
+                key : firstName
+            });
+        })
+        this.data.cities = storeCity;
+        this.setData({
+            cities : this.data.cities
+        })
+    }
+});
+`;
+
+export default code;
\ No newline at end of file
diff --git a/src/config/navigate.js b/src/config/navigate.js
index 61185af..54acec3 100644
--- a/src/config/navigate.js
+++ b/src/config/navigate.js
@@ -86,6 +86,10 @@ const list = {
                     title: 'NoticeBar 通告栏',
                     path: '/components/notice-bar'
                 },
+                {
+                    title: 'Index 索引选择器',
+                    path: '/components/index'
+                },
             ]
         },
         {
diff --git a/src/router.js b/src/router.js
index ca905f3..ed04487 100755
--- a/src/router.js
+++ b/src/router.js
@@ -247,6 +247,13 @@ const routers = [
         },
         component: (resolve) => require(['./views/components/swipeout.vue'], resolve)
     },
+    {
+        path: '/components/index',
+        meta: {
+            title: '索引选择器 Index'
+        },
+        component: (resolve) => require(['./views/components/index.vue'], resolve)
+    },
     {
         path: '*',
         redirect: '/'
diff --git a/src/views/components/index.vue b/src/views/components/index.vue
new file mode 100644
index 0000000..aab603f
--- /dev/null
+++ b/src/views/components/index.vue
@@ -0,0 +1,115 @@
+<template>
+    <i-article>
+        <article>
+            <h1>Index 索引选择器</h1>
+            <Anchor title="概述" h2></Anchor>
+            <p>常用于通讯录、城市选择的索引选择器。</p>
+            <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="Index 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>height</td>
+                            <td>容器 scroll-view 的高度，支持各种单位</td>
+                            <td>String</td>
+                            <td>300</td>
+                        </tr>
+                        <tr>
+                            <td>item-height</td>
+                            <td>选择项的高度，单位 px</td>
+                            <td>Number</td>
+                            <td>18</td>
+                        </tr>
+                    </tbody>
+                </table>
+                <Anchor title="Index events" h3></Anchor>
+                <table>
+                    <thead>
+                    <tr>
+                        <th>事件名</th>
+                        <th>说明</th>
+                        <th>返回值</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr>
+                        <td>bind:change</td>
+                        <td>选择项改变时触发，</td>
+                        <td>{index, current}</td>
+                    </tr>
+                    </tbody>
+                </table>
+                <Anchor title="IndexItem 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>name</td>
+                        <td>选择项的标题</td>
+                        <td>String</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/index';
+    import Anchor from '../../components/anchor.vue';
+
+    export default {
+        components: {
+            iArticle,
+            iCode,
+            Demo,
+            Anchor
+        },
+        data () {
+            return {
+                code: Code
+            }
+        }
+    }
+</script>
\ No newline at end of file