评论

微信小程序-cover-view组件内实现字体换行

cover-view组件内实现字体换行

1.实现目标:

在cover-view组件内实现如上效果

2.设计:

使得上层的字体可以覆盖下层的字体(使用z-index配置层级),达到目标效果

(ps.上图只是设想效果,实际上是可以完全覆盖住的)

3.代码实现:

wxml:

<live-player style='position:absolute;width:100%;height:800rpx;'>
  <cover-view style="position:absolute;bottom:40rpx;left:60rpx;background:#000;width:90%;height:200rpx;">
    <cover-view class='name_and_content'>{{name}}:{{content}}</cover-view>
    <cover-view class='name'>{{name}}:</cover-view>
  </cover-view>
</live-player>

js:

Page({
  data: {
    name: "河马Shawn",
    content: "富强民主文明和谐自由平等公正法治爱国敬业诚信友善。"
  },
})

wxss:

.name{
  position: absolute;
  display: inline;
  color: yellow;
  z-index: 1;
}
.name_and_content{
  color: white;
  white-space: normal;
  position: absolute;
  left: 0;
  top : 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

4.实现效果图:

以上就是利用cover-view组件重叠的方式实现目标效果。


最后一次编辑于  2019-06-20  
点赞 0
收藏
评论

1 个评论

  • Sure
    Sure
    2019-06-20

    在此感谢“铭锋科技”前些日子解答我的提问

    2019-06-20
    赞同
    回复
登录 后发表内容