API调用后，SlickJS幻灯片无法工作。
我对slickjs有个问题。我的应用程序正在从天气API中获取数据。ANd我想把这些数据放进淤泥里。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
}
}
]
});
})回答 2
Stack Overflow用户
发布于 2018-05-24 11:39:19
将您的slickSettings保存在全局变量中(实际上，在您需要初始化一个光滑实例的任何地方都可以使用这个变量)：
$(window).on('load', function() {
window.slickSettings = {
autoplay: false,
... // <= rest of your slick settings
};
$('.forcast').slick(window.slickSettings);
})..。而且，在ajax调用中，用相同的设置重新初始化slick：
... { ...
document.getElementById('forcast').innerHTML = output;
$('.forcast').slick(window.slickSettings); // <= add this line
...
}注意：--您不需要--实际上，需要使用该属性对window对象进行极化，您的设置很可能只存在于一个单独的变量中，但是，由于我对您的系统一无所知，上面的设置肯定会工作。通常，您希望避免向window对象添加属性，并尝试将变量的范围限制在它们执行任务所需的范围内。
另一种选择是在更新html后在window上触发window事件。.forcast！resize事件不会冒泡，只应该放在window对象上：
只有在窗口对象上注册的处理程序才会接收事件。
仔细看一下示例页面，就可以看到slickAdd方法：
$('.forcast').slick('slickAdd',output);..。但是，要使其正常工作，output只需要额外的幻灯片。
这似乎也适用于：
$('.forcast')[0].slick.refresh();Stack Overflow用户
发布于 2018-05-24 11:41:17
您可以在将标记插入DOM之后手动触发调整大小的事件，以强制slick重新启用。
$('.forcast').slick('resize');或者只需等待初始化slick.js，直到DOM创建完成。现在在$(document).ready()上初始化slick，这是在ajax调用完成之前调用的。
https://stackoverflow.com/questions/50508296
复制相似问题
腾讯云开发者
