轻源码

  • QingYuanMa.com
  • 全球最大的互联网技术和资源下载平台
搜索
一起源码网 门户 微信小程序 查看主题

微信小程序小技巧:使用三元运算符代替wx:if,使用switchTab切换TabBar ... ...

发布者: 天花乱坠 | 发布时间: 2018-2-25 14:57| 查看数: 7029| 评论数: 1|帖子模式

一:使用三元运算符代替wx:if

以地址列表中,默认地址是否选择为例。

先来看下wx:if的写法

<view class="set-default">
    <!-- circle or success type -->
    <icon class="icon" type="success_circle" wx:if="{{item.isDefault}}"></icon>
    <icon class="icon" type="circle" wx:else></icon>
    <text>默认地址</text>
</view>

从上面的代码可以看出,<icon>标签要重复写2次,包括class样式等属性,设定某个地址为默认地址时将会有绑定事件bindtap等,还会有有data-index等自定义属性,如果是swiper、scroll-view等组件还少不了写上current、scroll-y附加属性就更加抓狂了;要是<icon>标签里还包含其他标签块,那就成几何倍增加冗余代码了,就不可想象了。到时候用wx:if写预计会长成这样:

    <icon class="icon" bindtap="iconTapped" data-index="{{index}}" wx:if="{{item.isDefault}}" type="success_circle"></icon>
    <icon class="icon" bindtap="iconTapped" data-index="{{index}}" wx:else type="circle"></icon>

再来对比看下三元运算符的写法:

<view class="set-default">
    <!-- circle or success type -->
    <icon class="icon" type="{{item.isDefault == true ? 'success_circle' : 'circle'}}"/>
    <text>默认地址</text>
</view>

与wx:if标签写法相比,显然更加简洁优雅。

由于小程序不能操作dom,三元运算符还有一个常用的使用场景是控件class样式输出,达到jQuery.addClass()的效果。例如:

<text class="viewpager-title {{current == 0 ? 'area-selected' : ''}}" bindtap="changeCurrent" data-current="0">{{provinceName}}</text>

以上书写形式参考了angular.js写法,在小程序中类比实现了。注意success_circle值要包裹在引号之中。小程序实际支持了三元运算符写法,只是文档上没有明说,比较遗憾。

wx:if文档出处:

源码下载:,本文涉及代码存于/pages/address/list文件夹中。

源码下载:dotton-lendoo-wx-master.zip

二:使用switchTab切换TabBar
摘要: TabBar页面跳转不可使用wx.navigateTo

如果待跳转页面从属于TabBar,wx.navigateTo将失效,如要切换,需使用wx.switchTab

比如电商应用的首页提供一个全部分类的按钮,点击跳转到分类页,而分类页,是从属于TabBar页,与首页同级,这时使用以下代码是无效的:

    showCategories: function () {
        wx.navigateTo({
            url: "../category/category"
        });
    },

而应该改用:

        wx.switchTab({
            url: "../category/category"
        });

源码下载:,本文涉及代码存于/pages/index文件夹中。

最新评论

bichao520 发表于 2022-5-25 08:12
音乐下载

轻源码让程序更轻更快

QingYuanMa.com

工作时间 周一至周六 8:00-17:30

侵权处理

客服QQ点击咨询

关注抖音号

定期抽VIP

Copyright © 2016-2021 https://www.171739.xyz/ 滇ICP备13200218号

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