快捷導(dǎo)航

微信小程序自定義單項(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)文章

使用JavaScript實(shí)現(xiàn)簡(jiǎn)單圖像放大鏡效果
圖像放大鏡在很多網(wǎng)站中都扮演著重要的角色，大多數(shù)開發(fā)人員使用?jquery?來(lái)創(chuàng)建圖像放大鏡。在本教程中，我將向大家展示如何使用?HTML、CSS?和?JavaScript?制作一個(gè)簡(jiǎn)單的圖像放大鏡，需要的可以參考一下
2022-08-08
javascript如何動(dòng)態(tài)加載表格與動(dòng)態(tài)添加表格行
在某些時(shí)候需要?jiǎng)討B(tài)加載表格與動(dòng)態(tài)添加表格行，在接下來(lái)的文章中將為大家介紹下javascript是如何做到的，感興趣的朋友不要錯(cuò)過(guò)
2013-11-11
JS技巧Canvas性能優(yōu)化臟矩形渲染實(shí)例詳解
這篇文章主要為大家介紹了JS技巧Canvas?性能優(yōu)化臟矩形渲染實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
JavaScript中匿名函數(shù)的遞歸調(diào)用
本文主要介紹了JavaScript中匿名函數(shù)的遞歸調(diào)用。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-01-01
詳解JS中continue關(guān)鍵字和break關(guān)鍵字的區(qū)別
在javascript中continue的作用是退出當(dāng)前次循環(huán)，break的作用則是一旦當(dāng)前循環(huán)有break那么直接退出整個(gè)循環(huán)。本文將通過(guò)一些示例為大家詳細(xì)講講二者的區(qū)別，感興趣的可以了解一下
2022-08-08
JavaScript中forEach和map詳細(xì)講解
foreach和map都是JavaScript中數(shù)組的常用方法,它們都可以對(duì)數(shù)組中的每個(gè)元素執(zhí)行一個(gè)函數(shù),但是它們有一些區(qū)別,下面這篇文章主要給大家介紹了關(guān)于JavaScript中forEach和map詳細(xì)講解的相關(guān)資料,需要的朋友可以參考下
2023-11-11
淺談函數(shù)調(diào)用的不同方式,以及this的指向
下面小編就為大家?guī)?lái)一篇淺談函數(shù)調(diào)用的不同方式,以及this的指向。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
javascript(jquery)利用函數(shù)修改全局變量的代碼
現(xiàn)在博客系統(tǒng)的評(píng)論遇到一個(gè)問題，用戶點(diǎn)擊“最后一頁(yè)”鏈接之后就自動(dòng)調(diào)取最后一頁(yè)的資料來(lái)顯示。
2009-11-11
用js實(shí)現(xiàn)多域名不同文件的調(diào)用方法
用js實(shí)現(xiàn)多域名不同文件的調(diào)用方法...
2007-01-01
微信小程序與公眾號(hào)卡券/會(huì)員打通的問題
這篇文章主要介紹了微信小程序與公眾號(hào)卡券/會(huì)員打通的問題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07