国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

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

2019-11-19 11:08:10
字體:
來源:轉載
供稿:網友

本文實例為大家分享了微信小程序自定義單項選擇器樣式的具體代碼,供大家參考,具體內容如下

效果:

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   })  }  })

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 东莞市| 德江县| 杭州市| 新宾| 淮阳县| 盐山县| 博野县| 昌邑市| 泰安市| 江安县| 环江| 阳曲县| 宿松县| 任丘市| 齐齐哈尔市| 玛多县| 海城市| 凤庆县| 青神县| 界首市| 西藏| 忻州市| 抚州市| 三原县| 崇阳县| 乌苏市| 乾安县| 和平县| 晋宁县| 康平县| 高雄县| 健康| 仁怀市| 高陵县| 平安县| 江北区| 徐州市| 崇仁县| 普陀区| 扶余县| 景谷|