微信小程序仿RadioGroup改變樣式的處理方案
更新時(shí)間：2018年07月13日 17:22:23 作者：MarieDreamer
本文給大家分享一段簡(jiǎn)單的代碼來(lái)實(shí)現(xiàn)微信小程序仿RadioGroup改變樣式的方法，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
最開(kāi)始想改變Radio的樣式，但是發(fā)現(xiàn)自己寫(xiě)比較方便就直接寫(xiě)了一個(gè)。
先上效果：
wxml：
<view bindchange="radioChange">
<view class='list_item' wx:for="{{radioValues}}" data-index="{{index}}" bindtap='radioChange' style="{{index == radioValues.length-1?'border-bottom:0':''}}">
<text style='color:rgb(96,96,96)'>{{item.value}}</text>
<view wx:if="{{item.selected}}" class='item'>
<view style='width:20rpx;height:20rpx;background-color:rgb(144,144,144);border-radius:100%;'></view>
</view>
<view wx:else class='item'></view>
</view>
</view>
wcss：
.list_item{
display: flex;
justify-content: space-between;
align-items: center;
margin:0 25rpx;
width:700rpx;
font-size: 30rpx;
color: rgb(79,79,79);
padding: 28rpx 0;
border-bottom:1px solid rgb(209,209,209);
}
.item{
width: 28rpx;
height: 28rpx;
border: 2px solid rgb(144,144,144);
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
}
js：
Page({
data: {
radioValues: [
{ 'value': '未付款訂單', 'selected': false },
{ 'value': '進(jìn)行中的訂單', 'selected': false },
{ 'value': '完成了的訂單', 'selected': false },
{ 'value': '所有訂單', 'selected': true },
]
},
onLoad: function (options) {
},
radioChange:function(e){
var index = e.currentTarget.dataset.index;
var arr = this.data.radioValues;
for (var v in arr){
if (v == index){
arr[v].selected = true;
}else{
arr[v].selected = false;
}
}
this.setData({
radioValues:arr
})
}
})
總結(jié)
以上所述是小編給大家介紹的微信小程序仿RadioGroup改變樣式，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了JavaScript對(duì)象之深度克隆介紹,本文詳細(xì)的講解了什么是對(duì)象深度克隆,并給出了示例代碼,需要的朋友可以參考下2014-12-12
JavaScript基礎(chǔ)之流程控制語(yǔ)句的用法
下面就為大家?guī)?lái)一篇JavaScript基礎(chǔ)之流程控制語(yǔ)句的用法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
寫(xiě)入cookie的JavaScript代碼庫(kù) cookieLibrary.js
cookieLibrary.js 寫(xiě)入cookie的JavaScript代碼庫(kù),需要的朋友可以參考下。2009-10-10
微信小程序?qū)崿F(xiàn)簡(jiǎn)單倒計(jì)時(shí)功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單倒計(jì)時(shí)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
javascript實(shí)現(xiàn)相同事件名稱(chēng)，不同命名空間的調(diào)用方法
這篇文章主要介紹了javascript實(shí)現(xiàn)相同事件名稱(chēng)，不同命名空間的調(diào)用方法,涉及javascript命名空間及事件調(diào)用的技巧,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了JavaScript模塊模式,結(jié)合實(shí)例形式詳細(xì)分析了js模塊模式的相關(guān)概念、功能、擴(kuò)展等操作技巧,需要的朋友可以參考下2017-10-10
JS支持帶x身份證號(hào)碼驗(yàn)證函數(shù)
身份證號(hào)碼驗(yàn)證-支持新的帶x身份證2008-08-08
今天寫(xiě)一個(gè)滑動(dòng)自動(dòng)加載的功能的時(shí)候，遇到了切換就發(fā)現(xiàn)加載完畢的情況，查看了下發(fā)現(xiàn)可能是js的全局變量和局部變量的問(wèn)題，自己測(cè)試了下，果不其然，下面分享下2020-07-07
這篇文章主要介紹了JavaScript中的時(shí)間處理小結(jié)的相關(guān)資料,需要的朋友可以參考下2016-02-02
對(duì)于document.compatMode，很多朋友可能都根我一樣很少接觸，知道他的存在卻不清楚他的用途。2009-05-05