微信小程序样式拼接 类名三元运算 以及条件拼接

好久没更新了,最近加班到搞一个小程序,经常用到的运算格式,记录下。

1、简单的行内样式拼接

<view class=‘navbar-title‘ style=‘ top:{{navTop}}px; color:{{titColor}}; background:url({{info.goods_img}}) no-repeat;‘>
    {{pageName}}
</view>
<!--info.goods_img --> 为变量属性。

2.行内样式三元运算拼接

<view  style="display:  {{ 条件? ‘block‘ :  ‘none‘ }}"/></view> 

3、类名三元运算符

<view class="scroll-classify box-sizing {{ fixed ? ‘fixedClass‘ : ‘‘}}"></view>

 4、类名与样式结合使用(行内top值为变量的情况下)

<view class="haowuTab box-sizing {{ fixed ? ‘fiexd‘ : ‘‘ }} {{ showDialog ? ‘dialogShow‘ : ‘‘ }}" style="top:{{ fixed ? top+‘px‘ : 0+‘rpx‘ }}"></view>

 

微信小程序样式拼接 类名三元运算 以及条件拼接

上一篇:小程序的 提示弹框


下一篇:C#微信小程序 笔记1