wxappenddom's Introduction

wxAppendDom

@(自造轮子)

解决微信小程序不支持动态插入DOM节点

##使用将pages/tmpl文件夹复制进你的项目中，在需要动态插入节点的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标签',
                    },
                ]
            }
        ]
    },
    
})