求大佬指点！这个图片切换效果怎么实现？

Immerse

发布于 2025-09-17 13:37:16

6300

代码可运行

文章被收录于专栏：沉浸式趣谈沉浸式趣谈

运行总次数：0

代码可运行

大家好，我是 Immerse，一名独立开发者、内容创作者、AGI实践者。

• 关注公众号：#沉浸式趣谈，获取最新文章（更多内容只在公众号更新)
• 个人网站：https://yaolifeng.com 也同步更新。
• 转载请在文章开头注明出处和版权信息。

我会在这里分享关于编程、独立开发、AI、出海、个人思考等内容。

如果本文对你有帮助，欢迎动动小手指一键三连(点赞、评论、转发)，给我一些支持和鼓励，谢谢！

最近一周，接到个需求：要求在小程序中实现图片从底部“长”出来的效果。

在 Web 端很容易实现的效果，到了小程序却完全不是那么回事。

01 需求分析

第一时间拿到这个需求，脑子里已经有两种实现方案了：

方案一：定位大法(position)

• 容器相对定位 + 图片绝对定位到底部
• 水平居中对齐，切换 src 实现效果

方案二：Flex 布局

• 容器 flex 布局 + align-items: flex-end
• 图片自然贴底对齐

详细需求：

1. 图片切换时，底部位置保持不变。
2. 图片本身要完整显示，不能因为容器高度限制而被裁剪。
3. 图片要在父元素盒子里宽度 100% 显示。

但是！！！这两种方式在小程序中都无法正常工作！

具体效果

效果图

02 Web 端完美实现

定位大法(position)

具体的方式上面说过了，直接上代码：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>图片底部对齐切换 (Position版)</title>
        <style>
            body {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                margin: 0;
                background-color: #f0f0f0;
            }
            .main-container {
                width: 375px;
                height: 600px;
                border: 2px solid #ccc;
                background-color: #fff;
                display: flex;
                flex-direction: column;
            }

            .image-container {
                height: 90%;
                background-color: #e0e0e0;

                /* 关键：将父容器设为定位上下文 */
                position: relative;
            }

            /* 2. 图片本身样式 */
            .image-to-switch {
                /* 关键：启用绝对定位 */
                position: absolute;

                /* 关键：将其底部固定在父容器底部 */
                bottom: 0;

                /* 关键：水平居中定位 */
                left: 50%;
                transform: translateX(-50%);

                /* 保证图片完整显示 */
                max-width: 100%;
                max-height: 100%;
            }

            /* 按钮样式，与之前相同 */
            .toggle-button {
                height: 10%;
                border: none;
                background-color: #007bff;
                color: white;
                font-size: 18px;
                cursor: pointer;
                outline: none;
                transition: background-color 0.3s;
            }
            .toggle-button:hover {
                background-color: #0056b3;
            }
        </style>
    </head>
    <body>
        <div class="main-container">
            <div class="image-container">
                <img
                    id="my-image"
                    class="image-to-switch"
                    src="https://yaolifeng.com/other/blogs/53320a90a0a3476c969b6950bee3a1a7-2.png"
                    alt="切换图片"
                />
            </div>

            <button id="toggle-btn" class="toggle-button">切换图片</button>
        </div>

        <script>
            const imageElement = document.getElementById('my-image');
            const toggleButton = document.getElementById('toggle-btn');
            const image1_url =
                'https://yaolifeng.com/other/blogs/53320a90a0a3476c969b6950bee3a1a7-2.png';
            const image2_url = 'https://qncdn.mopic.mozigu.net/work/143/25/94141d5b4fcd44f3/result.png';

            toggleButton.addEventListener('click', function () {
                if (imageElement.src.includes('53320a90a0a3476c969b6950bee3a1a7-2')) {
                    imageElement.src = image2_url;
                } else {
                    imageElement.src = image1_url;
                }
            });
        </script>
    </body>
</html>

Flex 布局

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>图片底部对齐切换</title>
        <style>
            body {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                margin: 0;
                background-color: #f0f0f0;
            }

            .main-container {
                width: 375px;
                height: 600px;
                border: 2px solid #ccc;
                background-color: #fff;
                display: flex;
                flex-direction: column;
            }

            .image-container {
                height: 90%;
                background-color: #e0e0e0;
                display: flex;
                justify-content: center;
                align-items: flex-end;
            }

            .image-to-switch {
                max-width: 100%;
                max-height: 100%;
            }

            .toggle-button {
                height: 10%;
                border: none;
                background-color: #007bff;
                color: white;
                font-size: 18px;
                cursor: pointer;
                outline: none;
                transition: background-color 0.3s;
            }
        </style>
    </head>
    <body>
        <div class="main-container">
            <div class="image-container">
                <img
                    id="my-image"
                    class="image-to-switch"
                    src="https://yaolifeng.com/other/blogs/53320a90a0a3476c969b6950bee3a1a7-2.png"
                    alt="切换图片"
                />
            </div>

            <button id="toggle-btn" class="toggle-button">切换图片</button>
        </div>

        <script>
            const imageElement = document.getElementById('my-image');
            const toggleButton = document.getElementById('toggle-btn');
            const image1_url =
                'https://yaolifeng.com/other/blogs/53320a90a0a3476c969b6950bee3a1a7-2.png';
            const image2_url = 'https://qncdn.mopic.mozigu.net/work/143/25/94141d5b4fcd44f3/result.png';

            toggleButton.addEventListener('click', function () {
                if (imageElement.src.includes('53320a90a0a3476c969b6950bee3a1a7-2')) {
                    imageElement.src = image2_url;
                } else {
                    imageElement.src = image1_url;
                }
            });
        </script>
    </body>
</html>

03 小程序的痛点

在小程序中使用完全相同的实现思路，却发现：

• 图片不会按照父元素宽高自动撑开
• width: 100% 在 image 组件上不起作用
• mode="aspectFit" 会导致图片无法占满宽度

小程序效果对比

具体的代码

<template>
    <view class="out">
        <view class="image-view">
            <image :src="imageUrl" class="image" mode="aspectFit" />
        </view>
        <button class="toggle-btn" @click="toggleImage">切换图片</button>
    </view>
</template>

<script>
    exportdefault {
        data() {
            return {
                image2_url: 'https://qncdn.mopic.mozigu.net/work/143/25/94141d5b4fcd44f3/result.png',
                imageUrl:
                    'https://yaolifeng.com/other/blogs/53320a90a0a3476c969b6950bee3a1a7-2.png',
            };
        },
        methods: {
            toggleImage() {
                this.imageUrl = this.imageUrl === this.imageUrl ? this.image2_url : this.imageUrl;
            },
        },
    };
</script>

<style lang="scss" scoped>
    page {
        width: 100%;
        height: 100%;
    }
    .out {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background-color: #f0f0f0;
    }

    .image-view {
        height: 90%;
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }

    .image {
        width: 100%!important;
        max-width: 100%;
        max-height: 100%;
    }

    .toggle-btn {
        height: 10%;
        flex-shrink: 0;
        background-color: #007bff;
        color: white;
        font-size: 16px;
        border-radius: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>