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
        });
相关推荐
anyup12 小时前
uni-app 蓝牙打印:实现数据分片传输机制
前端·uni-app·trae
fakaifa14 小时前
【最新版】沃德代驾源码全开源+前端uniapp
前端·小程序·uni-app·开源·php·沃德代驾·代驾小程序
Monly2119 小时前
Uniapp:navigator(页面跳转)
uni-app
Monly212 天前
Uniapp:swiper(滑块视图容器)
uni-app
七七小报2 天前
uniapp-商城-32-shop 我的订单-订单详情和组件goods-list
uni-app
Monly212 天前
Uniapp:view容器(容器布局)
uni-app
上趣工作室2 天前
uniapp开发2--uniapp中的条件编译总结
uni-app
@泽栖2 天前
下载HBuilder X,使用uniapp编写微信小程序
微信小程序·小程序·uni-app
程序员王天2 天前
Uniapp 自定义TabBar + 动态菜单实现教程(Vuex状态管理详解)
微信小程序·uni-app
卡尔特斯2 天前
Uniapp 控制台日志工具(DZMUniappConsoleLog)
前端·uni-app