如何实现微信小程序动态插入DOM节点的完美解决方案

杨新朋| 阅读:9 发表时间:2018-07-30 12:00:50 小程序开发

如何实现在小程序中动态插入DOM节点。

第一步:在项目中创建tmpl目录,并在tmpl.wxml中添加下面的代码:

<template name="Tmpl">
    <block wx:for="{{wxAppendData}}" wx:key="">
        <template is="Tmpl1" data="{{item}}"/>
    </block>
</template>

<template name="Tmpl1">
   <block wx:if="{{item.node == 'element'}}">
	<block wx:if="{{item.tag == 'view'}}">
	    <view class="{{item.class}}">
	        {{item.content}}
	        <block wx:for="{{item.child}}" wx:key="">	
			<template is="Tmpl2" data="{{item}}"/>
		</block>
	     </view>
	 </block>

	 <!-- img标签 -->
	 <block wx:if="{{item.tag == 'img'}}">
	     <image class="{{item.class}}" src="{{item.src}}" />
	 </block>

	 <!-- text标签 -->
	 <block wx:if="{{item.tag == 'text'}}">
	     <text class="{{item.class}}" >
	        {{item.content}}
	        <block wx:for="{{item.child}}" wx:key="">
			<template is="Tmpl2" data="{{item}}"/>
		</block>
	     </text>
	 </block>
    </block>
</template>

第二步:在需要动态插入节点的wxml引用tmpl.wxml

<!--index.wxml-->
<import src="../tmpl/tmpl.wxml"/>
<view>
    <template is="Tmpl" data="{{wxAppendData}}"/>
</view>

第三步:在插入节点页面对应的js中构造节点数据:

var app = getApp()
Page({
    data: {
        wxAppendData: [],
    },
    onReady: function() {
        this.data.wxAppendData = [
            {
                node: 'element',
                tag: 'view',
                class: ['a b'],
                content: '父节点',
                child: [
                    {
                        node: 'element',
                        tag: 'img',
                        class: ['a b'],
                        src: '../../img/user_hover.png',
                    },
                    {
                        node: 'element',
                        tag: 'text',
                        class: ['a b'],
                        content: "text标签",
                        child: [
                            {
                                node: 'element',
                                tag: 'text',
                                class: ['a b'],
                                content: "嵌套text标签"
                            }
                        ]
                    },
                    {
                        node: 'element',
                        tag: 'view',
                        content: 'view标签',
                    },
                ]
            },
            {
                node: 'element',
                tag: 'view',
                class: ['a b'],
                content: '父节点',
                child: [
                    {
                        node: 'element',
                        tag: 'img',
                        class: ['a b'],
                        src: '../../img/user_hover.png',
                    },
                    {
                        node: 'element',
                        tag: 'text',
                        class: ['a b'],
                        content: "text标签",
                        child: [
                            {
                                node: 'element',
                                tag: 'text',
                                class: ['a b'],
                                content: "嵌套text标签"
                            }
                        ]
                    },
                    {
                        node: 'element',
                        tag: 'view',
                        content: 'view标签',
                    },
                ]
            }
        ]
    },

})
本文由杨新朋发表并编辑,转载此文章须经作者同意,并请附上出处及本页链接。如有侵权,请联系本站删除。