index.wxml

<!--static/nativeComponents/CubeNav/index.wxml-->
<view style="overflow: hidden;">
  <view class="cube-nav" style="margin-top:{{datas.componentData.verticalMargin * 2}}rpx;margin-bottom:{{datas.componentData.verticalMargin * 2}}rpx;margin-left:{{datas.componentData.levelMargin * 2}}rpx;margin-right:{{datas.componentData.levelMargin * 2}}rpx;border-radius:{{datas.componentData.moduleRadius * 2}}rpx">
    <view class="cube1 clearfix" wx:if="{{datas.componentData.layoutType == 0}}" style="margin-left:{{-datas.componentData.singleVerticalMargin*2}}rpx;background-color:{{datas.componentData.backgroundColor || ''}};">
      <view class="cube-bg" wx:for="{{imgList}}" data-item="{{item}}" bindtap="onclickHandle" style="padding-left:{{datas.componentData.singleVerticalMargin*2}}rpx;width:{{getColumnWidth}};">
        <view class="cube-item" style="padding-top:{{datas.componentData.singleLevelMargin * 2}}rpx;padding-bottom:{{datas.componentData.singleLevelMargin * 2}}rpx;position:relative;background:{{datas.componentData.singleBackground}};border-radius:{{datas.componentData.singleRadius*2}}rpx;margin-top:{{datas.componentData.lineHeight*2}}rpx">
          <view style="padding-left:{{getImgSize}}%;padding-right:{{getImgSize}}%">
            <view class="item-img {{item.imageUrl == '' ? 'item-bg' : ''}}">
              <image wx:if="{{item.imageUrl}}" src="{{item.imageUrl}}"></image>
            </view>
          </view>
          <view class="item-title" style="font-size:{{datas.componentData.textSize * 2}}rpx;color:{{datas.componentData.fontColor}};height:{{datas.componentData.textSize / 12}}em;line-height:{{datas.componentData.textSize / 12}}em">{{ item.title }}</view>
        </view>
      </view>
    </view>
  
    <view wx:if="{{datas.componentData.layoutType == 1}}" style="position:relative;background-color:{{datas.componentData.backgroundColor || ''}};padding-bottom:{{navShow ? '10px' : '0'}}">
      <view class="cube2 clearfix" style="overflow-x:auto;overflow-y:hidden" bindtouchend="touchmove">
        <view class="clearfix" style="width:{{wrapW}}px" id="wrapW">
          <view class="cube-item" wx:for="{{imgList}}" style="padding-top:{{datas.componentData.lineHeight}}px;padding-bottom:{{datas.componentData.lineHeight}}px;width:{{w}}px;position:relative" bindtap="onclickHandle" data-item="{{item}}">
            <view style="padding-left:{{getImgSize}}%;padding-right:{{getImgSize}}%">
              <view class="item-img {{item.imageUrl == '' ? 'item-bg' : ''}}">
                <image wx:if="{{item.imageUrl}}" src="{{item.imageUrl}}"></image>
              </view>
            </view>
            <view class="item-title" style="font-size:{{datas.componentData.textSize}}px;color:{{datas.componentData.fontColor}}">{{item.title}}
            </view>
          </view>
        </view>
      </view>
      <view class="nav-wrap" wx:if="{{navShow && datas.componentData.layoutType == 1}}">
        <view class="nav">
          <view class="inner-nav" style="left :{{navLeft*2}}rpx"></view>
        </view>
      </view>
    </view>
  
  
    <view class="cube3 clearfix" wx:if="{{datas.componentData.layoutType == 2}}" style="background-color:{{datas.componentData.backgroundColor || ''}};">
      <swiper indicator-dots="{{true}}" indicator-active-color="var(--main-color)" style="height:{{cube3H}}px">
        <swiper-item wx:for="{{swiperList}}"  style="width:{{swiperItemW}}px">
          <view class="cube-item" style="padding-top:{{datas.componentData.lineHeight}}px;padding-bottom:{{datas.componentData.lineHeight}}px;width:{{getColumnWidth}};position:relative" wx:for-item="item1" wx:for="{{item}}" data-item="{{item1}}" bindtap="onclickHandle">
            <view style="padding-left:{{getImgSize}}%;padding-right:{{getImgSize}}%">
              <view class="item-img {{item1.imageUrl == '' ? 'item-bg' : ''}}">
                <image wx:if="{{item1.imageUrl}}" src="{{item1.imageUrl}}"></image>
              </view>
            </view>
            <view class="item-title" style="font-size:{{datas.componentData.textSize}}px;color:{{datas.componentData.fontColor}}">{{item1.title}}
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</view>