微信小程序-遍历数组的单选多选
发布时间：作者：济南小程序开发来源：未知点击:
但很多客户都想要做小程序。 最近做了一个小程序的项目 踩了不少的坑 但网上相关的资料很少，这些坑都是自己一个一个的踩过来的。 现在分享一些填坑的经验 希望大家工作顺利。有写的不恰当不对的地方 欢迎留言或给我发邮件。
单选
- 应用场景 ：选择导航、标签、 播放音频等。踩坑原因 ： 小程序不支持dom操作。
wxml
123456789 |
<view class="item"> <p>单选</p> <block wx:for="{{box}}" wx:for-item="box" wx:for-index="index"> <view wx:if="{{choose==index}}"> <view bindtap="choose" data-index="{{index}}" class="box_choose box">{{box.name}}</view> </view> <view wx:else="{{choose==index}}"> <view bindtap="choose" data-index="{{index}}" class="box">{{box.name}}</view></view>
|
wxss
12345678910111213141516171819202122232425262728293031323334 |
.item { padding-top: 15%; margin-top: 5%; position: relative; display: -webkit-flex;}.item p { position: absolute; color: #adadad; top: 10%; left: 10%;}.item view { margin: 5%; flex: 1;}.box { width: 150rpx; height: 150rpx; text-align: center; padding-top: 35%; border: 1px solid black; border-radius: 4px; box-sizing: border-box;}.box_choose { background-color: #4889fe; color: white; border-color: white;}
|
