uniapp中使用swiper实现详情页面轮播图动态高度，实现仿某红薯图片展示轮播图效果。

我很牛的别不信

已于 2024-10-30 16:20:22 修改

阅读量760

点赞数 8

CC 4.0 BY-SA版权

文章标签： uni-app 前端 vue.js 前端框架

于 2024-10-27 02:12:52 首次发布

本文链接：https://blog.csdn.net/qq_22508011/article/details/143262848

0、废话部分可以不看

在用uniapp开发小程序过程中，想写一个某红薯详情页面的轮播图，开始用来uview3的swiper组件，非常简洁。但是，存在图片显示不完全或者很小，或者又不能很美观。因为什么呢？

主要是图片原尺寸基本上都是9：16或者16：9的比例，想要按比例将图片显示完整，尽可能效果好点试了很多方式，都不能很好的按照图片高度动态一个最大值设置为swiper高度。总有显示不完整的情况。就很丑。记得当时这个height属性弄得我很麻烦。看官方图

二、最终方案：uniapp的swiper

直接上代码：

1、详情 detail.vue 页面：

:style="{height: swiperHeight + 'px'}"  //该属性用来动态绑定计算后的swiper高度

其他属性参考官方：https://uniapp.dcloud.net.cn/component/swiper.html

mode="widthFix"是图片的裁剪方式  

定义看官方：https://uniapp.dcloud.net.cn/component/image.html

<template>
	<view class="container">
		<swiper class="swiper-box" :style="{height: swiperHeight + 'px'}" :indicator-dots="indicatorDots"
			:autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item class="swiper-item" v-for="(item, index) in swiperItem" :key="index">
				<image class="image" :src="item.image" mode="widthFix" @load="onImageLoad($event, item)" />
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import { mapState } from 'vuex';

export default {
	// name: 'DetailPage',
	computed: {
		...mapState(['list'