water_affairs/pages/facility/modules/previewImage.vue

<template>
    <view class="container">
        <swiper v-if="list.length" class="swiper" :indicator-dots="list.length > 1" :circular="true" indicator-color="#999"
            indicator-active-color="#fff">
            <swiper-item v-for="(item, index) in list" @click="preview(index)" :key="item.url">
                <image class="image" :src="item.url" mode="aspectFit" lazy-load="true" />
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
export default {
    name: "prodnum-06",
    props: {
        attinfos: Array
    },
    data() {
        return {
            list: []
        }
    },
    watch: {
        attinfos: function (newVal) {
            this.list = newVal.filter(v => v.usetype == "previewImage")
        }
    },
    methods: {
        preview(index) {
            console.log(index)

            uni.previewImage({
                current: index,
                urls: this.list.map(v => v.url),
                indicator: "number",
                loop: true,
                longPressActions: {
                    itemList: ['发送给朋友', '保存图片', '收藏'],
                    success: function (data) {
                        console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
                    },
                    fail: function (err) {
                        console.log(err.errMsg);
                    }
                }
            });
        }
    },
}
</script>

<style lang="scss" scoped>
.container {
    .swiper {
        width: 355px;
        height: 158px;
        margin: 15px auto 0;

        .image {
            width: 355px;
            height: 158px;
        }
    }

}
</style>