客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
???? 在taro小程序里面渲染一段html代码，具体可查看文档https://docs.taro.zone/docs/html 一、渲染 HTML文档推荐使用 dangerouslySetInnerHTML 方法来渲染HTML。 1、用法用法很简单，如下： <View className="taro_html k_html" dangerouslySetInnerHTML={{ __html: html }}></View>
2、自定义HTML样式Taro 提供两种内置样式我们可以直接引入生效，引入后只需将 HTML 容器的 CSS 类设置为 import '@tarojs/taro/html.css'； // 引入taro内置样式文件 我们自己也可以添加类名，对默认样式进行修改（如上面的k_html） .k_html { .img { width: 100%; } .p { line-height: 48px; text-align: justify; font-size: 32px; color: $color-black3a; } }
3、高级选项transformElementimage的默认mode是scaleToFill，在图片宽高不确认的情况下样式上很难调节（如下图），所以我们要更改image的mode。
使用transformElement更改image的mode为widthFixTaro.options.html.transformElement = (el) => { if (el.nodeName === 'image') { el.setAttribute('mode', 'widthFix') } return el; };
二、遇到的问题在使用transformElement更改image的mode时，我开始将这个方法放到了生命周期函数中执行，这会导致第一次进入页面的时候mode没有更改。 完整示例 import { Component } from 'react'
import Taro from "@tarojs/taro";
import { View } from '@tarojs/components'
Taro.options.html.transformElement = (el) => {
if (el.nodeName === 'image') {
el.setAttribute('mode', 'widthFix')
}
return el
}
export default class Index extends Component {
render () {
return (
<View className='home' dangerouslySetInnerHTML={{ __html: '<img src="https://a/b/c" />' }} />
)
}
}
End--------------------------
|
今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道
请发表评论