l***@qq.com
l***@qq.com
  • 发布:2020-04-08 13:50
  • 更新:2020-06-28 16:07
  • 阅读:2284

#插件讨论# 【 Parser富文本插件 - Jyf 】可否通过scroll-view来提供滚动

分类:uni-app

以下是我测试的

-----------------------jyf-parser.vue----------------------

  
<!--  
  parser 主模块组件  
  github:https://github.com/jin-yufeng/Parser   
  docs:https://jin-yufeng.github.io/Parser  
  插件市场:https://ext.dcloud.net.cn/plugin?id=805  
  author:JinYufeng  
  update:2020/03/26  
-->  
<template>  
	<scroll-view scroll-y scroll-x @scroll="_scroll" :scroll-top="scrollTop" :scroll-left="scrollLeft"  style="width: 100%; height: 100%;overflow: hidden;">  
		<slot v-if="!nodes.length" />  
		<view class="" :style="containerStyle">  
			<view class="top"  :style="showAm+(selectable?';user-select:text;-webkit-user-select:text':'')" :animation="scaleAm"  
			 @tap="_tap" @touchstart="_touchstart" @touchmove="_touchmove" >  
				<!--#ifdef H5-->  
				<div :id="'rtf'+uid"></div>  
				<!--#endif-->  
				<!--#ifndef H5-->  
				<trees :nodes="nodes" :lazy-load="lazyLoad" :loadVideo="loadVideo" />  
				<!--#endif-->  
			</view>  
		</view>  
  
		<image v-for="(item, index) in imgs" v-bind:key="index" :id="index" :src="item" hidden @load="_load" />  
	</scroll-view>  
</template>  
  
