首先来看一下实现后的样式
实现后的样式
思路: 通过父元素设置overflow: hidden属性 + 子元素宽高大于父元素来实现
注意: OfficialAccount组件限定最小宽度为300px，高度为定值84px。且一个页面只能加载一个关注公众号组件
废话不多说 上干货
import Taro from '@tarojs/taro'
import { View, OfficialAccount } from '@tarojs/components'
import './cFollow.scss'
function CFollow () {
const [show, setShow] = Taro.useState(true) // 加载失败时不展示dom, 提高性能
const [hidden, setHidden] = Taro.useState(true) // 加载成功时 将dom展示出来
/**
* @description: 加载成功回调
* @return {*}
*/
const onLoad = () => setHidden(false)
/**
* @description: 加载失败回调
* @return {*}
*/
const onError = () => setShow(false)
return show && (
<View className='c-follow' hidden={hidden}>
<View className='c-follow-warp'>
<OfficialAccount
onLoad={onLoad}
onError={onError}
className='c-follow-wx'
/>
</View>
</View>
)
}
export default Taro.memo(CFollow)
scss代码
.c-follow {
width: 700px;
height: 170px;
display: flex;
padding: 0 18px;
margin: 16px auto;
background: #fff;
align-items: center;
border-radius: 28px;
box-sizing: border-box;
justify-content: center;
&-warp {
position: relative;
width: 100%;
height: 80PX;
overflow: hidden;
}
&-wx {
position: absolute;
top: -2PX;
left: -2PX;
width: calc(100% + 4PX);
}
}
