Skip to content

wxParse 如何重复嵌套模版

Di edited this page Jan 23, 2017 · 1 revision

问题

HTML的嵌套层次比较多,造成深度节点无法渲染

解决方案: 复制扩展模版

  1. 找到wxParse.wxml
  2. 复制最底部的Template
<!--循环模版-->
<template name="wxParse11">
    <!--<template is="wxParse12" data="{{item}}" />-->
    <!--判断是否是标签节点-->
    <block wx:if="{{item.node == 'element'}}">
        <block wx:if="{{item.tag == 'button'}}">
            <button type="default" size="mini" >
                <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
                    <template is="wxParse12" data="{{item}}"/>
                </block>
             </button>
        </block>
        <!--li类型-->
        <block wx:elif="{{item.tag == 'li'}}">
            <view class="{{item.classStr}} wxParse-li">
                <view class="{{item.classStr}} wxParse-li-inner">
                    <view class="{{item.classStr}} wxParse-li-text">
                        <view class="{{item.classStr}} wxParse-li-circle"></view>
                    </view>
                    <view class="{{item.classStr}} wxParse-li-text">
                        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
                            <template is="wxParse12" data="{{item}}"/>
                        </block>
                    </view>
                </view>
            </view>
        </block>

        <!--video类型-->
        <block wx:elif="{{item.tag == 'video'}}">
            <template is="wxParseVideo" data="{{item}}"/>  
        </block>

        <!--img类型-->
        <block wx:elif="{{item.tag == 'img'}}">
            <template is="wxParseImg" data="{{item}}"/>
        </block>

        <!--a类型-->
        <block wx:elif="{{item.tag == 'a'}}">
            <view bindtap="wxParseTagATap" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}"  style="{{item.styleStr}}">
                <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
                    <template is="wxParse12" data="{{item}}"/>
                </block>
            </view>
        </block>
        
        <!--其他块级标签-->
        <block wx:elif="{{item.tagType == 'block'}}">
            <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
                <block  wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">       
                    <template is="wxParse12" data="{{item}}"/>                 
                </block>
            </view>
        </block>

        <!--内联标签-->
        <view wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.styleStr}}">
            <block  wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">       
                <template is="wxParse12" data="{{item}}"/>                 
            </block>
        </view>

    </block>

    <!--判断是否是文本节点-->
    <block wx:elif="{{item.node == 'text'}}">
        <!--如果是,直接进行-->
        <template is="WxEmojiView" data="{{item}}"/>
    </block>

</template>
  1. 修改为下
<!--循环模版-->
<template name="wxParse12">
    <!--<template is="wxParse13" data="{{item}}" />-->
    <!--判断是否是标签节点-->
    <block wx:if="{{item.node == 'element'}}">
        <block wx:if="{{item.tag == 'button'}}">
            <button type="default" size="mini" >
                <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
                    <template is="wxParse13" data="{{item}}"/>
                </block>
             </button>
        </block>
        <!--li类型-->
        <block wx:elif="{{item.tag == 'li'}}">
            <view class="{{item.classStr}} wxParse-li">
                <view class="{{item.classStr}} wxParse-li-inner">
                    <view class="{{item.classStr}} wxParse-li-text">
                        <view class="{{item.classStr}} wxParse-li-circle"></view>
                    </view>
                    <view class="{{item.classStr}} wxParse-li-text">
                        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
                            <template is="wxParse13" data="{{item}}"/>
                        </block>
                    </view>
                </view>
            </view>
        </block>

        <!--video类型-->
        <block wx:elif="{{item.tag == 'video'}}">
            <template is="wxParseVideo" data="{{item}}"/>  
        </block>

        <!--img类型-->
        <block wx:elif="{{item.tag == 'img'}}">
            <template is="wxParseImg" data="{{item}}"/>
        </block>

        <!--a类型-->
        <block wx:elif="{{item.tag == 'a'}}">
            <view bindtap="wxParseTagATap" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}"  style="{{item.styleStr}}">
                <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
                    <template is="wxParse13" data="{{item}}"/>
                </block>
            </view>
        </block>
        
        <!--其他块级标签-->
        <block wx:elif="{{item.tagType == 'block'}}">
            <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
                <block  wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">       
                    <template is="wxParse13" data="{{item}}"/>                 
                </block>
            </view>
        </block>

        <!--内联标签-->
        <view wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.styleStr}}">
            <block  wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">       
                <template is="wxParse13" data="{{item}}"/>                 
            </block>
        </view>

    </block>

    <!--判断是否是文本节点-->
    <block wx:elif="{{item.node == 'text'}}">
        <!--如果是,直接进行-->
        <template is="WxEmojiView" data="{{item}}"/>
    </block>

</template>
  1. 按照上面步骤依次添加到你的层级即可
Clone this wiki locally