微信小程序仿RadioGroup改變樣式的處理方案
更新時間：2018年07月13日 17:22:23 作者：MarieDreamer
本文給大家分享一段簡單的代碼來實現(xiàn)微信小程序仿RadioGroup改變樣式的方法，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
最開始想改變Radio的樣式，但是發(fā)現(xiàn)自己寫比較方便就直接寫了一個。
先上效果：
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': '進行中的訂單', '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改變樣式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
swiper 解決動態(tài)加載數(shù)據(jù)滑動失效的問題
下面小編就為大家分享一篇swiper 解決動態(tài)加載數(shù)據(jù)滑動失效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細介紹了用js實現(xiàn)簡單輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript中l(wèi)ayim之整合右鍵菜單的示例代碼
這篇文章主要介紹了JavaScript中l(wèi)ayim之整合右鍵菜單的示例代碼,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-02
javascript判斷網(wǎng)頁是關(guān)閉還是刷新
本篇文章給大家介紹js判斷網(wǎng)頁是關(guān)閉還是刷新，實現(xiàn)原理就是通過離開頁面行為時間onunload觸發(fā)時間去檢測此時的瀏覽器的窗口大小，根據(jù)大小由此判斷用戶是刷新，跳轉(zhuǎn)或是關(guān)閉行為程序，需要的朋友可以參考下本文2015-09-09
JavaScript綁定事件監(jiān)聽函數(shù)的通用方法
這篇文章主要為大家詳細介紹了JavaScript綁定事件監(jiān)聽函數(shù)的通用方法，感興趣的朋友可以參考一下2016-05-05
JS實現(xiàn)數(shù)組去重,顯示重復元素及個數(shù)的方法示例
這篇文章主要介紹了JS實現(xiàn)數(shù)組去重,顯示重復元素及個數(shù)的方法,涉及javascript數(shù)組遍歷、統(tǒng)計、計算等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
在mpvue框架中使用Vant WeappUI組件庫的注意事項【推進】
這篇文章主要介紹了在mpvue框架中使用Vant WeappUI組件庫的注意事項,本文給大家提到了引入組件庫的兩種方法，需要的朋友可以參考下2019-06-06
本文介紹如何編寫JavaScript腳本，將用戶數(shù)據(jù)發(fā)回服務器。對此感興趣的同學，可以參考下2021-05-05
在web頁面中，圖片居左，內(nèi)容居右排列，是非常常見的效果，它也就是媒體對象，它是一種抽象的樣式，可以用來構(gòu)建不同類型的組件。本文給大家介紹Bootstrap媒體對象的實現(xiàn)，感興趣的朋友一起學習吧2016-05-05
JavaScript內(nèi)置日期、時間格式化時間實例代碼
JS中的 Date 對象用于處理日期和時間,Date對象和Math對象不一樣，Date是一個構(gòu)造函數(shù)，需要實例化后才能使用對象中具體的方法和屬性。這篇文章主要給大家介紹了關(guān)于JavaScript內(nèi)置日期、時間格式化時間的相關(guān)資料,需要的朋友可以參考下2021-05-05