From 59b52bc3b83fdc51d99721147b17225577684ab5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com> Date: Mon, 9 Jul 2018 10:11:02 +0800 Subject: [PATCH] add Index --- src/code/index.js | 64 ++++++++++++++++++ src/config/navigate.js | 4 ++ src/router.js | 7 ++ src/views/components/index.vue | 115 +++++++++++++++++++++++++++++++++ 4 files changed, 190 insertions(+) create mode 100644 src/code/index.js create mode 100644 src/views/components/index.vue 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