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