微信小程序自定義單項選擇器樣式

更新時間：2019年07月25日 11:48:43 作者：MarieDreamer

這篇文章主要為大家詳細介紹了微信小程序自定義單項選擇器樣式，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序自定義單項選擇器樣式的具體代碼，供大家參考，具體內(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': '進行中的訂單', '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
 
  })
 
 }
 
 
})

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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