色婷婷久久一区二区三区麻豆,欧美性性性性性色大片免费的 ,а天堂8中文最新版在线官网

首頁(yè)

微信小程式

小程式開發(fā)

微信小程式關(guān)於Radio選取樣式切換的實(shí)例詳解

黃舟

May 29, 2018 pm 04:43 PM

Radio 小程式樣式

這篇文章主要介紹了詳解微信小程式Radio選取樣式切換的相關(guān)資料,需要的朋友可以參考下

詳解微信小程式Radio選取樣式切換

本篇文章主要講解在微信小程式中如何根據(jù)Radio選取來切換樣式。效果如下：

原理主要是判斷一個(gè)radio-group中哪一個(gè)被選中，就讓它加上一個(gè)「active」的樣式。

程式碼如下：

<!--index.wxml--> 
<view class="container"> 
 <radio-group bindchange="radioCheckedChange"> 
  <view class="flex_box"> 
   <view class="flex_item"> 
    <label class="{{radioCheckVal==0?&#39;active&#39;:&#39;&#39;}}">人氣 
     <radio value="0"  hidden="true"></radio> 
    </label> 
   </view> 
   <view class="flex_item"> 
    <label class="{{radioCheckVal==1?&#39;active&#39;:&#39;&#39;}}"> 銷量 
     <radio value="1" hidden="true"></radio> 
    </label> 
   </view> 
   <view class="flex_item"> 
    <label class="{{radioCheckVal==2?&#39;active&#39;:&#39;&#39;}}"> 價(jià)格↑ 
     <radio value="2" hidden="true"></radio> 
    </label> 
   </view> 
  </view> 
 </radio-group> 
</view>

index.wxml程式碼中可以看到，先隱藏radio的原始樣式，利用lable點(diǎn)選來觸發(fā)radioCheckedChange事件監(jiān)聽函數(shù)。

/**index.wxss**/ 
radio-group{ 
 width: 100%; 
} 
.flex_box{ 
 display: flex; 
 width: 100%; 
 background: #eee; 
} 
.flex_item{ 
 flex: 1; 
 text-align: center; 
} 
.flex_item label{ 
 padding: 10px 0; 
 display: inline-block; 
 width: 50%; 
} 
.flex_item label.active{ 
 color: red; 
 border-bottom: 2px solid red; 
  
}

index.wxss中，使用flex佈局讓它們平分，並定義「active」樣式。

//index.js 
//獲取應(yīng)用實(shí)例 
var app = getApp() 
Page({ 
 data: { 
  radioCheckVal:0 
 }, 
 radioCheckedChange:function(e){ 
  this.setData({ 
   radioCheckVal:e.detail.value 
  }) 
 } 
})

index.js中，定義一個(gè)接收radio選取值的變數(shù)radioCheckVal，當(dāng)監(jiān)聽事件被觸發(fā)時(shí)，記錄下被選取的radio value。

最重要的一點(diǎn)是這句話：

<label class="{{radioCheckVal==0?&#39;active&#39;:&#39;&#39;}}">人氣 
    <radio value="0"  hidden="true"></radio> 
   </label>

利用簡(jiǎn)單的判斷表達(dá)式，取data中被選中的radio,判斷當(dāng)==當(dāng)前radio value值時(shí)，為lable添加上“active”選中樣式。

以上是微信小程式關(guān)於Radio選取樣式切換的實(shí)例詳解的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！

本網(wǎng)站聲明

本文內(nèi)容由網(wǎng)友自願(yuàn)投稿，版權(quán)歸原作者所有。本站不承擔(dān)相應(yīng)的法律責(zé)任。如發(fā)現(xiàn)涉嫌抄襲或侵權(quán)的內(nèi)容，請(qǐng)聯(lián)絡(luò)admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅(qū)動(dòng)的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片

熱工具

熱門話題

Laravel 教程

1597

PHP教程

1488

Related knowledge

macOS：如何更改桌面小工具的顏色 Oct 07, 2023 am 08:17 AM

在macOSSonoma中，小工具不必隱藏在螢?zāi)煌猓膊槐叵裨谙惹鞍姹镜腁pple的macOS中那樣在通知中心面板中被遺忘。相反，它們可以直接放置在Mac的桌面上–它們也是互動(dòng)的。不使用時(shí)，macOS桌面小工具會(huì)採(cǎi)用單色樣式淡入背景，從而減少干擾，並允許您專注於活動(dòng)應(yīng)用程式或視窗中手邊的任務(wù)。但是，當(dāng)您單擊桌面時(shí)，它們將恢復(fù)為全彩色。如果您喜歡單調(diào)的外觀，並且希望在桌面上保留這一方面的統(tǒng)一性，那麼有一種方法可以使其永久化。以下步驟示範(fàn)了它是如何完成的。開啟“系統(tǒng)設(shè)定”應(yīng)用

使用Python開發(fā)微信小程式 Jun 17, 2023 pm 06:34 PM

