微信小程序 之三元運算符代替wx:if 來解決背景圖片顯示隱藏

最近在開發一個小程序項目時，碰到一個問題，

在一個多條件單項選擇中，為選中條件添加一個選中狀態，選中狀態為灰色背景，但是這個背景要用到背景圖片

大家都知道在小程序 中wxss是無法讀到本地圖標資源，只能使用外部鏈接和base64，

這倆種方法都不適合我們開發的時候使用，

但是卻可以在wxml中使用style="background-image: url(../../images/workingMode/pattern-ac.png);"方法

然后通過條件判斷來控制是否渲染

但是在小程序中，wx:if又只能控制整條內容，使用起來還要多寫2個一樣的模塊，真的是非常不爽

那么有沒有一種類似jquery的addClass方法呢？答案是有的，那就是這里要講的三元運算符。

1，使用小程序的wx:if方法來實現class添加和刪除

<text class="money on" wx:if="{{item.modeId==default}}>{{item.platformPrice/100}}元</text>
<text class="money" wx:else>{{item.platformPrice/100}}元</text>

使用三元運算符來實現class添加刪除

<text class="money {{item.modeId==default ? 'on' : ''}}">{{item.platformPrice/100}}元</text>

 

2，使用小程序的wx:if方法來實現style的添加和刪除

<radio-group class="weui-grids" bindchange="radioChange">
    <label class='weui-grid' wx:for="{{radioItems}}" wx:key="index">
        <radio class="weui-check" value="{{item.modeId}}" data-orderAmount="{{item.platformPrice}}"  />

        <view  class="weui-grid-box" wx:if="{{item.modeId==default}} style="background-image: url(../../images/workingMode/pattern-ac.png);" >
            <view class="weui-grid__label head-title">{{item.modeName}}</view>
            <view class="weui-grid__icon">
                <image class='phone-icon' style="width: {{imagewidth}}px; height: {{imageheight}}px;" bindload="imageLoad" src='{{item.imgSrc}}'></image>
            </view>
            <view class="weui-grid__label bott-title">
                金額<text class="money">{{item.platformPrice/100}}元</text>時長<text class="time">{{item.modeTime}}分鍾</text>
            </view>
        </view>

        <view  class="weui-grid-box"  wx:else>
            <view class="weui-grid__label head-title">{{item.modeName}}</view>
            <view class="weui-grid__icon">
                <image class='phone-icon' style="width: {{imagewidth}}px; height: {{imageheight}}px;" bindload="imageLoad" src='{{item.imgSrc}}'></image>
            </view>
            <view class="weui-grid__label bott-title">
                金額<text class="money">{{item.platformPrice/100}}元</text>時長<text class="time">{{item.modeTime}}分鍾</text>
            </view>
        </view>
    </label>
</radio-group>

 

使用三元運算符來實現style添加刪除

<radio-group class="weui-grids" bindchange="radioChange">
            <label class='weui-grid' wx:for="{{radioItems}}" wx:key="index">
              <radio class="weui-check" value="{{item.modeId}}" data-orderAmount="{{item.platformPrice}}"  />
              <view  class="weui-grid-box" style="{{item.modeId == default ? onShow: 'background-image: url(../../images/workingMode/pattern-ac.png);'}}" >
                <view class="weui-grid__label head-title">{{item.modeName}}</view>
                <view class="weui-grid__icon">
                  <image class='phone-icon' style="width: {{imagewidth}}px; height: {{imageheight}}px;" bindload="imageLoad" src='{{item.imgSrc}}'></image>
                </view>
                <view class="weui-grid__label bott-title">
                  金額<text class="money">{{item.platformPrice/100}}元</text>時長<text class="time">{{item.modeTime}}分鍾</text>
                </view>
              </view>
            </label>
        </radio-group>

 

不過上面這個方法得到的結果卻是反值 ，雖然將條件置反【item.modeId != default】也能實現效果，但是邏輯卻相反，思索應該是onShow: 'backgr...'中的：被解釋成了else，

待以后再想辦法解決這個問題，不過大體來說功能卻是實現了

備注：仔細研究了java的三元表達式后，原來是前面的方法用錯了，：不能用作賦值，它就是else的意思

正確寫法如下

<view  class="weui-grid-box" style="{{item.modeId == default ? 'background-image: url(../../images/workingMode/pattern-ac.png);' : null}}" >

 

 

后面給出頁面的初始值和點擊切換功能的代碼

    Page({

        /**
         * 頁面的初始數據
         */
        data: {
            radioItems: [
                {modeId:1, modeName: '加強洗', time:'30分鍾',modeTime: 30, platformPrice:500,imgSrc:'../../images/workingMode/pattern-1.png'},
                {modeId:2, modeName: '標准洗', time: '30分鍾', modeTime: 30, platformPrice: 400,imgSrc:'../../images/workingMode/pattern-1.png'},
                {modeId:3, modeName: '快速洗', time: '30分鍾',modeTime: 30, platformPrice: 300,imgSrc:'../../images/workingMode/pattern-1.png'},
                {modeId:4, modeName: '單脫水', time: '30分鍾',modeTime: 30, platformPrice: 100,imgSrc:'../../images/workingMode/pattern-1.png'},
            ],
            default:2,
            onShow:'',
        },
        radioChange: function (e) { //洗衣模式選擇事件
            // console.log('radio發生change事件，攜帶value值為：', e.detail.value);

            var radioItems = e.detail.value;//獲取每次點擊事件的值
            this.setData({
                default: radioItems //將點擊值賦值給默認值並在頁面渲染出來
            });

            var radioList = this.data.radioItems;

            for (var i = 0; i < radioList.length; i++) {  //匹配洗衣模式集合中的modeId,
                if (radioItems == radioList[i].modeId){
                    this.setData({
                        orderAmount: radioList[i].platformPrice //成功后取出價格存為全局data
                    });

                }
            }
        },
    })

效果圖：