dangerouslySetInnerHTML={{ __html: option[optionFix] }}例如：
let var ='<label style='color:red'>加载数据</label>';
render() {
return (<divdangerouslySetInnerHTML={{ __html: option[optionFix] }} />)
}2.默认事件以前的滑动穿透
兼容ios写法：
1. passive:false 参数不写明 。在某些浏览器的默认参数不一样，导致穿透无法解决
document.body.addEventListener('touchmove', function (e) {e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)}, {passive: false});2.添加样式解决
<body style="touch-action:none;"></body>3.真机调试H5
<script src=".3.0/vconsole.min.js"></script><script type="text/javascript">var vConsole = new VConsole();
</script>4.截屏示例 html2canvas
npm install html2canvas --save
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import QRCodes from &#act';
import cssModules from 'react-css-modules';
import styles from '../myQRC/qrc.scss';
import html2canvas from 'html2canvas';
import $ from 'jquery';const urlParam = getUrlParam();
export const SCREEN_W = document.documentElement.clientWidth;
const backImg = require('../../images/qrc_bg.png');
@cssModules(styles, { allowMultiple: true, errorWhenNotFound: false })
class Qrc extends Component {static propTypes = {appState: PropTypes.object,dispatch: PropTypes.func,};constructor(props) {super(props);const { sessionId } = urlParam;let requestSrc = 'ios';if (userAgentInfo.isApp()) {if (userAgentInfo.isIOS()) requestSrc = 'ios';if (userAgentInfo.isAndroid()) requestSrc = 'android';}this.state = {isShow: false,qrc: '',userId: '',imgShow: false,imgPath: '',};/* ${window.NORMAL_SERVER}/user/myQrc.jpg?sessionId=${sessionId}&requestSrc=${requestSrc}&v=${w()}*/}componentDidMount() {this.props.dispatch(toGetOpenStatus(urlParam)).then((rs) => {console.log(`rs = ${JSON.stringify(rs)}`);if (rs && rs.userId) {this.setState({qrc: `${TOMCAT_PRE_QRC_ADDRESS}?invUserId=${rs.userId}#signRegist`,userId: rs.userId,}, () => {this.setState({isShow: true,});});}});// 延时生成图片const that = this;setTimeout(() => {html2canvas($('#myQrcDiv')[0]).then((canvas) => {const src = DataURL('image/jpeg');that.setState({imgShow: true,imgPath: src,});});}, 1000);}render() {return !this.state.isShow ? '' : (<div style={{ height: '100%' }}><divid="myQrcDiv"styleName="qcrContent"style={{ backgroundImage: `url(${backImg})`, display: !this.state.imgShow ? 'block' : 'none' }}><div styleName="qrcBox"><div styleName="title">您的专属邀请码为</div><div styleName="qrcNumber">{this.state.userId}</div><div styleName="qrcDesc">好友也可以在注册时直接填写邀请码</div><div styleName="splitLine" /><QRCodesvalue={this.state.qrc}size={SCREEN_W * 0.50}/><div styleName="desc">邀请好友扫描二维码</div></div></div><img src={this.state.imgPath} style={{ display: this.state.imgShow ? 'block' : 'none', width: '100%' }} /></div>);}
}
5.页面第一次加载，或刷新时，页面闪烁
5.1 Vue中可写几种都能防止
<style>[v-cloak] {display: none;}
</style><span v-bind="xx"></span><span v-cloak>{{xx}}</span><span v-html="xx"></span>5.2 普通可以先隐藏页面，加载完成在显示
<body id="bodyV" style="display: none"></body> load = function () {ElementById('bodyV').style.display = 'block';}6.手机打开相机、相册设置
<!-- 打开选择相机或相册 --><input type="file" accept="image/*" /><!-- android手机且使用QQ浏览器 --><input type="file" accept="image/*" capture="camera" />//正常情况下，上面那句大多数手机是直接打开相机，
本文发布于:2024-01-31 01:11:24，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170663468324267.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
