微信小程序:记一次处理首页轮播图遇到的坑

时间:2024-03-27 21:38:20

初入坑微信小程序开发,稍稍记录下开发过程中遇到的问题。

想做个首页轮播图,用到了<swiper>标签,结果图片一直加载不出来。

微信小程序:记一次处理首页轮播图遇到的坑

代码如下:

微信小程序:记一次处理首页轮播图遇到的坑

刚开始以为是图片路径错误,没能加载到图片。然后写了binderror和bindload方法测试。结果没报错,而是图片成功加载到了,但没显示出来。说明并非图片路径问题。

微信小程序:记一次处理首页轮播图遇到的坑

后来一直找原因,找啊找啊,终于找到样式上了。

微信小程序:记一次处理首页轮播图遇到的坑

注意看,我对<image>标签的宽和高都是设置为auto的,之所以一开始如此设置,是因为我觉得,class=slide-swiper的标签宽和高都设置了,那<image>就auto好了。

氮素,这样是不可以的。

正确的写法应该是:

微信小程序:记一次处理首页轮播图遇到的坑

如此,图片就出来了。

微信小程序:记一次处理首页轮播图遇到的坑

以上,仅为记录。