微信小程序 三元运算符不起作用 | 出bug |解决方法

版权声明：转载请注明出处 https://blog.csdn.net/le_17_4_6/article/details/81950589

今天在写微信小程序时，被坑到了，

<!--.wxml->
<view class="row-in {{to_top ? 'to-top' : 'to-bottom'}}">
    ...
</view>

本意是想做一个简单的动态页面的，在用户点击按钮的时候，菜单会进行一个上滑置顶：

/*.wxss*/
.row-in {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  background: #f3f2f27c;
}
.to-bottom {
  padding: 320rpx 0 10rpx 0;
}
.to-top {
  padding: 30rpx 0 10rpx 0;
}

//.js
Page({
    data: {
        to_top: false,
    }
})

调试的时候发现不管怎么改这个三元运算符，它显示的都只是‘:’前的那个，如代码中的’to-top’。

改了很久，不知道问题在哪里，百度也没有找到解决办法。

只好换一种写法：

<!--.wxml->
<view class="{{to_top}}">
    ...
</view>
/*.wxss*/
.row-in {
}
.to-bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  background: #f3f2f27c;
  padding: 320rpx 0 10rpx 0;
}
.to-top {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  background: #f3f2f27c;
  padding: 30rpx 0 10rpx 0;
}
//.js
Page({
    data: {
        to_top: "to-top",
    }
})

如上修改后问题解决了，但用不了三元运算符还是很不满意。

个人猜测可能是代码在动态加载时的次序先后，导致的这个问题。如果知道是为什么，怎么解决的朋友欢迎留言告诉我，感谢！