请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

技术分享 【vivo】快应用动态绑定样式和class

6
回复
2558
查看
  [复制链接]

6

主题

18

帖子

120

积分

 楼主| 2020-8-14 16:44:40 显示全部楼层 |阅读模式
本帖最后由 fanyee 于 2021-2-8 15:48 编辑 一:动态绑定样式例子1 view层:
  1. <div class="column check" style="transform:{{rotate}}">
  2. <image src="../common/imgs/home_icon1.png" class="face" @click="goBanner('2')"></image>
  3. <text>扫脸检测</text>
  4. </div>
复制代码
data层
  1. data: {
  2. rotate: 'rotate(9deg)',
  3. },
复制代码
例子2
  1. style="{{index === '0'?' height: 320px; border-bottom: 1px solid #F2F2F2;':''}}"
复制代码
二:动态绑定class 例子1 view层
  1. <div class="top {{ content.length > 1 ? (content.length-1 == $idx ? '' : 'line-bottom') : ''}}" onclick="{{ subtitleLink($item.link) }}">
  2. <text class="title">{{$item.title}}</text>
  3. <text class="subtitle">{{$item.subtitle[0].label}}:{{$item.subtitle[0].text}}</text>
  4. </div>
复制代码
例子2 view层
  1. class="result-item {{index !== '0'?'result-item-charitableOrg':''}}"
复制代码
style
  1. .result-item {
  2. justify-content: space-between;
  3. align-items: center;
  4. margin: 0 60px;
  5. padding: 54px 0;
  6. &-charitableOrg {
  7. border-bottom: 1.5px solid #F2F2F2;
  8. height: 320px;
  9. }}
复制代码
回复

使用道具 举报

464

主题

759

帖子

6440

积分

2020-8-19 10:06:10 显示全部楼层
感谢分享!
官方客服微信:kuaiyingyongguanKF
官方QQ群2:1012199894
回复

使用道具 举报

3

主题

4

帖子

35

积分

2020-9-23 22:58:59 显示全部楼层
原来改变style等方式都得通过过先传到data里,再出结果变化
回复

使用道具 举报

4

主题

8

帖子

60

积分

2021-8-31 11:44:13 显示全部楼层
这样做了 但是页面dom样式已经上去了 页面却没更新显示 如何破
回复

使用道具 举报

6

主题

18

帖子

120

积分

 楼主| 2021-8-31 19:21:01 显示全部楼层
guodaxia 发表于 2021-8-31 11:44 这样做了 但是页面dom样式已经上去了 页面却没更新显示 如何破

 view层:

< text
  class = "title-img {{flag?'title-img-default':'title-img-active'}}"
  @click = "change" >
      < /text>

 data层

  data: {
      flag: true,
  },

   change() {
    this.flag = !this.flag
  },

 style

.title-img {
  width: 140px;
  height: 140px;
  &-default {
    background-image: url("https://quickapp.gjzwfw.gov.cn/admin/resource/file/download/home_handleAffairs1.png");
  }
  &-active {
    background-image: url("https://quickapp.gjzwfw.gov.cn/admin/resource/file/download/home_handleAffairs2.png");
  }
}

效果测试是成功的

1.默认

![avator](https://bbs.quickapp.cn/data/attachment/forum/202108/31/190314bz3nagehrpx38rpe.png)

2.点击change()

![avator](https://bbs.quickapp.cn/data/attachment/forum/202108/31/190318e09ysn487np8880y.png)


回复

使用道具 举报

4

主题

8

帖子

60

积分

2021-9-1 15:05:09 显示全部楼层
fanyee 发表于 2021-8-31 19:21  view层:< text   class = "title-img {{flag?'title-img-defa ...
我也测试到了 我这边是把calss动态绑定在text父级的 less是层级嵌套好的 text的样式就是在页面上没更新 然后我直接把class动态绑定在text上 重新less样式 就好了 为啥less层级嵌套的不行
回复

使用道具 举报

2

主题

4

帖子

30

积分

2022-3-30 12:00:50 显示全部楼层

fanyee 发表于 2021-8-31 19:21  view层:< text   class = "title-img {{flag?'title-img-defa ...
那我要使用计算属性拼接clsss属性值可以么?我自己测试下来样式没加上
  1. &lt; template&gt;
  2. &lt; div class=&quot;{{rootCls}}&quot;&gt;&lt; /div&gt;
  3. &lt; /template&gt;
  4. &lt; script&gt;
  5. export default {
  6. data() {
  7. return {
  8. visit: true
  9. }
  10. computed:{
  11. rootCls() {
  12. const cls = [&#39;pop&#39;]
  13. if (!this.visit) {
  14. cls.push(&#39;hide&#39;)
  15. }
  16. return cls.join(&#39; &#39;)
  17. }
  18. }
  19. }
  20. &lt; /script&gt;
  21. &lt; style lang=&quot;less&quot;&gt;
  22. .pop{
  23. position: absolute;
  24. width:200px;
  25. height:200px;
  26. }
  27. .hide{
  28. display:none;
  29. }
  30. &lt; /style&gt;
复制代码

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册