| 1 |
- {"version":3,"sources":["webpack:///D:/Code2024/图鸟模板-社区/tuniao-ui/components/tn-lazy-load/tn-lazy-load.vue?cbdb","webpack:///D:/Code2024/图鸟模板-社区/tuniao-ui/components/tn-lazy-load/tn-lazy-load.vue?bf4d","webpack:///D:/Code2024/图鸟模板-社区/tuniao-ui/components/tn-lazy-load/tn-lazy-load.vue?9d9f","webpack:///D:/Code2024/图鸟模板-社区/tuniao-ui/components/tn-lazy-load/tn-lazy-load.vue?8690","uni-app:///tuniao-ui/components/tn-lazy-load/tn-lazy-load.vue","webpack:///D:/Code2024/图鸟模板-社区/tuniao-ui/components/tn-lazy-load/tn-lazy-load.vue?fbe7","webpack:///D:/Code2024/图鸟模板-社区/tuniao-ui/components/tn-lazy-load/tn-lazy-load.vue?eb6a"],"names":["name","props","index","type","default","image","imgMode","loadingImg","errorImg","threshold","isEffect","duration","effect","height","borderRadius","computed","thresholdValue","lazyLoadItemStyle","style","imageStyle","watch","show","setTimeout","data","elIndex","opacity","time","loadStatus","error","created","mounted","uni","contentObserver","bottom","methods","init","handleImgClick","whichImg","handleImgLoaded","handleErrorImgLoaded","handleImgError","disconnectObserver","observer"],"mappings":";;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAqI;AACrI;AACgE;AACL;AACsC;;;AAGjG;AAC8M;AAC9M,gBAAgB,qNAAU;AAC1B,EAAE,kFAAM;AACR,EAAE,mGAAM;AACR,EAAE,4GAAe;AACjB;AACA;AACA;AACA;AACA;AACA,EAAE,uGAAU;AACZ;AACA;;AAEA;AACe,gF;;;;;;;;;;;;ACvBf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;ACrBA;AAAA;AAAA;AAAA;AAAg0B,CAAgB,8zBAAG,EAAC,C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eCiCp1B;EACAA;EACAC;IACA;IACAC;MACAC;MACAC;IACA;IACA;IACAC;MACAF;MACAC;IACA;IACA;IACAE;MACAH;MACAC;IACA;IACA;IACAG;MACAJ;MACA;IACA;;IACA;IACAK;MACAL;MACAC;IACA;IACA;IACA;IACAK;MACAN;MACAC;IACA;IACA;IACAM;MACAP;MACAC;IACA;IACA;IACAO;MACAR;MACAC;IACA;IACA;IACA;IACAQ;MACAT;MACAC;IACA;IACA;IACAS;MACAV;MACAC;IACA;IACA;IACAU;MACAX;MACAC;IACA;EACA;EACAW;IACAC;MACA;MACA;MACA;IACA;IACAC;MACA;MACAC;MACA;QACAA;MACA;MACA;MACAA;MACAA;MACA;IACA;IACAC;MACA;MACA;QACAD;MACA;MACA;IACA;EACA;EACAE;IACAC;MAAA;MACA;MACA;MACA;MACA;MACA;MACAC;QACA;QACA;MACA;IACA;IACAjB;MACA;MACA;QACA;QACA;MACA;QACA;QACA;MACA;IACA;EACA;EACAkB;IACA;MACAC;MACA;MACAH;MACA;MACAI;MACA;MACAC;MACA;MACA;MACAC;MACA;MACAC;IACA;EACA;EACAC;IACA;IACA;IACA;EACA;EACAC;IAAA;IACA;IACA;MACAC;QACA;MACA;IACA;IACA;IACAT;MACA;MACA;MACAU;QACAC;MACA;QACA;UACA;UACA;UACA;UACA;QACA;MACA;MACA;IACA;EACA;EACAC;IACA;IACAC;MACA;MACA;IACA;IACA;IACAC;MACA;MACA;MACA;MACA;MAAA,KACA;MACA;MAAA,KACAC;MAEA;QACAnC;QACAmC;MACA;IACA;IACA;IACAC;MACA;QACA;QACA;MACA,OACA;QACA;QACA;QACA;MACA;IACA;IACA;IACAC;MACA;IACA;IACA;IACAC;MACA;IACA;IACAC;MACA;MACAC;IACA;EACA;AACA;AAAA,2B;;;;;;;;;;;;;ACzOA;AAAA;AAAA;AAAA;AAA+iD,CAAgB,q+CAAG,EAAC,C;;;;;;;;;;;ACAnkD;AACA,OAAO,KAAU,EAAE,kBAKd","file":"tuniao-ui/components/tn-lazy-load/tn-lazy-load.js","sourcesContent":["import { render, staticRenderFns, recyclableRender, components } from \"./tn-lazy-load.vue?vue&type=template&id=52cdbe7c&scoped=true&\"\nvar renderjs\nimport script from \"./tn-lazy-load.vue?vue&type=script&lang=js&\"\nexport * from \"./tn-lazy-load.vue?vue&type=script&lang=js&\"\nimport style0 from \"./tn-lazy-load.vue?vue&type=style&index=0&id=52cdbe7c&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"52cdbe7c\",\n null,\n false,\n components,\n renderjs\n)\n\ncomponent.options.__file = \"tuniao-ui/components/tn-lazy-load/tn-lazy-load.vue\"\nexport default component.exports","export * from \"-!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--17-0!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/template.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader/page-meta.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./tn-lazy-load.vue?vue&type=template&id=52cdbe7c&scoped=true&\"","var components\nvar render = function () {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n var s0 = _vm.__get_style([_vm.lazyLoadItemStyle])\n var s1 = !_vm.error ? _vm.__get_style([_vm.imageStyle]) : null\n var s2 = !!_vm.error ? _vm.__get_style([_vm.imageStyle]) : null\n _vm.$mp.data = Object.assign(\n {},\n {\n $root: {\n s0: s0,\n s1: s1,\n s2: s2,\n },\n }\n )\n}\nvar recyclableRender = false\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns, recyclableRender, components }","import mod from \"-!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/babel-loader/lib/index.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--13-1!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./tn-lazy-load.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/babel-loader/lib/index.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--13-1!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./tn-lazy-load.vue?vue&type=script&lang=js&\"","<template>\r\n <view class=\"tn-lazy-load-class tn-lazy-load\">\r\n <view\r\n class=\"tn-lazy-load__item\"\r\n :class=\"[`tn-lazy-load__item--${elIndex}`]\"\r\n :style=\"[lazyLoadItemStyle]\"\r\n >\r\n <view class=\"tn-lazy-load__item__content\">\r\n <image\r\n v-if=\"!error\"\r\n class=\"tn-lazy-load__item__image\"\r\n :style=\"[imageStyle]\"\r\n :src=\"show ? image : loadingImg\"\r\n :mode=\"imgMode\"\r\n @load=\"handleImgLoaded\"\r\n @error=\"handleImgError\"\r\n @tap=\"handleImgClick\"\r\n ></image>\r\n <image\r\n v-else\r\n class=\"tn-lazy-load__item__image tn-lazy-load__item__image--error\"\r\n :style=\"[imageStyle]\"\r\n :src=\"errorImg\"\r\n :mode=\"imgMode\"\r\n @load=\"handleErrorImgLoaded\"\r\n @tap=\"handleImgClick\"\r\n ></image>\r\n </view>\r\n </view>\r\n </view>\n</template>\n\n<script>\r\n export default {\r\n name: 'tn-lazy-load',\r\n props: {\r\n // 组件标识\r\n index: {\r\n type: [String, Number],\r\n default: ''\r\n },\r\n // 待显示的图片地址\r\n image: {\r\n type: String,\r\n default: ''\r\n },\r\n // 图片裁剪模式\r\n imgMode: {\r\n type: String,\r\n default: 'scaleToFill'\r\n },\r\n // 占位图片路径\r\n loadingImg: {\r\n \ttype: String,\r\n \t// default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAMAAAC3Ycb+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUM0QjNBQjkyQUQ2MTFFQTlCNUQ4RTIzNDE5RUIxNjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUM0QjNBQkEyQUQ2MTFFQTlCNUQ4RTIzNDE5RUIxNjciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QzRCM0FCNzJBRDYxMUVBOUI1RDhFMjM0MTlFQjE2NyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QzRCM0FCODJBRDYxMUVBOUI1RDhFMjM0MTlFQjE2NyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtRHfPcAAAAzUExURZWVldfX18PDw62trZubm9zc3Li4uKGhoebm5tLS0uHh4c3Nzaenp729vcjIyLKysuvr6141L40AAAcXSURBVHja7NzZlqpGAEBR5lG0//9rIw7IJKJi4or7PGTdtN10wr5SVAEGf/qqArsAiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAg+nmQFMi5Jis+sIniED23jSzIgLTtg2D//iYme/8QBM/9lQ+CAEhbNLM3N9hEHAThX7GPCiBfAxK1b51kD+R7QMLjXg7iCsgWIPUh7pfVozG791oeBPngm48G583uW5GkBvI+SBaM2xXDn1oqum423bX/mgF5FySc2cv93Voug9TdZotsggnkBZB2NzbhrSY5HnoG07jei8dvzsJB/c3W60SALILE46+WCztsbhPR7R2VJq0ukEcT49nyy8QhaKcRa3fYHZD4+ufqOJAcgDz8/59vtw1I3QP5K6JsOG0vm3hce4I8LQp/BaRZGJC3AAn7IKOKXbC+7EdA5vdmmVwOLksgRThqOqiH4XEGsht+peoPUE8U/jJIO5OLH4GEwUslV5G0PTBG5Uiw/Y2jyigO3l9HAHKv9PYb82LloH74dZBoBUgar+l48NsNvtD0fkez9iwrAvIYZDRCl+Xs149Hm/KZmQ+QjUCiO1ei4ru7EsgnQYrkznlQb7thCuRfAzlOAPN72427P4VA/i2Q/DKT/Ls/VR8fvIBsDZIuz7TPF6TCbnk4GJkB2RokejTjuE7/unlgCuSTIO0Cy+Plp6vDfnQlBchy8QtjSHVd3EgmK1bHLm+H6+nXYbz2DuQRSPnqoL7vvq0u70on4zvxgCyWD3b9UyDVdW24PaWaiGTnFZJwPIQAebDpIKheBIm7n124ZthMJipAlkqHO+IZkP1tbfzOJark/A7MgKyvvl60fRqkvXfhuow+t9+q00+0/yyBrK8ZngOtBzldhw2X9tvpNGty0gvkmbPeJ0Cy/r09s/stbmfo0yMWkEdjevgKyOn2t2pxv7UXoibTdCDLje9/Ww1ymqzn87dbp92242ZmMRjI8hASvwKSLq4udqN6ksw8nxXN3tszD9L8Gkg+2mFrQYql5az4tvFj5xOx4VwnSdeBtGdyPwUytxK77pBVlNHdO7OK3rh/eTPUvdutT3fO52tuHMqD4N7llv8pyOQQ//w19YVDfX27+Sfuby9/6nau4pdA8vEdOZuChEH/quHt0Jg+IRJ/5+PrHwKZXfjbDiS73Zo7mu5UkzX7uTsXe0e/7nC3ePf1O69+BUg2XDfZCqSqOu7rGVf8cHBe8zhC2b61dtUHXv0OkGo6ZL4JkpbRYXdUaFevivx2M/1GIOctNh949TtAoumQ+TpIHMX54CJu+8BDd8FkE5BqcZh/59XvAClmTvKfB0nDqIlHo3T70SftyW1eX9dXtgQJqs1f/Q6QaOa/7wmQKtxH8eiGoCRuovODIO3VxOMmruZbHrLyD7z6DSDtGyT7ew1kf9hNn07c986JTovzzem0Id9wUG+Vk/IDr34DSNR7huZJkMFT6vEhqrPx/j5cnlZML8N6/PAzh9Y99Flm5Yde/c9BquDOkvkKkMP58dA4qi9vivE8JOvGz/j8FokfPpr288+pH2ZPOZrLmeGD+7KOh6dqYWJ48ki7yUg0tz0go/fv/LLddfV3sgOLJyaGPY/zrSlh1a36Arkzoue9CyG35ze6E6/dzO2Ga0EGHqdRJIkfn9/8OEjTW8Vq91ZWh39FeehWA7Nu9ft8CpUEk1WWOyDF0OPyEU2Pnzf/bZC0P6IPzmAvu7KauQBVrgKpJ0tG2arHzX8e5Pb3PezNs/PrX+3JMyCLn9XXf37tPFHvt09WfCDDjx+yyn1/p1V11j7GnB/q3leLuVva79S/tzed+db08YpF4uOZtmz/9oXWMq6BCAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiAALELvqt/BBgACqVeUBXxcCkAAAAASUVORK5CYII='\r\n },\r\n // 加载失败的错误占位图\r\n errorImg: {\r\n \ttype: String,\r\n \tdefault: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAMAAAC3Ycb+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODdDMjhENDYyQUQ2MTFFQTlDQ0VBODgxQjFFOEEyMEMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODdDMjhENDcyQUQ2MTFFQTlDQ0VBODgxQjFFOEEyMEMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4N0MyOEQ0NDJBRDYxMUVBOUNDRUE4ODFCMUU4QTIwQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4N0MyOEQ0NTJBRDYxMUVBOUNDRUE4ODFCMUU4QTIwQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhLwhikAAAAzUExURZWVldfX162t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'\r\n },\r\n // 图片进入可见区域前多少像素前，单位rpx，开始加载图片\r\n // 负数为图片超出屏幕底部多少像素后触发懒加载，正数为图片顶部距离屏幕底部多少距离时触发（图片还没出现在屏幕上）\r\n threshold: {\r\n type: [Number, String],\r\n default: 100\r\n },\r\n // 是否开启过渡效果\r\n isEffect: {\r\n type: Boolean,\r\n default: true\r\n },\r\n // 动画过渡时间\r\n duration: {\r\n type: [String, Number],\r\n default: 500\r\n },\r\n // 渡效果的速度曲线，各个之间差别不大，因为这是淡入淡出，且时间很短，不是那些变形或者移动的情况，会明显\r\n // linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);\r\n effect: {\r\n \ttype: String,\r\n \tdefault: 'ease-in-out'\r\n },\r\n // 图片高度，单位rpx\r\n height: {\r\n type: [String, Number],\r\n default: 450\r\n },\r\n // 图片圆角\r\n borderRadius: {\r\n type: String,\r\n default: ''\r\n }\r\n },\r\n computed: {\r\n thresholdValue() {\r\n // 先取绝对值，因为threshold可能是负数，最后根据this.threshold是正数或者负数，重新还原\r\n let threshold = uni.upx2px(Math.abs(this.threshold))\r\n return this.threshold < 0 ? -threshold : threshold\r\n },\r\n lazyLoadItemStyle() {\r\n let style = {}\r\n style.opacity = Number(this.opacity)\r\n if (this.borderRadius) {\r\n style.borderRadius = this.borderRadius\r\n }\r\n // 因为time值需要改变,所以不直接用duration值(不能改变父组件prop传过来的值)\r\n style.transition = `opacity ${this.time / 1000}s ${this.effect}`\r\n style.height = this.$t.string.getLengthUnitValue(this.height)\r\n return style\r\n },\r\n imageStyle() {\r\n let style = {}\r\n if (typeof this.height === 'string' && this.height.indexOf('%') === -1) {\r\n style.height = this.$t.string.getLengthUnitValue(this.height)\r\n }\r\n return style\r\n }\r\n },\r\n watch: {\r\n show(val) {\r\n // 如果不开启过渡效果直接返回\r\n if (!this.effect) return\r\n this.time = 0\r\n // 原来opacity为1(不透明，是为了显示占位图)，改成0(透明，意味着该元素显示的是背景颜色，默认的白色)，再改成1，是为了获得过渡效果\r\n this.opacity = 0\r\n setTimeout(() => {\r\n this.time = this.duration\r\n this.opacity = 1\r\n }, 30)\r\n },\r\n image(val) {\r\n // 修改图片后重置部分变量\r\n if (!val) {\r\n // 如果传入null或者''，或者undefined，标记为错误状态\r\n this.error = true\r\n } else {\r\n this.init()\r\n this.error = false\r\n }\r\n }\r\n },\r\n data() {\r\n return {\r\n elIndex: this.$t.uuid(),\r\n // 显示图片\r\n show: false,\r\n // 图片透明度\r\n opacity: 1,\r\n // 动画时间\r\n time: this.duration,\r\n // 懒加载状态\r\n // loadlazy-懒加载中状态，loading-图片正在加载，loaded-图片加加载完成\r\n loadStatus: '',\r\n // 图片加载失败\r\n error: false\r\n }\r\n },\r\n created() {\r\n // 由于一些特殊原因，不能将此变量放到data中定义\r\n this.observer = {}\r\n this.observerName = 'lazyLoadContentObserver'\r\n },\r\n mounted() {\r\n // 在需要用到懒加载的页面，在触发底部的时候触发tOnLazyLoadReachBottom事件，保证所有图片进行加载\r\n this.$nextTick(() => {\r\n uni.$once('tOnLazyLoadReachBottom', () => {\r\n if (!this.show) this.show = true\r\n })\r\n })\r\n // mounted的时候，不一定挂载了这个元素，延时30ms，否则会报错或者不报错，但是也没有效果\r\n setTimeout(() => {\r\n this.disconnectObserver(this.observerName)\r\n const contentObserver = uni.createIntersectionObserver(this)\r\n contentObserver.relativeToViewport({\r\n bottom: this.thresholdValue\r\n }).observe(`.tn-lazy-load__item--${this.elIndex}`, (res) => {\r\n if (res.intersectionRatio > 0) {\r\n // 懒加载状态改变\r\n this.show = true\r\n // 如果图片已经加载，去掉监听，减少性能消耗\r\n this.disconnectObserver(this.observerName)\r\n }\r\n })\r\n this[this.observerName] = contentObserver\r\n }, 50)\r\n },\r\n methods: {\r\n // 初始化\r\n init() {\r\n this.error = false\r\n this.loadStatus = ''\r\n },\r\n // 处理图片点击事件\r\n handleImgClick() {\r\n let whichImg = ''\r\n // 如果show为false，则表示图片还没有开始加载，点击的是最开始占位图\r\n if (this.show === false) whichImg = 'lazyImg'\r\n // 如果error为true，则表示图片加载失败，点击的是错误占位图\r\n else if (this.error === true) whichImg = 'errorImg'\r\n // 点击了正常的图片\r\n else whichImg = 'realImg'\r\n \r\n this.$emit('click', {\r\n index: this.index,\r\n whichImg: whichImg\r\n })\r\n },\r\n // 处理图片加载完成事件，通过show来区分是占位图触发还是加载真正的图片触发\r\n handleImgLoaded() {\r\n if (this.loadStatus = '') {\r\n // 占位图加载完成\r\n this.loadStatus = 'lazyed'\r\n }\r\n else if (this.loadStatus == 'lazyed') {\r\n // 真正的图片加载完成\r\n this.loadStatus = 'loaded'\r\n this.$emit('loaded', this.index)\r\n }\r\n },\r\n // 处理错误图片加载完成\r\n handleErrorImgLoaded() {\r\n this.$emit('error', this.index)\r\n },\r\n // 处理图片加载失败\r\n handleImgError() {\r\n this.error = true\r\n },\r\n disconnectObserver(observerName) {\r\n const observer = this[observerName]\r\n observer && observer.disconnect()\r\n }\r\n }\r\n }\n</script>\n\n<style lang=\"scss\" scoped>\r\n .tn-lazy-load {\r\n &__item {\r\n background-color: $tn-bg-gray-color;\r\n overflow: hidden;\r\n \r\n &__image {\r\n // 解决父容器会多出3px的问题\r\n display: block;\r\n width: 100%;\r\n // 骗系统开启硬件加速\r\n transform: transition3d(0, 0, 0);\r\n // 防止图片加载“闪一下”\r\n will-change: transform;\r\n }\r\n }\r\n }\n</style>\n","import mod from \"-!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/stylePostLoader.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--8-oneOf-1-2!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-3!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js??ref--8-oneOf-1-4!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--8-oneOf-1-5!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./tn-lazy-load.vue?vue&type=style&index=0&id=52cdbe7c&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/stylePostLoader.js!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--8-oneOf-1-2!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-3!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js??ref--8-oneOf-1-4!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--8-oneOf-1-5!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./tn-lazy-load.vue?vue&type=style&index=0&id=52cdbe7c&lang=scss&scoped=true&\"","// extracted by mini-css-extract-plugin\n if(module.hot) {\n // 1731893493346\n var cssReload = require(\"D:/self software/HBuilderX.3.99.2023122611/HBuilderX/plugins/uniapp-cli/node_modules/mini-css-extract-plugin/dist/hmr/hotModuleReplacement.js\")(module.id, {\"hmr\":true,\"publicPath\":\"/\",\"locals\":false});\n module.hot.dispose(cssReload);\n module.hot.accept(undefined, cssReload);\n }\n "],"sourceRoot":""}
|
