seanlong / wxml-parser Goto Github PK

      Page({
          data: {
            list: [
              {
                id: 'view',
                name: '视图容器',
                open: false,
                pages: ['view', 'scroll-view', 'swiper']
              }, {
                id: 'content',
                name: '基础内容',
                open: false,
                pages: ['text', 'icon', 'progress']
              }, {
                id: 'form',
                name: '表单组件',
                open: false,
                pages: ['button', 'checkbox', 'form', 'input', 'label', 'picker', 'radio', 'slider', 'switch']
              }, {
                id: 'feedback',
                name: '操作反馈',
                open: false,
                pages: ['action-sheet', 'modal', 'toast', 'loading']
              }, {
                id: 'nav',
                name: '导航',
                open: false,
                pages: ['navigator']
              }, {
                id: 'media',
                name: '媒体组件',
                open: false,
                pages: ['image', 'audio', 'video']
              }, {
                id: 'map',
                name: '地图',
                pages: ['map']
              }, {
                id: 'canvas',
                name: '画布',
                pages: ['canvas']
              }
            ]
          },
          widgetsToggle: function (e) {
            var id = e.currentTarget.id, list = this.data.list;
            for (var i = 0, len = list.length; i < len; ++i) {
              if (list[i].id == id) {
                list[i].open = !list[i].open;
              } else {
                list[i].open = false;
              }
            }
            this.setData({
              list: list
            });
          }
        })

<view class="index">
    <view class="head">
        <view class="title">小程序组件</view>
        <view class="desc">这里就当前已支持的组件进行演示</view>
    </view>

    <view class="body">
        <view class="widgets">
            <block wx:for-items="{{list}}">
                <view class="widgets__item">
                    <view id="{{item.id}}" class="widgets__info {{item.open ? 'widgets__info_show' : ''}}" bindtap="widgetsToggle">
                        <text class="widgets__info-name">{{item.name}}</text>
                        <image class="widgets__info-img" src="/image/arrowright.png" mode="aspectFill" />
                    </view>
                    <view class="widgets__list {{item.open ? 'widgets__list_show' : ''}}">
                        <block wx:for-items="{{item.pages}}" wx:for-item="page">
                            <navigator url="component-pages/{{page}}/{{page}}" class="widget">
                                <text class="widget__name">{{page}}</text>
                                <image class="widget__arrow" src="/image/arrowright.png" mode="aspectFill" />
                                <view class="widget__line {{index == 0 ? 'widget__line_first' : ''}}"></view>
                            </navigator>
                        </block>
                    </view>
                </view>
            </block>
        </view>
    </view>
</view>