-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
190 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |