Question

我对slickjs有疑问。我的应用程序从天气API获取数据。我想把这些数据放到sildes中。 Sildes由forEach和模板字符串创建。问题是slickjs需要将它的容器应用于我插入幻灯片的父元素，这没关系。但是如果在我的情况下在某些事件之后创建幻灯片，那么用户slickjs获取数据时看不到我的幻灯片，也没有将类应用于它们。但是，如果我重新调整页面的大小，浏览器将解析JS并应用这些类，以便滑块正常工作。

app.js

import { fetchForcast } from './fetch'
import { ui } from './ui'



let btn = document.getElementById('btn')

btn.addEventListener('click', getWeather)

function getWeather() {

    let city = document.getElementById('city').value
    let country = document.getElementById('country').value

    fetchForcast.fetchCall(country, city)
        .then(res => ui.showWeather(res.resData))
        .catch(err => console.log(err));
    fetchForcast.fetchCurrent(country, city)
        .then(res => ui.showCurrent(res.resData))
        .catch(err => console.log(err));

}

$(window).on('load', function() {
    window.slickSettings = {
        autoplay: false,
        autoplaySpeed: 4000,
        slidesToShow: 3,
        slidesToScroll: 3,
        dots: false,
        arrows: false,
        responsive: [{
                breakpoint: 990,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            }, {
                breakpoint: 550,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }

        ]
    };
    $('.forcast').slick(window.slickSettings);
})

UI类

 class UI {
     showCurrent(weather) {
         let rain = weather.weather[0].main

         if (rain === "Rain") {
             document.body.style.background = "url('https://images.pexels.com/photos/459451/pexels-photo-459451.jpeg?cs=srgb&dl=black-and-white-clear-cool-459451.jpg&fm=jpg')";
         }
         let output = ''
         output += `

         <div class="current__weather-box">
         <h5 class="city">${weather.name}</h5>
         <span class="country">${weather.sys.country}</span>
         <span class="desc">${weather.weather[0].description}</span>
         <ul>
             <li><span>humidity:</span><span>${weather.main.humidity}%</span></li>
             <li><span>temperature:</span><span>${weather.main.pressure}</span></li>
             <li><span>temperature:</span><span>${weather.main.temp}</span></li>
             <li><span>max:</span><span></span>${weather.main.temp_max}</li>
             <li><span>min:</span><span></span>${weather.main.temp_min}</li>

         </ul>
     </div>

              `
         document.getElementById('current-weather').innerHTML = output
     }
     showWeather(weather) {

         let output = ''

         let forcasts = weather.list.slice(1, 5)
         forcasts.forEach(forcast => {
             output += `
             <div class="forcast__box">
             <span>${forcast.dt_txt}</span>
             <ul>
             <li>${forcast.weather[0].description}</li>
                 <li>${forcast.main.humidity}</li>
                 <li>${forcast.main.pressure}</li>
                 <li>${forcast.main.temp}</li>
                 <li>${forcast.main.humidity}</li>
             </ul>
         </div> `
         })
         document.getElementById('forcast').innerHTML = output;
         $('.forcast').slick('resize');
     }
 }

 export const ui = new UI()

slickjs

$(document).ready(function() {

    $('.forcast').slick({
        autoplay: false,
        autoplaySpeed: 4000,
        slidesToShow: 3,
        slidesToScroll: 3,
        dots: false,
        arrows: false,
        responsive: [{
                breakpoint: 990,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            }, {
                breakpoint: 550,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }

        ]

    });

})

Answer 1

将slickSettings保存在全局var中（实际上在var中，可用于初始化光滑实例的所有位置）：

$(window).on('load', function() {
  window.slickSettings = {
    autoplay: false,
    ... // <= rest of your slick settings
  };
  $('.forcast').slick(window.slickSettings);
})

...并且，在您的ajax调用中，使用相同的设置重新初始化光滑：

... {  ...
  document.getElementById('forcast').innerHTML = output;
  $('.forcast').slick(window.slickSettings); // <= add this line
  ...
}

注意：您没有真的需要使用该属性对window对象进行投票，您的设置可能只是直播在一个单独的变量，但由于我对你的系统一无所知，上面的那个肯定会起作用。通常，您希望避免向窗口对象添加属性，并尝试将变量的范围限制为完成工作所需的范围。

另一个选项是在更新html后在resize上触发window事件。不在.forcast！ resize事件不会冒泡，只应放在window对象上：

只有在窗口对象上注册的处理程序才会收到事件。

仔细观察示例页面，您有slickAdd方法：

$('.forcast').slick('slickAdd',output);

...但要使其工作output，只需要额外的幻灯片。

这似乎也有效：

$('.forcast')[0].slick.refresh();

Answer 2

您可以在将标记插入DOM后手动触发resize事件以强制执行浮动重新启动

  $('.forcast').slick('resize');

或者只是等待初始化slick.js直到DOM创建完成。现在你在ajax调用完成之前调用$(document).ready()初始化光滑。

API调用后，SlickJS幻灯片无法正常工作

2 个答案: