0

尝试在Onsen UI 2中通过 javascript 动态添加新的轮播项目，但它现在正在工作。我正在使用的代码如下

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="node_modules/onsenui/css/onsenui.css"/>
        <link rel="stylesheet" href="node_modules/onsenui/css/onsen-css-components.css"/>
        <script src="node_modules/onsenui/js/onsenui.js"></script>
        <script src="jquery.js"></script>
    </head>

    <body>
        <ons-splitter>
            <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
                <ons-page>
                    <ons-list>
                        <ons-list-item onclick="fn.load('home.html')" tappable>
                            Home
                        </ons-list-item>
                    </ons-list>
                </ons-page>
            </ons-splitter-side>
            <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
            <ons-navigator id="myNavigator" page="home.html"></ons-navigator>
        </ons-splitter>

        <ons-template id="home.html">
            <ons-page id="home">
                <ons-toolbar>
                    <div class="left">
                        <ons-toolbar-button onclick="fn.open()">
                            <ons-icon icon="ion-navicon, material:md-menu" size="32px, material:24px"></ons-icon>
                        </ons-toolbar-button>
                    </div>
                    <div class="center top-bar-title"></div>
                    <div class="right">                 
                        <ons-toolbar-button id="addInCarousel">
                            <ons-icon icon="ion-ios-plus, material:md-plus" size="32px, material:24px"></ons-icon>
                        </ons-toolbar-button>
                    </div>
                </ons-toolbar>

                <ons-carousel auto-refresh fullscreen swipeable auto-scroll overscrollable id="itemsCarousel" direction="horizontal">
                    <ons-carousel-item>
                        <img src="images/01.jpg" style="width: 100%; height: auto;"/>                   
                    </ons-carousel-item>                
                    <ons-carousel-item id="caro2">
                        <img src="images/02.jpg" style="width: 100%; height: auto;"/>
                    </ons-carousel-item>                
                </ons-carousel>
            </ons-page>
        </ons-template>

        <script>
            window.fn = {};
            window.fn.open = function() {
                var menu = document.getElementById('menu');
                menu.open();
            };

            window.fn.load = function(page) {
                var content = document.getElementById('content');
                var menu = document.getElementById('menu');
                // content.load(page).then(menu.close.bind(menu));
                document.querySelector('#myNavigator').pushPage(page);
                menu.close();
            };  

            ons.ready(function() {
                var carousel = document.addEventListener('postchange', function(event) {
                    console.log('Changed to ' + event.activeIndex);
                });     
            });

            document.addEventListener("init",function(event) {
                var page = event.target;

                if( page.matches('#home') ) {
                    // set page header title
                    page.querySelector('ons-toolbar .center').innerHTML = 'Testing App';

                    // clicking on header add button for adding new carousel item
                    page.querySelector('#addInCarousel').onclick = function() {
                        console.log("In function");
                        var onsItem= document.createElement('ons-carousel-item');                       
                        onsItem.innerHTML = '<img src="images/020.jpg" style="width: 100%; height: auto;"/>';               
                        document.getElementById('itemsCarousel').appendChild(onsItem);
                    };          
                }
            }, false);
        </script>
    </body>
</html>

我用来添加新轮播项目的代码如下：

// clicking on header add button for adding new carousel item
                    page.querySelector('#addInCarousel').onclick = function() {
                        console.log("In function");
                        var onsItem= document.createElement('ons-carousel-item');                       
                        onsItem.innerHTML = '<img src="images/020.jpg" style="width: 100%; height: auto;"/>';               
                        document.getElementById('itemsCarousel').appendChild(onsItem);
                    };

请指导我在哪里做错了。任何代码示例或网络链接将不胜感激。

4

1 回答 1

1

你可以把你的<ons-navigator>里面的<ons-splitter-content>和擦除的page属性<ons-splitter-content>。

<ons-splitter-content id="content">
    <ons-navigator id="myNavigator" page="home.html"></ons-navigator>       
</ons-splitter-content>

这将解决两个home.html页面的初始化。

此外，您应该使用方法切换document.getElementById("id")函数中的page.querySelector("#id")方法，因为稍后会id在当前页面上搜索。

因此，您的函数应如下所示：

page.querySelector('#addInCarousel').onclick = function() {
     console.log("In function");
     var onsItem= document.createElement('ons-carousel-item');                       
     onsItem.innerHTML = '<img src="images/020.jpg" style="width: 100%; height: auto;"/>';               
     page.querySelector('#itemsCarousel').appendChild(onsItem);
};
于 2017-03-13T03:44:30.457 回答