<script>  
	// #ifndef H5  
	import trees from './libs/trees';  
	var cache = {},  
		// #ifdef MP-WEIXIN || MP-TOUTIAO  
		fs = uni.getFileSystemManager ? uni.getFileSystemManager() : null,  
		// #endif  
		Parser = require('./libs/MpHtmlParser.js');  
	var document; // document 补丁包 https://jin-yufeng.github.io/Parser/#/instructions?id=document  
	// 计算 cache 的 key  
	function hash(str) {  
		for (var i = str.length, val = 5381; i--;)  
			val += (val << 5) + str.charCodeAt(i);  
		return val;  
	}  
	// #endif  
	// #ifdef H5  
	var rpx = uni.getSystemInfoSync().screenWidth / 750,  
		cfg = require('./libs/config.js');  
	// #endif  
	  
	var zoomInMode = 0  
	  
	export default {  
		name: 'parser',  
		data() {  
			return {  
				// #ifdef APP-PLUS  
				loadVideo: false,  
				// #endif  
				// #ifdef H5  
				uid: this._uid,  
				// #endif  
				scaleAm: '',  
				showAm: '',  
				nodes: [],  
				imgs: [],  
				  
				scrollLeft:0,  
				scrollTop:0,  
				width:0,  
				height:0,  
				scale:1  
			}  
		},  
		computed:{  
			containerStyle(){  
				if(this.width==0||this.height==0) return ''  
				return `width:${this.width*this.scale}px;height:${this.height*this.scale}px;`  
			}  
		},  
		// #ifndef H5  
		components: {  
			trees  
		},  
		// #endif  
		props: {  
			'html': null,  
			// #ifndef MP-ALIPAY  
			'autopause': {  
				type: Boolean,  
				default: true  
			},  
			// #endif  
			'autosetTitle': {  
				type: Boolean,  
				default: true  
			},  
			'compress': Number,  
			'domain': String,  
			// #ifndef MP-BAIDU || MP-ALIPAY || APP-PLUS  
			'gestureZoom': Boolean,  
			// #endif  
			// #ifdef MP-WEIXIN || MP-QQ || H5 || APP-PLUS  
			'lazyLoad': Boolean,  
			// #endif  
			'selectable': Boolean,  
			'tagStyle': Object,  
			'showWithAnimation': Boolean,  
			'useAnchor': Boolean,  
			'useCache': Boolean,  
			'xml': Boolean  
		},  
		watch: {  
			html(html) {  
				this.setContent(html);  
			}  
		},  
		mounted() {  
			// #ifdef APP-NVUE  
			console.error('本组件暂不支持 NVUE');  
			// #endif  
			// 图片数组  
			this.imgList = [];  
			this.imgList.each = function(f) {  
				for (var i = 0, len = this.length; i < len; i++)  
					this.setItem(i, f(this[i], i, this));  
			}  
			this.imgList.setItem = function(i, src) {  
				if (!i || !src) return;  
				// #ifndef MP-ALIPAY || APP-PLUS  
				// 去重  
				if (src.indexOf('http') == 0 && this.includes(src)) {  
					var newSrc = '';  
					for (var j = 0, c; c = src[j]; j++) {  
						if (c == '/' && src[j - 1] != '/' && src[j + 1] != '/') break;  
						newSrc += Math.random() > 0.5 ? c.toUpperCase() : c;  
					}  
					newSrc += src.substr(j);  
					return this[i] = newSrc;  
				}  
				// #endif  
				this[i] = src;  
				// 暂存 data src  
				if (src.includes('data:image')) {  
					var filePath, info = src.match(/data:image\/(\S+?);(\S+?),(.+)/);  
					if (!info) return;  
					// #ifdef MP-WEIXIN || MP-TOUTIAO  
					filePath = `${wx.env.USER_DATA_PATH}/${Date.now()}.${info[1]}`;  
					fs && fs.writeFile({  
						filePath,  
						data: info[3],  
						encoding: info[2],  
						success: () => this[i] = filePath  
					})  
					// #endif  
					// #ifdef APP-PLUS  
					filePath = `_doc/parser_tmp/${Date.now()}.${info[1]}`;  
					var bitmap = new plus.nativeObj.Bitmap();  
					bitmap.loadBase64Data(src, () => {  
						bitmap.save(filePath, {}, () => {  
							bitmap.clear()  
							this[i] = filePath;  
						})  
					})  
					// #endif  
				}  
			}  
			if (!this.nodes.length) this.setContent(this.html);  
		},  
		beforeDestroy() {  
			// #ifdef H5  
			if (this._observer) this._observer.disconnect();  
			// #endif  
			this.imgList.each(src => {  
				// #ifdef APP-PLUS  
				if (src && src.includes('_doc')) {  
					plus.io.resolveLocalFileSystemURL(src, entry => {  
						entry.remove();  
					});  
				}  
				// #endif  
				// #ifdef MP-WEIXIN || MP-TOUTIAO  
				if (src && src.includes(uni.env.USER_DATA_PATH))  
					fs && fs.unlink({  
						filePath: src  
					})  
				// #endif  
			})  
			clearInterval(this._timer);  
		},  
		methods: {  
			// #ifdef H5  
			_Dom2Str(nodes) {  
				var str = '';  
				for (var node of nodes) {  
					if (node.type == 'text')  
						str += node.text;  
					else {  
						str += ('<' + node.name);  
						for (var attr in node.attrs || {})  
							str += (' ' + attr + '="' + node.attrs[attr] + '"');  
						if (!node.children || !node.children.length) str += '>';  
						else str += ('>' + this._Dom2Str(node.children) + '</' + node.name + '>');  
					}  
				}  
				return str;  
			},  
			// #endif  
			setContent(html, append) {  
				// #ifdef H5  
				if (!html) {  
					if (this.rtf && !append) this.rtf.parentNode.removeChild(this.rtf);  
					return;  
				}  
				if (typeof html != 'string') html = this._Dom2Str(html.nodes || html);  
				// 处理 rpx  
				if (html.includes('rpx'))  
					html = html.replace(/[0-9.]*rpx/g, $ => parseFloat($) * rpx + 'px');  
				var div = document.createElement('div');  
				if (!append) {  
					// 处理 tag-style 和 userAgentStyles  
					let style = '<style>@keyframes show{0%{opacity:0}100%{opacity:1}}';  
					for (var item in cfg.userAgentStyles)  
						style += `${item}{${cfg.userAgentStyles[item]}}`;  
					for (item in this.tagStyle)  
						style += `${item}{${this.tagStyle[item]}}`;  
					style += '</style>';  
					html = style + html;  
					if (this.rtf) this.rtf.parentNode.removeChild(this.rtf);  
					this.rtf = div;  
				} else {  
					if (!this.rtf) this.rtf = div;  
					else this.rtf.appendChild(div);  
				}  
				div.innerHTML = html;  
				for (var styles = this.rtf.getElementsByTagName('style'), i = 0, style; style = styles[i++];) {  
					style.innerHTML = style.innerHTML.replace(/\s*body/g, '#rtf' + this._uid);  
					style.setAttribute('scoped', 'true');  
				}  
				// 懒加载  
				if (!this._observer && this.lazyLoad && IntersectionObserver) {  
					this._observer = new IntersectionObserver(changes => {  
						for (let item, i = 0; item = changes[i++];) {  
							if (item.isIntersecting) {  
								item.target.src = item.target.getAttribute('data-src');  
								item.target.removeAttribute('data-src');  
								this._observer.unobserve(item.target);  
							}  
						}  
					}, {  
						rootMargin: '900px 0px 900px 0px'  
					})  
				}  
				var _ts = this;  
				// 获取标题  
				var title = this.rtf.getElementsByTagName('title');  
				if (title.length && this.autosetTitle)  
					uni.setNavigationBarTitle({  
						title: title[0].innerText  
					})  
				// 图片处理  
				this.imgList.length = 0;  
				var imgs = this.rtf.getElementsByTagName('img');  
				for (let i = 0, j = 0, img; img = imgs[i]; i++) {  
					img.style.maxWidth = '100%';  
					var src = img.getAttribute('src');  
					if (this.domain && src) {  
						if (src[0] == '/') {  
							if (src[1] == '/')  
								img.src = (this.domain.includes('://') ? this.domain.split('://')[0] : '') + ':' + src;  
							else img.src = this.domain + src;  
						} else if (!src.includes('://')) img.src = this.domain + '/' + src;  
					}  
					if (!img.hasAttribute('ignore') && img.parentElement.nodeName != 'A') {  
						img.i = j++;  
						_ts.imgList.push(img.src || img.getAttribute('data-src'));  
						img.onclick = function() {  
							var preview = true;  
							this.ignore = () => preview = false;  
							_ts.$emit('imgtap', this);  
							if (preview) {  
								uni.previewImage({  
									current: this.i,  
									urls: _ts.imgList  
								});  
							}  
						}  
					}  
					img.onerror = function() {  
						_ts.$emit('error', {  
							source: 'img',  
							target: this  
						});  
					}  
					if (_ts.lazyLoad && this._observer && img.src && img.i != 0) {  
						img.setAttribute('data-src', img.src);  
						img.removeAttribute('src');  
						this._observer.observe(img);  
					}  
				}  
				// 链接处理  
				var links = this.rtf.getElementsByTagName('a');  
				for (var link of links) {  
					link.onclick = function() {  
						var jump = true,  
							href = this.getAttribute('href');  
						_ts.$emit('linkpress', {  
							href,  
							ignore: () => jump = false  
						});  
						if (jump && href) {  
							if (href[0] == '#') {  
								if (_ts.useAnchor) {  
									_ts.navigateTo({  
										id: href.substr(1)  
									})  
								}  
							} else if (href.indexOf('http') == 0 || href.indexOf('//') == 0)  
								return true;  
							else {  
								uni.navigateTo({  
									url: href  
								})  
							}  
						}  
						return false;  
					}  
				}  
				// 视频处理  
				var videos = this.rtf.getElementsByTagName('video');  
				_ts.videoContexts = videos;  
				for (let video, i = 0; video = videos[i++];) {  
					video.style.maxWidth = '100%';  
					video.onerror = function() {  
						_ts.$emit('error', {  
							source: 'video',  
							target: this  
						});  
					}  
					video.onplay = function() {  
						if (_ts.autopause)  
							for (let item, i = 0; item = _ts.videoContexts[i++];)  
								if (item != this) item.pause();  
					}  
				}  
				// 音频处理  
				var audios = this.rtf.getElementsByTagName('audios');  
				for (var audio of audios)  
					audio.onerror = function() {  
						_ts.$emit('error', {  
							source: 'audio',  
							target: this  
						});  
					}  
				this.document = this.rtf;  
				if (!append) document.getElementById('rtf' + this._uid).appendChild(this.rtf);  
				this.$nextTick(() => {  
					this.nodes = [1];  
					this.$emit('load');  
				})  
				setTimeout(() => this.showAm = '', 500);  
				// #endif  
				// #ifndef H5  
				var nodes;  
				if (!html)  
					return this.nodes = [];  
				else if (typeof html == 'string') {  
					let parser = new Parser(html, this);  
					// 缓存读取  
					if (this.useCache) {  
						var hashVal = hash(html);  
						if (cache[hashVal])  
							nodes = cache[hashVal];  
						else {  
							nodes = parser.parse();  
							cache[hashVal] = nodes;  
						}  
					} else nodes = parser.parse();  
					this.$emit('parse', nodes);  
				} else if (Object.prototype.toString.call(html) == '[object Array]') {  
					// 非本插件产生的 array 需要进行一些转换  
					if (html.length && html[0].PoweredBy != 'Parser') {  
						let parser = new Parser(html, this);  
						(function f(ns) {  
							for (var i = 0, n; n = ns[i]; i++) {  
								if (n.type == 'text') continue;  
								n.attrs = n.attrs || {};  
								for (var item in n.attrs)  
									if (typeof n.attrs[item] != 'string') n.attrs[item] = n.attrs[item].toString();  
								parser.matchAttr(n, parser);  
								if (n.children && n.children.length) {  
									parser.STACK.push(n);  
									f(n.children);  
									parser.popNode(parser.STACK.pop());  
								} else n.children = void 0;  
							}  
						})(html);  
					}  
					nodes = html;  
				} else if (typeof html == 'object' && html.nodes) {  
					nodes = html.nodes;  
					console.warn('错误的 html 类型:object 类型已废弃');  
				} else  
					return console.warn('错误的 html 类型:' + typeof html);  
				// #ifdef APP-PLUS  
				this.loadVideo = false;  
				// #endif  
				if (document) this.document = new document(this.nodes, 'nodes', this);  
				if (append) this.nodes = this.nodes.concat(nodes);  
				else this.nodes = nodes;  
				if (nodes.length && nodes[0].title && this.autosetTitle)  
					uni.setNavigationBarTitle({  
						title: nodes[0].title  
					})  
				this.$nextTick(() => {  
					this.imgList.length = 0;  
					this.videoContexts = [];  
					// #ifdef MP-TOUTIAO  
					setTimeout(() => {  
						// #endif  
						var f = (cs) => {  
							for (let i = 0, c; c = cs[i++];) {  
								if (c.$options.name == 'trees') {  
									for (var j = c.nodes.length, item; item = c.nodes[--j];) {  
										if (item.c) continue;  
										if (item.name == 'img') {  
											this.imgList.setItem(item.attrs.i, item.attrs.src);  
											// #ifndef MP-ALIPAY  
											if (!c.observer && !c.imgLoad && item.attrs.i != '0') {  
												if (this.lazyLoad && uni.createIntersectionObserver) {  
													c.observer = uni.createIntersectionObserver(c);  
													c.observer.relativeToViewport({  
														top: 900,  
														bottom: 900  
													}).observe('._img', () => {  
														c.imgLoad = true;  
														c.observer.disconnect();  
													})  
												} else  
													c.imgLoad = true;  
											}  
											// #endif  
										}  
										// #ifndef MP-ALIPAY  
										else if (item.name == 'video') {  
											var ctx = uni.createVideoContext(item.attrs.id, c);  
											ctx.id = item.attrs.id;  
											this.videoContexts.push(ctx);  
										}  
										// #endif  
										// #ifdef MP-BAIDU || MP-ALIPAY || APP-PLUS  
										if (item.attrs && item.attrs.id) {  
											this.anchors = this.anchors || [];  
											this.anchors.push({  
												id: item.attrs.id,  
												node: c  
											})  
										}  
										// #endif  
									}  
								}  
								if (c.$children.length)  
									f(c.$children)  
							}  
						}  
						f(this.$children);  
						// #ifdef MP-TOUTIAO  
					}, 200)  
					this.$emit('load');  
					// #endif  
					// #ifdef APP-PLUS  
					setTimeout(() => {  
						this.loadVideo = true;  
					}, 3000);  
					// #endif  
				})  
				// #endif  
				var height;  
				clearInterval(this._timer);  
				this._timer = setInterval(() => {  
					// #ifdef H5  
					var res = [this.rtf.getBoundingClientRect()];  
					// #endif  
					// #ifndef APP-PLUS || H5  
					this.createSelectorQuery()  
					// #endif  
					// #ifdef APP-PLUS  
					uni.createSelectorQuery().in(this)  
						// #endif  
						// #ifndef H5  
						.select('.top').boundingClientRect().exec(res => {  
							// #endif  
							this.width = res[0].width;  
							if (res[0].height == height) {  
								this.$emit('ready', res[0])  
								clearInterval(this._timer);  
							}  
							height = res[0].height;  
							// #ifndef H5  
						});  
					// #endif  
				}, 350)  
				if (this.showWithAnimation && !append) this.showAm = 'animation:show .5s';  
			},  
			getText(ns = this.html || this.nodes) {  
				// #ifdef H5  
				return this.rtf.innerText;  
				// #endif  
				// #ifndef H5  
				var txt = '';  
				for (var i = 0, n; n = ns[i++];) {  
					if (n.type == 'text') txt += n.txt.replace(/&nbsp;/g, '\u00A0').replace(/&lt;/g, '<').replace(/&gt;/g, '>')  
						.replace(/&amp;/g, '&');  
					else if (n.type == 'br') txt += '\n';  
					else {  
						// 块级标签前后加换行  
						var block = n.name == 'p' || n.name == 'div' || n.name == 'tr' || n.name == 'li' || (n.name[0] == 'h' && n.name[1] >  
							'0' && n.name[1] < '7');  
						if (block && txt && txt[txt.length - 1] != '\n') txt += '\n';  
						if (n.children) txt += this.getText(n.children);  
						if (block && txt[txt.length - 1] != '\n') txt += '\n';  
						else if (n.name == 'td' || n.name == 'th') txt += '\t';  
					}  
				}  
				return txt;  
				// #endif  
			},  
			navigateTo(obj) {  
				if (!this.useAnchor)  
					return obj.fail && obj.fail({  
						errMsg: 'Anchor is disabled'  
					})  
				// #ifdef H5  
				if (!obj.id) {  
					window.scrollTo(0, this.rtf.offsetTop);  
					return obj.success && obj.success({  
						errMsg: 'pageScrollTo:ok'  
					});  
				}  
				var target = document.getElementById(obj.id);  
				if (!target) return obj.fail && obj.fail({  
					errMsg: 'Label not found'  
				});  
				obj.scrollTop = this.rtf.offsetTop + target.offsetTop;  
				uni.pageScrollTo(obj);  
				// #endif  
				// #ifndef H5  
				var Scroll = (selector, component) => {  
					uni.createSelectorQuery().in(component ? component : this).select(selector).boundingClientRect().selectViewport()  
						.scrollOffset()  
						.exec(res => {  
							if (!res || !res[0])  
								return obj.fail && obj.fail({  
									errMsg: 'Label not found'  
								});  
							obj.scrollTop = res[1].scrollTop + res[0].top;  
							uni.pageScrollTo(obj);  
						})  
				}  
				if (!obj.id) Scroll('.top');  
				else {  
					// #ifndef MP-BAIDU || MP-ALIPAY || APP-PLUS  
					Scroll('.top >>> #' + obj.id + ', .top >>> .' + obj.id);  
					// #endif  
					// #ifdef MP-BAIDU || MP-ALIPAY || APP-PLUS  
					for (var anchor of this.anchors)  
						if (anchor.id == obj.id)  
							Scroll('#' + obj.id + ', .' + obj.id, anchor.node);  
					// #endif  
				}  
				// #endif  
			},  
			getVideoContext(id) {  
				if (!id) return this.videoContexts;  
				else  
					for (var i = this.videoContexts.length; i--;)  
						if (this.videoContexts[i].id == id) return this.videoContexts[i];  
			},  
			// 预加载  
			preLoad(html, num) {  
				// #ifdef H5  
				if (html.constructor == Array)  
					html = this._Dom2Str(html);  
				var contain = document.createElement('div');  
				contain.innerHTML = html;  
				var imgs = contain.querySelectorAll('img');  
				for (var i = imgs.length - 1; i >= num; i--)  
					imgs[i].removeAttribute('src');  
				// #endif  
				// #ifndef H5  
				if (typeof html == 'string') {  
					var id = hash(html);  
					html = new Parser(html, this).parse();  
					cache[id] = html;  
				}  
				var wait = [];  
				(function f(ns) {  
					for (var i = 0, n; n = ns[i++];) {  
						if (n.name == 'img' && n.attrs.src && !wait.includes(n.attrs.src))  
							wait.push(n.attrs.src);  
						f(n.children || []);  
					}  
				})(html);  
				if (num) wait = wait.slice(0, num);  
				this._wait = (this._wait || []).concat(wait);  
				if (!this.imgs) this.imgs = this._wait.splice(0, 15);  
				else if (this.imgs.length < 15)  
					this.imgs = this.imgs.concat(this._wait.splice(0, 15 - this.imgs.length));  
				// #endif  
			},  
			_load(e) {  
				// #ifndef H5  
				if (this._wait.length)  
					this.$set(this.imgs, e.target.id, this._wait.shift());  
				// #endif  
			},  
			getBoundingClientRect(fn) {  
				uni.createSelectorQuery().in(this)  
					.select('.top').boundingClientRect().exec(res => {  
						if(fn) fn(res[0])  
					})  
			},  
			_tap(e) {  
				if(!this.gestureZoom) return  
				  
				let pos = e.touches[0]  
				let cx = pos.clientX,  
					cy = pos.clientY,  
					px = pos.pageX,  
					py = pos.pageY  
  
				if(e.touches.length==1){  
					if(e.timeStamp - this._lastT < 300){  
						if(this._zoom){  
							this.getBoundingClientRect((res)=>{  
								  
								var mx = (cx  - res.left)/this.scale  
								var my = (cy-res.top)/this.scale  
  
								this._scaleAm.scale(1).step();  
								this.scaleAm = this._scaleAm.export()  
								  
								//移动滚动条  
								this.scrollLeft = this._scrollLeft-mx  
								this.scrollTop = this._scrollTop- my  
								  
								this._zoom = false  
								this.scale = 1								  
							})  
						}else{					  
							this.getBoundingClientRect((res)=>{  
								var mx = cx + (this._scrollLeft || 0)  
								var my = cy + (this._scrollTop || 0)								  
								this._scaleAm = uni.createAnimation({  
									transformOrigin: `0px 0px 0`,  
									timingFunction: 'ease-in-out',  
									duration: 0  
								});  
							  
								this.scale = 2  
								this._zoom = true	  
															  
								this._scaleAm.scale(this.scale).step()  
								this.scaleAm = this._scaleAm.export()  
								  
								//移动滚动条  
								this.$nextTick(()=>{	  
									this.scrollLeft = mx+(e.currentTarget.offsetLeft - res.left)  
									this.scrollTop = my+(e.currentTarget.offsetTop - res.top)  
								})  
							})  
  
						}  
					}  
				}  
				this._lastT = e.timeStamp;  
				return  
				  
				  
				  
				// #ifndef MP-BAIDU || MP-ALIPAY || APP-PLUS  
				if (this.gestureZoom && e.timeStamp - this._lastT < 300) {  
					var initY = e.touches[0].pageY - e.currentTarget.offsetTop;  
					if (this._zoom) {  
						this._scaleAm.translateX(0).scale(1).step();  
						uni.pageScrollTo({  
							scrollTop: (initY + this._initY) / 2 - e.touches[0].clientY,  
							duration: 400  
						})  
					} else {  
						var initX = e.touches[0].pageX - e.currentTarget.offsetLeft;  
						this._initY = initY;  
						this._scaleAm = uni.createAnimation({  
							transformOrigin: `${initX}px ${this._initY}px 0`,  
							timingFunction: 'ease-in-out'  
						});  
						// #ifdef MP-TOUTIAO  
						this._scaleAm.opacity(1);  
						// #endif  
						this._scaleAm.scale(2).step();  
						this._tMax = initX / 2;  
						this._tMin = (initX - this.width) / 2;  
						this._tX = 0;  
					}  
					this._zoom = !this._zoom;  
					this.scaleAm = this._scaleAm.export();  
				}  
				this._lastT = e.timeStamp;  
				// #endif  
			},  
			_touchstart(e) {  
				// #ifndef MP-BAIDU || MP-ALIPAY || APP-PLUS  
				if (e.touches.length == 1)  
					this._initX = this._lastX = e.touches[0].pageX;  
				// #endif  
			},  
			_touchmove(e) {  
				return  
				  
				// #ifndef MP-BAIDU || MP-ALIPAY || APP-PLUS  
				var diff = e.touches[0].pageX - this._lastX;  
				if (this._zoom && e.touches.length == 1 && Math.abs(diff) > 20) {  
					this._lastX = e.touches[0].pageX;  
					if ((this._tX <= this._tMin && diff < 0) || (this._tX >= this._tMax && diff > 0))  
						return;  
					this._tX += (diff * Math.abs(this._lastX - this._initX) * 0.05);  
					if (this._tX < this._tMin) this._tX = this._tMin;  
					if (this._tX > this._tMax) this._tX = this._tMax;  
					this._scaleAm.translateX(this._tX).step();  
					this.scaleAm = this._scaleAm.export();  
				}  
				// #endif  
			},  
			_scroll(e){  
				this._scrollLeft = e.detail.scrollLeft  
				this._scrollTop = e.detail.scrollTop  
			}  
		}  
	}  
