在Onsen UI 2中通过JavaScript动态添加新的轮播项目
[英]Adding new carousel item dynamically by javascript in onsen UI 2
问题描述
Trying to add new carousel item dynamically by javascript in Onsen UI 2 but it is now working. 
尝试在Onsen UI 2中通过javascript动态添加新的轮播项目，但现在可以使用。 The code I am using is as below 我正在使用的代码如下
<!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>
The code I am using to add new carousel item is as below: 我用来添加新的轮播项目的代码如下：
// 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);
};
Please guide where I am doing wrong. 请指出我做错了什么。 Any code sample or web link would be appreciated. 任何代码示例或Web链接将不胜感激。
1 个解决方案
解决方案1
1 已采纳 2017-03-13 03:44:30
You can put your <ons-navigator> inside the <ons-splitter-content> and erase the page attribute of the <ons-splitter-content> . 你可以把你的<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>
This will solve the initialization of the two home.html pages. 这将解决两个home.html页面的初始化。
Also you should switch the document.getElementById("id") method in your function with the page.querySelector("#id") method, since the later searches for the id on the current page. 另外，您还应该使用page.querySelector("#id") document.getElementById("id")方法在函数中page.querySelector("#id")方法，因为稍后会在当前页面上搜索id 。
Therefore your function should look something like this: 因此，您的函数应如下所示：
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);
};
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.