index.wxml

<mp-navigation-bar title="小程序交互动画展示" back="{{false}}"></mp-navigation-bar>
<scroll-view class="page-scroll-view" scroll-y type="list">
<view class="page" data-weui-theme="{{theme}}">
  <view class="index">
    <view class="index-hd">
      <image class="index-logo" src="resources/kind/logo.png"></image>
      <text class="index-desc">以下将展示小程序实现高级交互动画的能力和示例，包括内置的高级渲染能力和一些常见的交互示例，具体原理及源码详见 <text class="weui-agree__link" bindtap="navToDoc">小程序开发文档</text>。</text>
    </view>
    <view class="index-bd">
      <view class="kind-list">
        <block wx:for="{{list}}" wx:key="{{item.id}}">
          <view class="kind-list-item">
            <view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="kindToggle">
              <view class="kind-list-text">{{item.name}}</view>
            </view>
            <view class="kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}">
              <view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}">
                <block wx:for="{{item.pages}}" wx:for-item="page" wx:key="*item">
                  <view wx:if="{{page.appid}}">
                    <navigator target="miniProgram" open-type="navigate" app-id="{{page.appid}}" path="" extra-data="" version="release" class="navigator {{index + 1 === item.pages.length ? '' : 'navigator-bottom-line'}}">{{page.name}}</navigator>
                    <view class="navigator-arrow"></view>
                  </view>
                  <!-- custom-route，自定义路由暂时不能用 navigator -->
                  <view wx:elif="{{page.key == 'custom-route'}}">
                    <view bindtap="goToCustomRoute" data-url="{{page.url}}" class="navigator {{index + 1 === item.pages.length ? '' : 'navigator-bottom-line'}}">{{page.name}}</view>
                    <view class="navigator-arrow"></view>
                  </view>
                  <!-- skyline -->
                  <view wx:elif="{{item.id == 'SkylineBase'}}">
                    <navigator url="/packageSkyline/pages/{{page.url}}" class="navigator {{index + 1 === item.pages.length ? '' : 'navigator-bottom-line'}}">{{page.name}}</navigator>
                    <view class="navigator-arrow"></view>
                  </view>
                  <!-- 暂时混合，后面会都迁移到 skylineExamples -->
                  <view wx:elif="{{item.id == 'SkylineDemo'}}">
                    <navigator url="{{page.url}}" class="navigator {{index + 1 === item.pages.length ? '' : 'navigator-bottom-line'}}">{{page.name}}</navigator>
                    <view class="navigator-arrow"></view>
                  </view>
                  <!-- XRFrame -->
                  <view wx:elif="{{item.id == 'XRFrame'}}">
                    <navigator url="/packageXRFrame/{{page.url}}" class="navigator {{index + 1 === item.pages.length ? '' : 'navigator-bottom-line'}}">{{page.name}}</navigator>
                    <view class="navigator-arrow"></view>
                  </view>
                  <!-- adaptive -->
                  <view wx:elif="{{item.id == 'adaptive'}}">
                    <navigator url="/packageExtend/pages/{{page.url}}" class="navigator {{index + 1 === item.pages.length ? '' : 'navigator-bottom-line'}}">{{page.name}}</navigator>
                    <view class="navigator-arrow"></view>
                  </view>
                  <view wx:else>
                    <navigator url="/packageComponent/pages/{{item.id}}/{{page}}/{{page}}" class="navigator {{index + 1 === item.pages.length ? '' : 'navigator-bottom-line'}}">{{page}}</navigator>
                    <view class="navigator-arrow"></view>
                  </view>

                </block>
              </view>
            </view>
          </view>
        </block>
      </view>
    </view>
  </view>
</view>
</scroll-view>