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

首頁 > 課堂 > 小程序 > 正文

微信小程序仿RadioGroup改變樣式的處理方案

2020-03-21 16:14:38
字體:
來源:轉載
供稿:網友

最開始想改變Radio的樣式,但是發現自己寫比較方便就直接寫了一個。

先上效果:

微信小程序,RadioGroup,樣式

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

總結

以上所述是小編給大家介紹的微信小程序仿RadioGroup改變樣式,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對VEVB武林網網站的支持!


發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 扬中市| 登封市| 华池县| 灌云县| 曲阜市| 永和县| 广南县| 章丘市| 德庆县| 平遥县| 集安市| 威海市| 冷水江市| 大荔县| 泽州县| 永德县| 临漳县| 柳江县| 仙桃市| 抚顺县| 西乌珠穆沁旗| 江安县| 和龙市| 神农架林区| 湖口县| 盐源县| 乾安县| 宿州市| 鲁山县| 望江县| 邯郸市| 宜兰县| 高清| 福贡县| 安福县| 平安县| 通道| 新巴尔虎左旗| 伊金霍洛旗| 木里| 玛纳斯县|