uniapp + uview 图片列表预览组件
注意:在app端需要先判断是否存在手机相册权限
html
<template>
<!-- css使用的是uview1.0组件中的css -->
<!-- u-image 使用的是uview1.0的组件 -->
<view class="u-flex u-row-between u-flex-wrap">
<view class="u-m-b-24" v-for="(item, index) in imgList" :key="index">
<u-image @click="preImg(index)" :border-radius="borderRadius" :width="width" :height="height" :src="item[name]"></u-image>
</view>
<view :style="{ width: width }" v-for="i in remaining" :key="i"></view>
</view>
</template>
javascript
<script>
export default {
props: {
/* 图片宽度 */
width: {
type: String,
default: '144rpx'
},
/* 图片高度 */
height: {
type: String,
default: '144rpx'
},
/* 图片圆角 */
borderRadius: {
type: [String, Number],
default: '8'
},
/* 图片数组 */
imgList: {
type: Array,
default: () => {
return [];
}
},
/* 组件内部读取的imgList参数中的属性名 */
name: {
type: String,
default: 'image'
},
/* 可空余几个位置 */
remaining: {
type: Number,
default: 0
},
/* 是否可循环预览,默认值为 false */
loop: {
type: Boolean,
default: false
}
},
methods: {
preImg(index) {
/* app端需要在这里先判断是否已开启相册权限 */
let urls = [];
this.imgList.map((item, i) => {
if (index == i) {
urls.unshift(item[this.name]);
} else {
urls.push(item[this.name]);
}
});
uni.previewImage({
urls,
loop:this.loop
});
}
}
};
</script>