uniapp使用宫格实现多张图片预览

一、页面渲染

javascript 复制代码
     <uni-grid :column="4" :highlight="true"  @change="change" >
            <uni-grid-item v-for="(item,index) in checkDetail.imgSrcs"     
                    :key="index":index="index" >
                  <view class="grid-item-box"  style="background-color: #fff">
                        <image class="image" :src="item" mode="aspectFill"/>
                   </view>
            </uni-grid-item>
    </uni-grid>

二、change函数

change函数 点击 grid 触发 返回值 e={detail:{index:0}} index 为当前点击 grid下标

javascript 复制代码
      change(e) {
        console.log(e,'indexs')
        uni.previewImage({
               urls: this.checkDetail.imgSrcs,
               current: e.detail.index,
               loop:true
        });
相关推荐
程序猿看视界13 小时前
Uni-app页面信息与元素影响解析
uni-app·状态栏·安全区域·窗口信息·像素比
清晨細雨13 小时前
UniApp集成极光推送详细教程
android·ios·uni-app·极光推送
_未知_开摆13 小时前
uniapp APP端在线升级(简版)
开发语言·前端·javascript·vue.js·uni-app
Li_na_na0114 小时前
解决安卓手机WebView无法直接预览PDF的问题(使用PDF.js方案)
android·pdf·uni-app·html5
web_Hsir19 小时前
uniapp 微信小程序项目中 地图 map组件 滑动面板
微信小程序·uni-app·notepad++
平凡的阿泽1 天前
uniapp编译的app在ios上内存泄漏了
uni-app
大叔_爱编程1 天前
wx203基于ssm+vue+uniapp的教学辅助小程序
vue.js·小程序·uni-app·毕业设计·ssm·源码·课程设计
咸虾米_1 天前
uniapp微信小程序获取用户手机号uniCloud云开发版
微信小程序·小程序·uni-app·unicloud·获取手机号
伊泽瑞尔.2 天前
uniapp自定义目录tree(支持多选、单选、父子联动、全选、取消、目录树过滤、异步懒加载节点、v-model)vue版本
uni-app
lyz2468592 天前
uniapp uni-swipe-action滑动内容排版改造
uni-app