公告列表
公告列表
收藏
回答

想绘制这种需要变量百分比的图怎么处理呢？只用view和背景填充能实现吗？

就是单纯的左右的填充百分比不一样，可是js里面处理得到的百分比数值，怎么才可以传给wxss呢

回答关注问题邀请回答
收藏

3 个回答

  • ⅴ
    ⅴ
    2022-10-22

    可以用css line-gradient做：

    background: linear-gradient(to left, #333 #333 60%,red 60%,red 100%);

    写在wxml的style里，通过JS控制css的百分比。

    2022-10-22
    有用 1
    回复 4
    • 一天吃五个小朋友
      一天吃五个小朋友
      2022-10-23
      多谢大佬指导：）通过linera我实现了、、、还想问一下：我是通过左右两个view填充颜色的，view内容是空的话编译器会报错 TypeError: Cannot read property '__wxElement' of null 是调试基础库的问题吗。期待您的回复
      2022-10-23
      赞
      回复
    • 一天吃五个小朋友
      一天吃五个小朋友
      2022-10-23回复一天吃五个小朋友
      因为报错的问题、、我在view里面放了个.  太丑了、、
      2022-10-23
      赞
      回复
    • ⅴ
      ⅴ
      2022-10-23回复一天吃五个小朋友
      1.你这个为空报错的问题不太了解具体情况，不好说。
      2.用linear-gradinet的话不需要多个view实现。这里写了个简单的代码片段，你看一下，是不是你想要的效果。
      https://developers.weixin.qq.com/s/GHFPTdmM7nD1
      2022-10-23
      赞 1
      回复
    • 一天吃五个小朋友
      一天吃五个小朋友
      2022-10-23回复ⅴ
      明白了！多谢大佬帮助~
      2022-10-23
      赞
      回复
  • 同步
    同步
    2022-10-23
    	<div class="parent">
		<div class="left"></div>
		<div class="right"></div>
	</div>
<style type="text/css">
	.parent {
		width: 500px;
		height: 40px;
		border: solid 2px #000;
		display: flex;
	}


	.left {
		height: 100%;
		width: 92.6%;
		background: red;
	}


	.right {
		height: 100%;
		width: calc(100% - 92.6%);


		background: blue;
	}


</style>


    2022-10-23
    有用
    回复
  • 一天吃五个小朋友
    一天吃五个小朋友
    2022-10-22

    可不可以这样，在wxml写style 然后用js传百分比过来，生成左右两个块，用不一样的背景颜色

    2022-10-22
    有用
    回复
请 登录 后发表内容
相关问题
相关文档