外贸推广具体是做什么_软件工程师简历_什么是seo?_外链官网

uniapp + uview  图片列表预览组件

注意：在app端需要先判断是否存在手机相册权限

<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>

 

<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>