召隆企博汇论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 2272|回复: 0

小程序 如何在wxss中使用js里的变量?

[复制链接]

1

主题

3

回帖

144

积分

注册会员

Rank: 2

积分
144
发表于 2020-7-24 15:38:48 | 显示全部楼层 |阅读模式
本帖最后由 liwp 于 2020-7-27 12:07 编辑
8 `8 c$ \: N! j2 g( a" P
) d2 M3 c1 n, {, bwxml:
" H0 W$ W3 N2 g+ }& v
  1. <view class="comments_box" style="{{unfold?'max-height:'+GoodsInfo.reviewList.length*80+20+'rpx;':''}}">) u/ R: Y9 t6 ~. C
  2.     <view class="unfoldText" wx:if="{{GoodsInfo.reviewList.length>1}}" bindtap="clickUnfold">{{unfoldText}}</view>
    & ?' x2 t) O* T- y
  3.     <block wx:for="{{GoodsInfo.reviewList}}" wx:key='index'>
    4 y* O$ ^5 A  d% S/ `
  4.         <view class="comments_box_list" style='transition: transform 300ms linear 0ms;transform: translateY(-{{unfold?0:((GoodsInfo.reviewList.length<1)?(index==0?(1-GoodsInfo.reviewList.length)*30:(1-GoodsInfo.reviewList.length+index)*30):index*30)}}rpx);'>
    # P* D( }( a7 b# s$ k( f6 u
  5.             <view class="comments_box_list_left">{{item.ReviewAppellation}}</view>: ^0 n( [3 S5 l$ _, C  H
  6.             <view class="comments_box_list_right">{{item.ReviewContent}}</view>
    ! {( @9 y: y: T5 \7 {' b
  7.         </view>
    : M0 Z, @" o* _+ e5 L
  8.     </block> 0 u3 F1 P* @4 D$ Z3 H* f! T/ L
  9. </view>
复制代码
wxss:
. [/ n6 i6 Y: U! K
  1. .comments_box{
    9 x  h. @. N2 L3 D) ^3 i7 t
  2.   margin-top: 20rpx;8 a, w& |1 N3 [, ^9 y; e0 T
  3.   width: 100%;! F& |) L8 k# G- u: e2 w$ N0 i5 C: }9 \
  4.   overflow: hidden;3 f! v2 Z. R* N
  5.   transition: max-height 0.5s;' s3 m9 p5 b, ?2 H2 l& B4 B
  6.   overflow: hidden;5 K/ c7 P8 R# f) c. _
  7.   max-height: 105rpx;
    ; Z& W- q7 z% N( X
  8. }
复制代码
我这里是使用动画来控制comments_box这个view的高度(max-height)变化时的过渡效果,我在wxss中给定固定值测试是可以实现效果的,但是因为这个view的高度是随数据变化的,所以我只能在wxml中通过GoodsInfo.reviewList的数组长度计算出高度之后赋值,结果测试后发现没有动画效果。, f. J0 V9 N8 l( W* H; f
所以我想在wxss中来使用GoodsInfo.reviewList的数组长度来计算高度,百度了一下,发现都是在wxml中使用的,跟我想要的不一样。+ k$ k8 I4 z4 i* Y

% s4 J6 N9 q3 k% F2 P* S6 Y' D

* k* D; I7 a7 i6 _( u9 Y1 `
4 D' N; j: g# \! B2 ?# ]0 {4 w8 ?
+ m! B/ Z; A+ J6 K
0 l4 n; ?+ \. z  E

6 X- ^; d( J# A8 c" Z8 U# Q; I  F8 l; P1 {! t* {9 n5 B
已解决:

/ ^& G, |" t  Y3 A* K
在开发过程中,通常碰到样式非固定的情况,这时候就要使用变量来规定样式,例如,一个view的宽度需要使用变量:
1. 在wxss中,定义变量:width:var(--width--);
2. 在js中,定义变量:viewWidth,并给这个变量赋予想要的值
3. 在xml中,使用wxss中的变量和js中的变量:style="--width--: {{ viewWidth }}px"
. V: |7 F9 [$ ?9 f$ {1 X; I
回复

使用道具 举报

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

本版积分规则

QQ|Archiver|手机版|小黑屋|召隆企博汇 ( 粤ICP备14061395号 )

GMT+8, 2025-10-14 08:54 , Processed in 0.044277 second(s), 25 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表