</script>  
  
<style>  
	@keyframes show {  
		0% {  
			opacity: 0  
		}  
  
		100% {  
			opacity: 1;  
		}  
	}  
  
	/* #ifdef MP-WEIXIN */  
	:host {  
		display: block;  
		overflow: scroll;  
		-webkit-overflow-scrolling: touch;  
	}  
  
	.top {  
		display: inherit;  
	}  
  
	/* #endif */  
</style>  
  

-----------------------index.vue----------------------

<template>  
	<view style="height: 100vh;">  
		<jyf-parser style="width: 100%; height: 100%;" domain="https://6874-html-foe72-1259071903.tcb.qcloud.la" gesture-zoom lazy-load ref="article" selectable  
		 show-with-animation use-anchor @error="error" @imgtap="imgtap" @linkpress="linkpress" @parse="parse" @ready="ready">加载中...</jyf-parser>  
	</view>  
</template>  
  
<script>  
	import parser from '@/components/jyf-parser/jyf-parser'; // HBuilderX 2.5.5 及以上可以不需要  
	const testHtml = require('./html.js');  
	export default {  
		// HBuilderX 2.5.5 及以上可以不需要  
		components: {  
			'jyf-parser': parser  
		},  
		onReady() {  
			this.$refs.article.setContent(testHtml);  
		},  
		methods: {  
			parse(res) {  
				console.log('parse finish', res);  
			},  
			ready(res) {  
				console.log('ready', res);  
				// console.log('api: getText', this.$refs.article.getText());  
				console.log('imgList', this.$refs.article.imgList);  
			},  
			imgtap(res) {  
				console.log('imgtap', res);  
			},  
			linkpress(res) {  
				console.log('linkpress', res);  
				// #ifdef APP-PLUS  
				if (res.href && res.href.includes('http')) {  
					res.ignore();  
					uni.navigateTo({  
						url: '../web/web?src=' + res.href  
					})  
				}  
				// #endif  
			},  
			error(res) {  
				console.error(res);  
			}  
		}  
	}  
