快应用图片懒加载

缺乏、安全感 2023-07-16 03:36 26阅读 0赞

<template>
        <div class="image-load" style="width:{ {width}};height:{ {height}};" onclick="handleClickImage">
            <stack>
                <div show="{ {showImage}}" class="placeholder"></div>
                <image class="{ {mode==='contain'?'contain':''}} { {mode==='stretch'?'stretch':''}} { {mode==='center'?'center':''}}" src="{ {imageUrl}}" onerror="handleError" oncomplete="handleComplete"></image>
                <image src="./loading.gif" if="{ {showLoading}}"></image>
            </stack>
        </div>
    </template>
    <script>
    import prompt from '@system.prompt'
    import network from '@system.network'
    export default { 
        props: { 
            width: { 
                type: [String, Number],
                default: '100%'
            },
            height: { 
                type: [String, Number],
                default: '100%'
            },
            src: { 
                type: String,
                default: ''
            },
            mode: { 
                type: String,
                detault: ''
            },
            reload:{ 
                type:Number,
                default:0
            }
        },
        onInit() { 
            // network.subscribe({ 
            //     callback:function(res){ 
            //         if(res.type!=='none'&&this.netType==='none'){ 
            //             this.handleClickImage()
            //         }
            //         this.netType = res.type
            //     }.bind(this)
            // })
            this.imageUrl = this.src
            this.$watch('reload','handlReload')
        }, 
        handlReload(newV, oldV){ 
            if(newV===1&&oldV===2){ 
                this.handleClickImage()
            }
        },
        data: { 
            netType:null,
            showImage: true,
            showLoading:false,
            imageUrl:''
        },
        handleError() { 
            this.showLoading = false
            prompt.showToast({ 
                message: '图片加载失败，请稍后再试'
            })
        },
        handleComplete(){ 
            this.showImage = false
            this.showLoading = false
        },
        handleClickImage(){ 
            if(!this.showImage) { return ''}
            const imageUrl = this.imageUrl
            this.imageUrl = ''
            this.showLoading = true
            setTimeout(()=>{ 
                this.imageUrl = imageUrl
            },500)
            // this.$emit('press')
        }
    }
    </script>
    <style lang="less">
    .image-load { 
      display: flex;
      .placeholder{ 
          width:100%;
          height:100%;
          background-color: rgba(0,0,0,.2);
      }
      image { 
        width: 100%;
        height: 100%;
        resize-mode: cover;
      }
      .contain { 
        resize-mode: contain;
      }
      .stretch { 
        resize-mode: stretch;
      }
      .center { 
        resize-mode: center;
      }
    }
    </style>