国产探花免费观看_亚洲丰满少妇自慰呻吟_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   })  }  })

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

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 龙山县| 雷州市| 花莲市| 满城县| 逊克县| 五大连池市| 册亨县| 屏南县| 沙洋县| 丹巴县| 思南县| 华蓥市| 聂拉木县| 朝阳区| 汾阳市| 南木林县| 津南区| 松潘县| 安新县| 贡山| 巴彦淖尔市| 岢岚县| 呼玛县| 土默特左旗| 康定县| 荔浦县| 当阳市| 柘城县| 高青县| 望奎县| 黑水县| 广平县| 华蓥市| 正镶白旗| 西乌珠穆沁旗| 庄浪县| 盐池县| 石泉县| 南部县| 南丹县| 曲阜市|