</script>  
  
<style>  
  
</style>  

2020-04-08 13:50 负责人:无 分享
已邀请:
Jyf

Jyf

为了解决缩放的问题吗,试了一下效果还行
就是中间过渡的那个效果没了,有点生硬
还有就是别的端不清楚,微信上 2.4.0 以下 scroll-view 中不能嵌套 video官网说明),这样的话用 video 可能又有问题
可以给需要的人做一个参考方案吧

l***@qq.com

l***@qq.com (作者)

多谢回复
过渡效果给scroll事件加上动画或 在缩放动画完成后再移动滚动条
scroll-view可以横向滚动,比用代码控制滚动顺畅一点,同时实现双指缩放应该也容易一点

l***@qq.com

l***@qq.com (作者)

现在插件放大后横向滚动也加了过渡效果,个人感觉拖动不是很顺畅

            _touchmove(e) {    
                // #ifndef MP-BAIDU || MP-ALIPAY || APP-PLUS    
                var diff = e.touches[0].pageX - this._lastX;    
                if (this._zoom && e.touches.length == 1 && Math.abs(diff) > 20) {    
                    this._lastX = e.touches[0].pageX;    
                    if ((this._tX <= this._tMin && diff < 0) || (this._tX >= this._tMax && diff > 0))    
                        return;    
                    this._tX += (diff * Math.abs(this._lastX - this._initX) * 0.05);    
                    if (this._tX < this._tMin) this._tX = this._tMin;    
                    if (this._tX > this._tMax) this._tX = this._tMax;    
                    this._scaleAm.translateX(this._tX).step();    
                    this.scaleAm = this._scaleAm.export();    
                }    
                // #endif    
            }
  • l***@qq.com (作者)

    可能参数调整一下会好点吧


    2020-04-08 16:28

  • l***@qq.com (作者)

    现在插件竖向用的是page的,用现在的类似_touchmove代码那样实现竖向滚动到顶部和底部,可能会和page的滚动有冲突吧。


    2020-04-08 16:38

  • Jyf

    回复 l***@qq.com: 是的,所以现在竖向的没有处理


    2020-04-08 18:38

Jyf

Jyf

2***@qq.com

2***@qq.com

如果我想要修改h5里的audio标签,有什么比较好的方法

该问题目前已经被锁定, 无法添加新回复