微信小程序swiper图片不显示，swiper添加图片无法加载出来

这篇文章主要介绍了微信小程序swiper使用网络图片不显示问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

wxml代码：

autoplay=”true” interval=”3000″ duration=”1″>

js代码：

data: {

imgUrls: [

“http://img0.imgtn.bdimg.com/it/u=2394972844,3024358326&fm=26&gp=0.jpg”,

“http://img5.imgtn.bdimg.com/it/u=3008142408,2229729459&fm=26&gp=0.jpg”,

“http://img4.imgtn.bdimg.com/it/u=2939038876,2702387014&fm=26&gp=0.jpg”

]

}

结果：(无法显示，查看控制台无报错)

解决，swiper添加宽高。

wxss：

.container{

width: 100%;

}

.container swiper{

width: 100%;

}

能正常显示了：

微信小程序懒加载

随着移动互联网的快速发展，小程序作为一种全新的应用形态，受到越来越多人的青睐。在小程序开发中，图片展示是非常常见的需求，而懒加载则是其中一个非常有用的技术。

什么是懒加载？

懒加载是指在页面滚动到可视区域时才加载图片，以提高页面的加载速度和用户的体验。在微信小程序中，采用懒加载技术可以减少页面打开时的流量、节省带宽，同时也能够提高用户的体验感，让用户感到页面加载更快。

如何在微信小程序中实现图片懒加载？

我们可以通过在小程序中使用 PHP 脚本实现图片的懒加载。当用户打开小程序时，PHP 脚本会遍历所有需要需要懒加载的图片，并将每张图片的 URL 存储到一个数组中。当用户滚动页面时，小程序会发出一个 AJAX 请求，从服务器端获取存储图片 URL 的数组，并根据需要懒加载的图片的位置，将该位置对应的图片进行加载。

具体实现步骤如下：

1. 遍历所有需要懒加载的图片，并将每张图片的 URL 存储到一个数组中。PHP 代码如下：

$urls = array();
$imgs = glob("images/*.jpg");
foreach($imgs as $img) {
    $url = "http://example.com/".$img;
    array_push($urls, $url);
}

1. 在小程序中发出 AJAX 请求，从服务器端获取存储图片 URL 的数组。小程序采用 wx.request 方法发出 AJAX 请求，并设置 responseType 为 json。代码如下：

wx.request({
    url: 'http://example.com/geturls.php',
    method: 'GET',
    responseType: 'json',
    success: function(res) {
        var urls = res.data.urls;
    }
})

3. 监听页面滚动事件，并根据需要懒加载的图片的位置，将该位置对应的图片进行加载。小程序采用 wx.createIntersectionObserver 方法监听页面滚动事件，判断需要懒加载的图片是否进入可视区域。
4. 在监听器的 observe 方法中，判断需要懒加载的图片是否进入可视区域，如果是，则将该图片的 URL 赋值给对应的图片标签的 src 属性，实现图片的懒加载。代码如下：

var observer = wx.createIntersectionObserver();
observer.relativeToViewport({bottom: 100}).observe('.lazyload', (res) => {
    if (res.intersectionRatio > 0) {
        var index = res.dataset.index;
        var url = urls[index];
        var img = this.data.list[index];
        img.src = url;
        this.setData({
            list: this.data.list
        });
    }
})

总结

以上就是在微信小程序中使用 PHP 脚本实现图片懒加载的方法。采用懒加载技术可以提高页面的加载速度和用户的体验，减少页面打开时的流量、节省带宽。希望此文章能够对大家在小程序开发中的实践有所启发。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。