uni-app实现多个图片预览

el/2024/5/23 2:14:20

html的写法:

<view >
                    <image @click="openImg(indexUrl,itemImg.url)" v-for="(itemImg,indexUrl) in info.images" class="w-100"             mode="widthFix"  :key="indexUrl" :src="itemImg.url"></imag>
</view>    

<script>

   export default{

      data(){

         return{

                 info:{
                    username:"昵称",
                    userpic:"/static/default.jpg",
                    newstime:"2019-10-20 下午04:30",
                    isFollow:false,
                    title:"我是标题",
                    titlepic:"/static/demo/datapic/11.jpg",
                    support:{
                        type:"support", // 顶
                        support_count:1,
                        unsupport_count:2
                    },
                    comment_count:2,
                    share_num:2,
                    content:"",
                    images:[{
                        url:"https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/4.jpg"
                    },{
                        url:"https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/5.jpg"
                    }]
                }

         }

      },

      //由于图片预览这个固定写法中需要将所传图片路径变为数组的形式,但

上面所定义的是数组对象的形式获取值,所需首先map筛选一下

   computed:{

      imageList(){

         return this.info.images.map(item=>item.url)

      }

   } ,

methods:{

 openImg(index){

   //预览图片

   uni.previewImage({

   //current根据根据所传的下标,放大数组中与下标相对应的图片

     current:index,

     urls:this.imageList 

   })   

  }

}

}

</script>


http://www.ngui.cc/el/3419163.html

相关文章

js中判断值的各种方式

//1.判断两个值是否相等 let v1,x2,s1; object.is(v,x) //false object.is(v,s) //true //2.判断json中是否包含某个键 let tt{xx:123,cc:‘3’’}; tt.xxd’’;’ tt.hasOwnProperty(‘xx’); //true tt.hasOwnProperty(‘xxd’);//true tt.hasOwnProperty(‘hasOwnProp…

@vue/cli卸载后安装新版本,无法卸载解决方式

今天更新vue/cli时&#xff0c;遇到问题&#xff1a;卸载不掉旧版本4.0 运行了npm uninstall vue/cli -g&#xff0c;之后&#xff0c;居然是up to date in,或者是显示删了很多文件&#xff0c;但是一运行 vue -V依然是可以查看版本的&#xff0c;说明没有卸载掉 以下方法可成…

VUE父级使用子组件以插槽的形式,在父级修改内容任意向子级插入

**父级组件的写法&#xff1a;** 子组件是firstSon <template> <div> <first-son> //向子组件中插入此内容 <div slot"firstcontent"></div> </first-son> </div&…

Map转成JSON对象

实际场景&#xff1a; 后端接口需要你传的参数是以上类型&#xff0c;由于是答题的场景&#xff0c;每次点击下一题则自动将题号作为键&#xff0c;选项作为值传入&#xff0c;等待所有题目答完统一传给后端 let val11; let val22; let zhinew Map(); //map追加值得方式 zhi.…

将传入的参数以值一为key,值2为value的形式作为JSON接收

let obj{};obj[值一]值2//结果为&#xff1a;{值一&#xff1a;值二}JSON.stringify(obj);//结果为&#xff1a;{值一&#xff1a;值二}

js针对img类型的文件上传实例

<!--accept限制上传图片的类型格式是&#xff1a;image/*,或text/* multiple是多选设置--> <input type"file" multiple accept"image/*" id"uploadInp"> <!--将选择的图片做一个缩略图--> <img src"" alt&qu…

H5 aliplayer的各种坑

https://www.cnblogs.com/qijinwen/p/8963373.html

关于分页 设置所有数据的唯一值,从一开始

分页&#xff1a; &#xff08;当前页码-1&#xff09;*分页大小1分页id 实战场景&#xff1a; //其中id是设置全部数据唯一值从一开始 result.data.records.forEach((value,index)>{obj{Id:((Number(result.data.page)-1)*Number(result.data.size))index1,MajorCateNam…

Vue打包后清除日志的方法

在项目的根目录创建vue.config.js文件module.exports{lintOnSave: true,configureWebpack: (config)>{if(process.env.NODE_ENV production){config.optimization.minimizer[0].options.terserOptions.compress.drop_console true}},}

1. Vue 中下载当前网页为pdf

1.下载插件 yarn add jspdf yarn add html2canvas //htmlToPdf.jsimport html2canvas from html2canvasimport JSPDF from jspdfexport default {install(Vue, options) {Vue.prototype.ExportSavePdf function (htmlTitle, currentTime,currentTag) {var element docume…