現在、Monacaで開発をしております。
画面を進めていくと、ons-carouselを使用する画面に遷移していくのですが、この中のons-carousel-itemを動的に表示させたいのに、画面に表示されません。
try catchしようとしても、特にエラーが発生しないため、どこが悪いのかわかりませんでした。
類似の質問もあったのですが、Angularのコードだったため、出来ればjavascriptで出来るやり方を教えてほしいです。
どうかご教授お願いします。
html
1 <form name=page> 2 <ons-carousel swipeable overscrollable auto-scroll auto-refresh id="carousel" > 3 4 <div id="page_form"></div> 5 6 </ons-carousel> 7 </form>
javascript
1document.addEventListener('init', function (event) { 2 let page = event.target; 3 if (page.id == "page") { 4 page_init(); 5 } 6}); 7 8 9function page_init() { 10 try{ 11 var carousel = document.getElementById('carousel'); 12 $('#page_form').append('<ons-carousel-item>'); 13 $('#page_form').append('<ons-row>'); 14 $('#page_form').append('<ons-col>'); 15 $('#page_form').append('<ons-list class="question-area">'); 16 $('#page_form').append('<ons-list-item>'); 17 $('#page_form').append('<ons-col width="7.5em" vertical-align="top">'); 18 $('#page_form').append('<p class="highlights__pastel-blue">設問1</p>'); 19 $('#page_form').append('</ons-col>'); 20 $('#page_form').append(' '); 21 $('#page_form').append('<ons-col>'); 22 $('#page_form').append('<p>質問xxxx</p>'); 23 $('#page_form').append('</ons-col>'); 24 $('#page_form').append('</ons-list-item>'); 25 $('#page_form').append('</ons-list>'); 26 $('#page_form').append('</ons-col>'); 27 $('#page_form').append('</ons-row>'); 28 $('#page_form').append('</ons-carousel-item>'); 29 30 setImmediate(function() { 31 carousel.refresh(); 32 }); 33 34 } 35 catch(e){ 36 alert.log(e); 37 } 38 39 40}; 41 42
回答1件
あなたの回答
tips
プレビュー