资讯中心

资讯中心

当前位置:主页 > 资讯中心 > 常见问题 >

微信小程序-遍历数组的单选多选

发布时间:作者:济南小程序开发来源:未知点击:

但很多客户都想要做小程序。 最近做了一个小程序的项目 踩了不少的坑 但网上相关的资料很少,这些坑都是自己一个一个的踩过来的。 现在分享一些填坑的经验 希望大家工作顺利。有写的不恰当不对的地方 欢迎留言或给我发邮件。

单选

  1. 应用场景 :选择导航、标签、 播放音频等。踩坑原因 : 小程序不支持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;}

js

TOP

QQ客服

15069066861

拨打电话