微信小程序使用三元运算符动态渲染布局

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

<!--.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",}
})

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

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

2019-1-8补充（解决问题）

wxml

<view class="{{to_top}}">
</view>
<button bindtap='change_position'>改变位置</button>

wcss

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

Page({data: {to_top: "to-top",},change_position: function(){var that = thisconsole.log("change position " + that.data.to_top)this.setData({to_top: that.data.to_top == "to-top" ? "to-bottom":"to-top"})}
})

上面的页面在运行时是成功的：

使用三元运算符：

<view class="{{to_top ? 'to-top' : 'to-bottom'}}">
</view>
<button bindtap='change_position'>改变位置</button>

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

Page({data: {to_top: false,},change_position: function(){var that = thisconsole.log("change position " + that.data.to_top)this.setData({to_top: that.data.to_top ? false:true})}
})

运行时也成功了：

使用style设置：

<view class="to-top" style='padding-top: {{to_top? "30rpx":"320rpx"}};'>
</view>
<button bindtap='change_position'>改变位置</button>

.to-top {display: flex;flex-direction: row;justify-content: space-around;background: #000;padding: 30rpx 0 10rpx 0;
}

Page({data: {to_top: false,},change_position: function(){var that = thisconsole.log("change position " + that.data.to_top)this.setData({to_top: that.data.to_top ? false:true})}
})

最后也成功了，我记不得当时是不是忘记了用setData。但是现在使用已经都无误了。这种动态改变布局的方法配合上pisition的设置是可以做出很漂亮的布局的。

既然问题解决了，我就把博客名字改成，使用三元运算符动态渲染了。

最后非常感谢weixin_43954744在评论留言提示。

微信小程序使用三元运算符动态渲染布局相关推荐

三元运算微信小程序_微信小程序使用三元运算符代替wx:if
以地址列表中,默认地址是否选择为例. 先来看下wx:if的写法默认地址从上面的代码可以看出,标签要重复写2次,包括class样式等属性,设定某个地址为默认地址时将会有绑定事件bindtap等,还会 ...
微信小程序获取数据接口动态渲染Echarts折线图
上篇文章介绍的是最简单的折线图配置方法,若是放到开发的项目中还需要进行一些改动,比如,如何调用接口获取数据动态渲染折线图: 为了更好的体验项目开发中调取接口获得数据渲染折线图,我让朋友给我开发了接口模 ...
微信小程序使用三元运算符
样式的三元运算符的展示针对wxml中的style的三元运算符  <view class="swmc" style ...
微信小程序使用echarts绘画动态图表
微信小程序使用echarts绘画动态图表首先我们从官网下载echarts插件,路径是https://github.com/ecomfe/echarts-for-weixin,把echarts文件放到 ...
微信小程序给echarts图表动态赋值
微信小程序给echarts图表动态赋值接上一篇:微信小程序引入echart图表直接上例子(运行需要结合上一篇,拉至文章顶部进入): import * as echarts from '../../ ...
微信小程序：block制作动态商品列表
微信小程序:block制作动态商品列表在制作微信小程序时,我们往往会碰到需要动态生成列表的情况,本文便是以常见的商品列表为例来学习如何利用block制作动态商品列表. 运行截图实现代码 js: P ...
微信小程序之获取后台动态数据表格布局display:table
微信小程序之获取后台动态数据表格布局display:table 猿来独往 2018-09-02 本文没有采用flex布局和grid布局来设置表格的,而是通过 display: table;来设置. 一 ...
微信小程序之数据的同步渲染
微信小程序之数据的同步渲染结论: 微信小程序通过setData方法实现数据的同步渲染,直接修改data无法实现同步渲染. setData工作原理小程序分为逻辑层和渲染层,而每次逻辑层改变了,要借用 ...
微信小程序 - WXML 模板语法 - 条件渲染
1.wx:if (1)在微信小程序中,使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块: <view wx:if="{{conditio ...

微信小程序使用三元运算符动态渲染布局

2019-1-8补充（解决问题）

微信小程序使用三元运算符动态渲染布局相关推荐

最新文章

热门文章

微信小程序 使用三元运算符动态渲染布局

2019-1-8补充（解决问题）

微信小程序 使用三元运算符动态渲染布局相关推荐

最新文章

热门文章

微信小程序使用三元运算符动态渲染布局

微信小程序使用三元运算符动态渲染布局相关推荐