网络公司如何开网站,河北省建设工程综合信息网,wordpress 导入excel,襄阳网站建设公司通过对小红书的轮播图分析#xff0c;可得出以下总结#xff1a;
1.单张图片时容器根据图片像素定高 2.多图时轮播图容器高度以首图为锚点 3.比首图长则固高左右留白 4.比首图短则固宽上下留白
代码如下#xff1a;
templateview
!--轮播--s…通过对小红书的轮播图分析可得出以下总结
1.单张图片时容器根据图片像素定高 2.多图时轮播图容器高度以首图为锚点 3.比首图长则固高左右留白 4.比首图短则固宽上下留白
代码如下
templateview
!--轮播--swiperclassswiper :style{ height: swiperHeight px }circular:indicator-dotsindicatorDots:autoplayautoplay:intervalinterval:durationdurationindicator-active-color#FFFFFFswiper-item v-for(item, index) in imgList :keyindex image classswiper-image :srcitem modeaspectFit clickshowImage(index) :style{ height: swiperHeight px }//swiper-item/swiper/view
/templateexport default {data() {return {indicatorDots: true,autoplay: true,interval: 5000,duration: 300,imgList: [https://mainoss.duoxiaiche.com/UNCATEGORIZED/1745480113402.jpg, https://mainoss.duoxiaiche.com/UNCATEGORIZED/1745480117425.jpg, https://mainoss.duoxiaiche.com/UNCATEGORIZED/1745480122350.jpg],swiperHeight:400,//默认高度}},onLoad() {const firstImg this.imgList[0] || this.getImgHeight(firstImg).then((heightRes) {this.swiperHeight heightRes})},methods: {getImgHeight(imageUrl){let containerHeight 400return new Promise((resolve, reject) {wx.getImageInfo({src: imageUrl,success: (res) {const { width, height } resuni.getSystemInfo({success: (res) {const screenWidth res.windowWidth;const aspectRatio width / height;const imgHeight screenWidth / aspectRatio;console.log(imgHeight---,imgHeight)containerHeight imgHeight imgHeight 400 ? imgHeight : 400;resolve(containerHeight)},})},fail: (err) {console.error(Failed to get image info, err)reject(containerHeight)},})})},// 点击显示图片showImage(index) {uni.previewImage({urls: this.imgList,current: index,indicator: number});},}}
/scriptstyle langscss scoped
.swiper {.swiper-image {width: 100%;}
}
/style效果图
在这里插入图片描述
