更新记录

1.0.0（2025-03-25） 下载此版本

发布初版

平台兼容性

Album 相册

组件名: xt-album

适配情况需自行尝试,开发时只测试了 H5、APP、微信小程序

安装方式

本组件符合 easycom 规范，HBuilderX 3.1.0 起，只需将本组件导入项目，在页面 template 中即可直接使用，无需在页面中 import 和注册 components

注意事项

如何阻止事件冒泡

vue2：在组件上直接使用@click.native.stop，如：<xt-icon @click.native.stop='click'></xt-icon>;

vue3：由于 vue3 没有native修饰符,所以不能直接在组件上使用.stop修饰符,只能嵌套一层view标签,在外层view上添加@click.stop阻止冒泡

基本用法

<template>
    <view class="xt">
        <view>
            <view>基础使用</view>
            <xt-album :urls="list"></xt-album>
        </view>
        <view>
            <view>单图模式</view>
            <xt-album :urls="list2"></xt-album>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            list: [
                'http://img9.vilipix.com/picture/pages/regular/2021/08/15/10/14/48456097_p0_master1200.jpg',
                'https://img2.baidu.com/it/u=2957562685,2198634793&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1737565200&t=fe793276ec3656ef227916ec5572c4e',
                'http://img9.vilipix.com/picture/pages/regular/2021/05/08/11/56/62242914_p0_master1200.jpg',
                'https://img2.baidu.com/it/u=2957562685,2198634793&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1737565200&t=fe793276ec3656ef227916ec552c94e',
                'https://img2.baidu.com/it/u=2957562685,2198634793&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1737565200&t=fe793276ec3656ef227916ec5572c94e',
                'http://img9.vilipix.com/picture/pages/regular/2021/04/27/22/38/75726416_p0_master1200.jpg',
                'https://img2.baidu.com/it/u=2957562685,2198634793&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1737565200&t=fe793276ec3656ef227916ec5572c94e',
                'http://img9.vilipix.com/picture/pages/regular/2021/08/15/10/14/48456097_p0_master1200.jpg',
                'https://img2.baidu.com/it/u=2957562685,2198634793&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1737565200&t=fe793276ec3656ef227916ec5572c94e',
                'http://img9.vilipix.com/picture/pages/regular/2021/06/08/09/18/56402703_p0_master1200.jpg',
                'https://img2.baidu.com/it/u=2957562685,2198634793&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1737565200&t=fe793276ec3656ef227916ec5572c94e',
                'http://img9.vilipix.com/picture/pages/regular/2021/05/16/11/10/68198008_p0_master1200.jpg',
                'http://img9.vilipix.com/picture/pages/regular/2021/06/08/09/31/83314745_p0_master1200.jpg',
                'https://img2.baidu.com/it/u=2957562685,2198634793&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1737565200&t=fe793276ec3656ef227916ec5572c94e',
                'http://img9.vilipix.com/picture/pages/regular/2021/10/11/11/58/61524931_p0_master1200.jpg'
            ],
            list2: ['http://img9.vilipix.com/picture/pages/regular/2021/08/15/10/14/48456097_p0_master1200.jpg']
        };
    },
    mounted() {},
    methods: {}
};
</script>
<style scoped>
.xt {
    padding: 20rpx 10rpx;
    display: flex;
    flex-direction: column;
    gap: 20rpx;
}
</style>

API