Question

我试图解决这个问题2天，我是Javascript的新手目前我正在使用visual studio + Cordova + Framework 7

var pet1 = select_all('pet');

    $$('#pet1').empty();

    $$.each(pet1, function (index, value) {

        $$('#pet1').append('<li>'
            + '<div class="item-link item-content">'
            + '      <div class="item-media">'
            + '          <img style="width:80px;height:60px" src="http://file.nowdb.net/' + value.cover + '">'
            + '      </div>'
            + '      <div class="item-inner">'
            + '          <div class="item-title-row">'
            + '              <div class="item-title">' + value.title + '</div>'
            + '              <div class="item-after">Element label</div>'
            + '          </div>'
            + '          <div class="item-subtitle">' + value.description + '</div>'
            + '          <div class="item-text">Additional description text</div>'
            + '      </div>'
            + '</div>'
            + '</li>');

    });

这很好用

之后，我在Framework 7中找到了一个名为Modal With Slider的文档代码在这里http://framework7.io/docs/modal.html

调用open-slider-modal

我不知道为什么无法复制代码

但问题是我不知道如何将此代码添加到其中请帮帮我，抱歉我的英语不好。谢谢大家

Answer 1

好的，我已经自己完成了，会在这里发布答案，以帮助那些面临像我这样的问题的人

var pet1 = select_all('pet');

$$('#pet1').empty();

$$.each(pet1, function (index, value) {

    $$('#pet1').append('<li>'
        + '<div class="item-link item-content">'
        + '      <div class="item-media">'
        + '          <img style="width:80px;height:60px" src="http://file.nowdb.net/' + value.cover + '">'
        + '      </div>'
        + '      <div class="item-inner">'
        + '          <div class="item-title-row">'
        + '              <div class="item-title">' + value.title + '</div>'
        + '              <div class="item-after">Element label</div>'
        + '          </div>'
        + '          <div class="item-subtitle">' + value.description + '</div>'
        + '          <div class="item-text">Additional description text</div>'
        + '      </div>'
        + '</div>'
        + '</li>');

});

只是

继续下面的代码

$$('.open-slider-modal').on('click', function () {
  var modal = myApp.modal({
    title: 'Awesome Photos?',
    text: 'What do you think about my photos?',
    afterText:  '<div class="swiper-container" style="width: auto; margin:5px -15px -15px">'+
                  '<div class="swiper-pagination"></div>'+
                  '<div class="swiper-wrapper">'+
                    '<div class="swiper-slide"><img src="..." height="150" style="display:block"></div>' +
                    '<div class="swiper-slide"><img src="..." height="150" style="display:block"></div>'+
                  '</div>'+
                '</div>',
    buttons: [
      {
        text: 'Bad :('
      },
      {
        text: 'Awesome!',
        bold: true,
        onClick: function () {
          myApp.alert('Thanks! I know you like it!')
        }
      },
    ]
  })
  myApp.swiper($$(modal).find('.swiper-container'), {pagination: '.swiper-pagination'});
});

然后

首先更改

$$('.open-slider-modal').on('click', function () {

到

$$(document).on('click', '.open-slider-modal', function () {

更改列表中的班级

<div class="item-media open-slider-modal">'

你将完成

框架7中的列表和模态

1 个答案: