微信小程序自定義單項選擇器樣式
更新時間：2019年07月25日 11:48:43 作者：MarieDreamer
這篇文章主要為大家詳細介紹了微信小程序自定義單項選擇器樣式，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序自定義單項選擇器樣式的具體代碼，供大家參考，具體內容如下
效果：
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
})
}
})
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
由于現在的很多用戶的分辨率問題，導致很多廣告會遮擋內容或者對于不同分辨率的用戶不同的css樣式，就可以參考下面的代碼2013-07-07
用來計算兩個整數的百分比值的代碼，需要的可以看看。2009-12-12
JavaScript中的常見問題解決方法(亂碼,IE緩存,代理)
這篇文章主要是對JavaScript中的常見問題解決方法(亂碼,IE緩存,代理)進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所 幫助2013-11-11
今天小編就為大家分享一篇在iFrame子頁面里實現模態(tài)框的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要給大家介紹了關于echarts實現晶體球面投影的相關資料，文中介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
這篇文章主要介紹了JavaScript擴展運算符的學習及應用詳情(ES6),擴展運算符是ES6新增的一種運算符，他可以幫助我們簡化代碼，簡化操作，具體相關知識感興趣的小伙伴可以查看下面文章的簡單介紹2022-08-08
新增加的內容是如何將div的scrollbar自動移動最下面
在做動態(tài)增長的div時,一般都是將內容append到div的最下面,但這會帶來一個問題,那就是新增加的內容會被遮在最下面,具體實現如下,感興趣的朋友可以參考下2014-01-01
下面小編就為大家?guī)硪黄獪\談js的html元素的父節(jié)點,子節(jié)點。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
關于layui 實現點擊按鈕添加一行(方法渲染創(chuàng)建的table)
今天小編就為大家分享一篇關于layui 實現點擊按鈕添加一行(方法渲染創(chuàng)建的table)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細介紹了bootstrap table合并行數據并居中對齊效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10