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

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

1
回复
79
查看
[复制链接]

2

主题

10

帖子

60

积分

 楼主| 2020-8-14 16:44:40 显示全部楼层 |阅读模式
本帖最后由 fanyee 于 2020-8-21 20:47 编辑

一:动态绑定样式例子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: 1.5px 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.         }}
复制代码






回复

使用道具 举报

365

主题

621

帖子

5255

积分

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

使用道具 举报

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