隨著行動(dòng)互聯(lián)網(wǎng)技術(shù)和智慧型手機(jī)的普及，微信成為了人們生活中不可或缺的一個(gè)應(yīng)用。而微信小程式則讓人們可以在不需要下載安裝應(yīng)用程式的情況下，直接使用小程式來解決一些簡(jiǎn)單的需求。本文將介紹如何使用Python來開發(fā)微信小程式。一、準(zhǔn)備工作在使用Python開發(fā)微信小程式之前，需要先安裝相關(guān)的Python函式庫(kù)。這裡推薦使用wxpy和itchat這兩個(gè)函式庫(kù)。 wxpy是一個(gè)微信機(jī)器

實(shí)作微信小程式中的卡片翻轉(zhuǎn)特效 Nov 21, 2023 am 10:55 AM

實(shí)作微信小程式中的卡片翻轉(zhuǎn)特效在微信小程式中，實(shí)現(xiàn)卡片翻轉(zhuǎn)特效是一種常見的動(dòng)畫效果，可以提升使用者體驗(yàn)和介面互動(dòng)的吸引力。以下將具體介紹如何在微信小程式中實(shí)現(xiàn)卡片翻轉(zhuǎn)的特效，並提供相關(guān)程式碼範(fàn)例。首先，需要在小程式的頁(yè)面佈局檔案中定義兩個(gè)卡片元素，一個(gè)用於顯示正面內(nèi)容，一個(gè)用於顯示背面內(nèi)容，具體範(fàn)例程式碼如下：&l

支付寶上線「漢字拾光-生僻字」小程序，用於徵集、補(bǔ)充生僻字庫(kù) Oct 31, 2023 pm 09:25 PM

本站10月31日消息，今年5月27日，螞蟻集團(tuán)宣布啟動(dòng)“漢字拾光計(jì)劃”，最近又迎來新進(jìn)展：支付寶上線“漢字拾光-生僻字”小程序，用於向社會(huì)徵集生僻字，補(bǔ)充生僻字庫(kù)，同時(shí)提供不同的生僻字輸入體驗(yàn)，以幫助完善支付寶內(nèi)的生僻字輸入方法。目前，用戶搜尋「漢字拾光」、「生僻字」等關(guān)鍵字就可以進(jìn)入「生僻字」小程式。在小程式裡，使用者可以提交尚未被系統(tǒng)辨識(shí)輸入的生僻字圖片，支付寶工程師確認(rèn)後，將會(huì)對(duì)字庫(kù)進(jìn)行補(bǔ)錄入。本站注意到，使用者也可以在小程式體驗(yàn)最新的拆字輸入法，這項(xiàng)輸入法針對(duì)讀音不明確的生僻字設(shè)計(jì)。用戶拆

小程式能用react嗎 Dec 29, 2022 am 11:06 AM

小程式能用react，其使用方法：1、基於「react-reconciler」實(shí)作一個(gè)渲染器，產(chǎn)生一個(gè)DSL；2、建立一個(gè)小程式元件，去解析和渲染DSL；3、安裝npm，並執(zhí)行開發(fā)者工具中的建構(gòu)npm；4、在自己的頁(yè)面中引入包，再利用api即可完成開發(fā)。

uniapp如何實(shí)現(xiàn)小程式和H5的快速轉(zhuǎn)換 Oct 20, 2023 pm 02:12 PM

uniapp如何實(shí)現(xiàn)小程式和H5的快速轉(zhuǎn)換，需要具體程式碼範(fàn)例近年來，隨著行動(dòng)網(wǎng)路的發(fā)展和智慧型手機(jī)的普及，小程式和H5成為了不可或缺的應(yīng)用形式。而uniapp作為一個(gè)跨平臺(tái)的開發(fā)框架，可以在一套程式碼的基礎(chǔ)上，快速實(shí)現(xiàn)小程式和H5的轉(zhuǎn)換，大大提高了開發(fā)效率。本文將介紹uniapp如何實(shí)現(xiàn)小程式和H5的快速轉(zhuǎn)換，並給出具體的程式碼範(fàn)例。一、uniapp簡(jiǎn)介unia

WordPress網(wǎng)頁(yè)錯(cuò)位現(xiàn)象解決攻略 Mar 05, 2024 pm 01:12 PM

WordPress網(wǎng)頁(yè)錯(cuò)位現(xiàn)象解決攻略在WordPress網(wǎng)站開發(fā)中，有時(shí)候我們會(huì)遇到網(wǎng)頁(yè)元素錯(cuò)位的情況，這可能是由於不同裝置上的螢?zāi)怀叽?、瀏覽器相容性或CSS樣式設(shè)定不當(dāng)所致。要解決這種錯(cuò)位現(xiàn)象，我們需要仔細(xì)分析問題、找出可能的原因，並逐步進(jìn)行除錯(cuò)和修復(fù)。本文將分享一些常見的WordPress網(wǎng)頁(yè)錯(cuò)位問題以及對(duì)應(yīng)的解決攻略，同時(shí)提供具體的程式碼範(fàn)例，幫助開