v-html 实现图片滚动懒加载

实现一个vue单页面滚动懒加载的插件

开发工具用的HBuilderX

1.先引入组件不然会报错

在标签中加入v-lazy-container = "{ selector:  'img' }"

后续修改了一个问题（懒加载失效）加上这段css：

 没加之前：

加了之后实现滚动加载： 

实现效果图可滚动加载： 

实现懒加载滚动效果

完整代码如下：

	
		
		
		
		
		
		
		

		
	

	
		

			
			
{{dataInfo.dusmi_title}}
			
{{dataInfo.date}} {{dataInfo.time}}
			
			

		
		
		
	

Json数据如下：

var jsonData = {
    "dusmi_id": 123456789,
    "dusmi_push_time": "2022-10-04 10:00:09",
    "dusmi_title": "系统消息标题",
    "dusmi_desc": "系统消息备注",
    "dusmi_content": "   

"
}